Read Volt configuration from application environment.

Flat config (single app)

All config lives under the :volt application key in config/config.exs:

# config/config.exs
config :volt,
  entry: "assets/js/app.ts",
  target: :es2020,
  external: ~w(phoenix phoenix_html phoenix_live_view),
  aliases: %{
    "@" => "assets/src",
    "@components" => "assets/src/components"
  },
  plugins: [],
  tailwind: [
    css: "assets/css/app.css",
    sources: [
      %{base: "lib/", pattern: "**/*.{ex,heex}"},
      %{base: "assets/", pattern: "**/*.{vue,ts,tsx}"}
    ]
  ]

# config/dev.exs
config :volt, :server,
  prefix: "/assets",
  watch_dirs: ["lib/"]

Named profiles (umbrella / multi-web apps)

Use a named profile to configure multiple independent Volt instances:

# config/config.exs
config :volt, :my_app_web,
  entry: "apps/my_app_web/assets/js/app.js",
  outdir: "apps/my_app_web/priv/static/assets",
  tailwind: [
    css: "apps/my_app_web/assets/css/app.css",
    sources: [
      %{base: "apps/my_app_web/lib/", pattern: "**/*.{ex,heex,eex}"}
    ]
  ],
  server: [watch_dirs: ["apps/my_app_web/lib/"]]

Pass the profile name to Mix tasks and the plug:

mix volt.build my_app_web --tailwind
mix volt.dev my_app_web --tailwind

plug Volt.DevServer, root: "assets", profile: :my_app_web

CLI flags and plug options override config values.

Source maps

The :sourcemap option controls production source map generation:

• true — write .map files and append //# sourceMappingURL (default)
• :hidden — write .map files but omit the URL comment (for error tracking services)
• false — no source maps

Tree shaking

Production builds tree-shake JavaScript by default. Set tree_shaking: false to preserve unused exports.

Environment variables

The :env_prefix option controls which .env variables are exposed to client code through import.meta.env. It defaults to "VOLT_" and accepts a string or list of strings.

Asset URL prefix

The :asset_url_prefix option controls the public URL prefix emitted for production asset references in JavaScript and CSS. It defaults to "/assets", matching Phoenix's conventional priv/static/assets mount.

Manual chunks

The :chunks option controls manual chunk splitting:

config :volt,
  chunks: %{
    "vendor" => ["vue", "vue-router", "pinia"],
    "ui" => ["assets/src/components"]
  }

Bare specifiers match package names in node_modules. Path patterns match against the full module path.

tsconfig.json paths

Volt automatically reads compilerOptions.paths from tsconfig.json in the project root and merges them into aliases. Explicitly configured aliases take precedence over tsconfig paths.