Configuration

Entry

config :volt, entry: "assets/js/app.ts"

Entry file path or list of paths.

Output Directory

config :volt, outdir: "priv/static/assets"

Public Directory

config :volt, public_dir: false

Optional Vite-style public directory. Phoenix apps usually keep stable public files in priv/static instead.

Asset URL Prefix

config :volt, asset_url_prefix: "/assets"

Public URL prefix emitted for production JavaScript and CSS asset references. This does not change outdir or Phoenix endpoint/static URL configuration.

Root

config :volt, root: "assets"

Source directory for asset resolution.

Sources

config :volt, sources: ["**/*.{js,ts,jsx,tsx,vue}"]

Glob patterns for file discovery (formatting, linting).

Ignore

config :volt, ignore: ["node_modules/**", "vendor/**"]

Target

config :volt, target: :es2020

JS downlevel target.

Format

config :volt, format: :iife

Output format: :iife, :esm, or :cjs.

Minify

config :volt, minify: true

Hash

config :volt, hash: true

Content-hash filenames for cache busting.

Source Maps

config :volt, sourcemap: true

true, :hidden (no URL comment), or false.

Code Splitting

config :volt, code_splitting: true

Tree Shaking

config :volt, tree_shaking: true

Enabled by default for production builds. Set to false to preserve unused exports.

Env Prefix

config :volt, env_prefix: "VOLT_"

Prefix or list of prefixes exposed through import.meta.env.

External

config :volt, external: ~w(phoenix phoenix_html)

Exclude packages from the bundle. IIFE output reads them from globals; :esm and :cjs keep the imports.

Aliases

config :volt, aliases: %{"@" => "assets/src"}

Import path aliases.

Chunks

config :volt, chunks: %{"vendor" => ["vue"]}

Manual chunk boundaries.

Plugins

config :volt, plugins: [MyPlugin]

Import Source

config :volt, import_source: "react"

JSX import source for React.

Resolve Dirs

config :volt, resolve_dirs: ["node_modules", "deps"]

Additional directories for bare import resolution.

Module Types

config :volt, module_types: %{".css" => :empty, ".ttf" => :empty}

Map file extensions to bundler loaders. Useful for packages that import non-JS files (e.g. Monaco Editor). Supported: :js, :jsx, :ts, :tsx, :json, :text, :base64, :dataurl, :binary, :empty, :css, :asset.

Mode

config :volt, mode: :production

Build mode for env variables. Override with --mode.

Vapor

config :volt, vapor: true

Enable Vue Vapor mode compilation.

Custom Renderer

config :volt, custom_renderer: true

Treat non-HTML tags as renderer-native elements (for PhoenixVapor).

Loaders

config :volt, loaders: %{".js" => "jsx"}

Override file type parsing (e.g. for React projects using JSX in .js files).

CSS Input

config :volt, tailwind: [css: "assets/css/app.css"]

Scan Sources

config :volt, tailwind: [
  sources: [
    %{base: "lib/", pattern: "**/*.{ex,heex}"},
    %{base: "assets/", pattern: "**/*.{vue,ts,tsx}"}
  ]
]

Prefix

config :volt, :server, prefix: "/assets"

URL prefix for dev server routes.

Watch Dirs

config :volt, :server, watch_dirs: ["lib/", "assets/"]

Additional directories to watch for Tailwind rebuilds. The asset root is watched automatically.

Watch Ignored

config :volt, :server, watch_ignored: ["**/.generated/**"]

GlobEx patterns excluded from watcher events. Patterns are relative to each watched root.

Morph

config :volt, :server, morph: [preserve: "[data-island]"]

Patch changed pages in place instead of reloading them. :preserve selects elements owned by client code.

Automatic Watcher

config :volt, :server, watch: true

The dev-server Plug starts a supervised watcher on the first request. Set this to false when another process owns file watching.

Semi

[volt: [semi: false]]

Single Quote

[volt: [single_quote: true]]

Print Width

[volt: [print_width: 100]]

Trailing Comma

[volt: [trailing_comma: :none]]

Arrow Parens

[volt: [arrow_parens: :always]]

Plugins

config :volt, :lint, plugins: ["typescript", "react"]

Rules

config :volt, :lint, rules: %{"eqeqeq" => :deny}

Custom Rules

config :volt, :lint, custom_rules: [
  {MyApp.NoConsoleLog, :warn}
]