Packages

volt

0.19.3
0.23.0 0.22.1 0.22.0 0.21.0 0.20.0 0.19.4 0.19.3 0.19.2 0.19.1 0.19.0 0.18.1 0.18.0 0.17.11 0.17.10 0.17.9 0.17.8 0.17.7 0.17.6 0.17.5 0.17.4 0.17.3 0.17.2 0.17.1 0.17.0 0.16.0 0.15.5 0.15.4 0.15.3 0.15.2 0.15.1 0.15.0 0.14.12 0.14.11 0.14.10 0.14.9 0.14.8 0.14.7 0.14.6 0.14.5 0.14.4 0.14.3 0.14.2 0.14.1 0.14.0 0.13.1 0.13.0 0.12.0 0.11.3 0.11.2 0.11.1 0.11.0 0.10.9 0.10.8 0.10.7 0.10.6 0.10.5 0.10.4 0.10.3 0.10.2 0.10.1 0.10.0 0.9.2 0.9.1 0.9.0 0.8.4 0.8.3 0.8.2 0.8.1 0.8.0 0.7.1 0.7.0 0.6.5 0.6.4 0.6.3 0.6.2 0.6.1 0.6.0 0.5.0 0.4.3 0.4.2 0.4.1 0.4.0 0.3.0 0.2.0 0.1.0

Elixir-native frontend build tool — dev server, HMR, and production builds powered by OXC and Vize.

HexDocs Report package

Current section

Files

Jump to
Documentation
Changelog
License
85 Versions
16 Dependencies
Dependants
Files
Activity
volt guides introduction getting-started.md
Raw

guides/introduction/getting-started.md 

# Getting Started

## Automatic Setup

```bash
mix igniter.install volt
```

The installer:
- Adds `{:volt, "~> 0.19"}` to `mix.exs`
- Configures build settings in `config/config.exs`
- Adds format and lint config to `config/config.exs`
- Adds `Volt.Formatter` plugin to `.formatter.exs`
- Adds the `Volt.DevServer` plug to your endpoint
- Configures Volt's automatic development watcher
- Updates `assets.build` and `assets.deploy` aliases
- Removes `esbuild` and `tailwind` deps if present

Start the server:

```bash
mix phx.server
```

## Manual Setup

Add Volt to your dependencies:

```elixir
def deps do
  [{:volt, "~> 0.19"}]
end
```

### Build Configuration

```elixir
# config/config.exs
config :volt,
  entry: "assets/js/app.ts",
  root: "assets",
  sources: ["**/*.{js,ts,jsx,tsx}"],
  target: :es2020,
  sourcemap: :hidden,
  tailwind: [
    css: "assets/css/app.css",
    sources: [
      %{base: "lib/", pattern: "**/*.{ex,heex}"},
      %{base: "assets/", pattern: "**/*.{js,ts,jsx,tsx}"}
    ]
  ]
```

### Dev Server and Watcher

Add the dev server plug to your endpoint (inside the `code_reloading?` block, after `Phoenix.CodeReloader`). The plug starts its supervised file watcher automatically when it receives the first development request:

```elixir
# lib/my_app_web/endpoint.ex
if code_reloading? do
  # ...
  plug Volt.DevServer, root: "assets"
end
```

Configure any additional directories that should participate in Tailwind rebuilds:

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

No Phoenix `:watchers` entry or separate OS process is required. `mix volt.dev` remains available for standalone or non-Phoenix workflows. Set `watch: false` in the server configuration to disable automatic watching.

### Layout Tags

In your root layout, add both the CSS link and the JS script tag:

```heex
<link phx-track-static rel="stylesheet" href={Volt.static_path(MyAppWeb.Endpoint, "/assets/css/app.css")} />
<script defer phx-track-static type="module" src={Volt.static_path(MyAppWeb.Endpoint, "/assets/js/app.js")}></script>
```

### Mix Aliases

Update your build aliases in `mix.exs`:

```elixir
defp aliases do
  [
    "assets.build": ["volt.build --tailwind"],
    "assets.deploy": ["volt.build --tailwind", "phx.digest"]
  ]
end
```

### Formatting

Add `Volt.Formatter` to `.formatter.exs`:

```elixir
[
  plugins: [Volt.Formatter],
  inputs: [
    "{mix,.formatter}.exs",
    "{config,lib,test}/**/*.{ex,exs}",
    "assets/**/*.{js,ts,jsx,tsx}"
  ]
]
```

## Production Build

```bash
mix volt.build
```

```text
Building Tailwind CSS...
  app-1a2b3c4d.css  23.9 KB
Built Tailwind in 43ms
Building "assets/js/app.ts"...
  app-5e6f7a8b.js  128.4 KB
  manifest.json  2 entries
Built in 15ms
```

See [Production Builds](../deployment/production-builds.md) for all options.