A Vite plugin that integrates Scala.js projects built with either SBT or Mill build tools. This plugin automatically watches your Scala.js output directories and triggers Vite reloads when files change, making development seamless.
- Multi-build tool support: Works with both SBT (1.x and 2.x) and Mill
- Automatic file watching: Watches Scala.js output directories and triggers Vite reloads
- Development and production modes: Supports both fast and full linking
- Flexible configuration: Multiple projects with different build tools
- Throttled reloads: Prevents excessive reloads during rapid file changes
- Backward compatibility: Maintains compatibility with existing SBT-only setups
pnpm add -D @thijsbroersen/vite-plugin-scalajs
# or: npm install -D @thijsbroersen/vite-plugin-scalajsPeer dependency: Vite 5, 6, 7, or 8 (install vite in your project).
import { defineConfig } from 'vite';
import { scalajsPlugin } from '@thijsbroersen/vite-plugin-scalajs';
export default defineConfig({
plugins: [
scalajsPlugin({
projects: [
{
projectID: 'myProject',
buildTool: {
tool: 'sbt'
}
}
]
})
]
});import { defineConfig } from 'vite';
import { scalajsPlugin } from '@thijsbroersen/vite-plugin-scalajs';
export default defineConfig({
plugins: [
scalajsPlugin({
projects: [
{
projectID: 'example',
buildTool: {
tool: 'mill'
}
}
]
})
]
});import { defineConfig } from 'vite';
import { scalajsPlugin } from '@thijsbroersen/vite-plugin-scalajs';
export default defineConfig({
plugins: [
scalajsPlugin({
projects: [
{
projectID: 'backend',
buildTool: {
tool: 'sbt'
}
},
{
projectID: 'frontend',
buildTool: {
tool: 'mill'
}
}
]
})
]
});projects: Array of Scala.js project configurationsprojectRoot: Root directory of the Scala project (auto-detected if not provided)cwd: Working directory for build tool commands (optional)reloadThrottleMs: Minimum time in milliseconds between file change reloads (default: 2000)
projectID: Project identifier (used for URI prefix and build tool targeting)buildTool: Build tool configurationtool: Either'sbt'or'mill'script: Custom script name (optional, defaults to'sbt'or'mill')
uriPrefix: Custom URI prefix for imports (optional, defaults toprojectID:)
Import Scala.js modules using the configured URI prefix:
// Using projectID as prefix (default)
import 'myProject:main.js';
// Using custom prefix
import 'custom:main.js';The plugin automatically detects the Vite mode:
- Development: Uses
fastLinkJS(SBT) orfastLinkJS(Mill) - Production: Uses
fullLinkJS(SBT) orfullLinkJS(Mill)
- Getting Started Guide: Complete step-by-step setup for new projects
test/mill-project/: Mill-based Scala.js project with Vite configurationtest/sbt-project/: SBT 1.x-based Scala.js project with multiple modulestest/sbt-2-project/: SBT 2.x-based Scala.js project with multiple modules
// vite.config.ts
import { defineConfig } from 'vite';
import { scalajsPlugin } from '@thijsbroersen/vite-plugin-scalajs';
export default defineConfig({
plugins: [
scalajsPlugin({
projects: [
{
projectID: 'example',
buildTool: {
tool: 'mill',
script: './mill-assembly.jar' // optional, defaults to './mill'
},
uriPrefix: 'millexample' // optional, defaults to projectID
}
]
})
]
});<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>Scala.js + Vite</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>// src/main.js
import 'mill.example:main.js';
// Your JavaScript code here
console.log('Hello from Vite + Scala.js!');ScalaJSPluginOptions: Main plugin configurationScalaJSProject: Individual project configurationBuildTool: Union type for SBT or Mill build toolsSbtBuildTool: SBT-specific configurationMillBuildTool: Mill-specific configuration
scalajsPlugin(options): Main plugin function
- Build tool not found: Ensure SBT or Mill is installed and available in your PATH or that the
scriptconfig refers to the correct file - Output directory not found: The plugin waits for build tools to create output directories
- Excessive reloads: Adjust
reloadThrottleMsto reduce reload frequency - Import resolution fails: Check that your
uriPrefixorprojectIDis correct and that the script exists the output directory
Enable debug logging by setting the DEBUG environment variable:
DEBUG=1 npm test- Fork the repository
- Create a feature branch
- Make your changes
- Add tests
- Submit a pull request
Apache 2.0