Skip to main content
LiveVue replaces esbuild with Vite for both client-side code and SSR to achieve an amazing development experience.

​
Why Vite?

  • Vite provides best-in-class Hot Module Replacement and offers many benefits
  • esbuild package doesn’t support plugins, so we would need a custom build process anyway
  • In production, we use elixir-nodejs for SSR
If you don’t need SSR, you can easily disable it with one line of configuration.

​
Prerequisites

Before installing LiveVue, ensure you have:
  • Node.js (version 19 or later recommended)
  • Elixir 1.13+
  • Phoenix 1.8+ (required for Igniter installer)
  • Igniter installed (see below)

​
Installing Igniter

First, install the Igniter archive: 
mix archive.install hex igniter_new

​
New project

Create a new Phoenix project with LiveVue pre-installed: 
mix igniter.new my_app --with phx.new --install live_vue
This command will:
1

Create Phoenix project

Creates a new Phoenix project using phx.new
2

Install and configure LiveVue

Automatically installs and configures LiveVue
3

Set up tooling

Sets up Vite, Vue, TypeScript, and all necessary files
4

Create demo component

Creates a working Vue demo component to get you started

​
Existing project

To add LiveVue to an existing Phoenix 1.8+ project: 
mix igniter.install live_vue
This will automatically configure your project with all necessary LiveVue setup.
Important limitations:
  • Phoenix 1.8+ required: The Igniter installer depends on phoenix_vite and modern Phoenix features only available in Phoenix 1.8+
  • Pre-Igniter LiveVue upgrade not supported: If you have an existing LiveVue installation from before the Igniter installer was introduced, upgrading via mix igniter.install live_vue is not supported due to significant changes in the installation process. However, you should be able to bump the version of LiveVue in your mix.exs file and everything should still work.
  • LiveVue itself works with Phoenix 1.7: While the automated installer requires Phoenix 1.8+, the LiveVue library itself is compatible with Phoenix 1.7 if installed manually

​
Verifying installation

After installation, verify everything is set up correctly:
1

Install dependencies

mix deps.get
npm install
2

Start the development server

mix phx.server
3

Check the output

You should see Vite building your assets and the Phoenix server starting successfully.

​
What gets installed

The Igniter installer automatically configures:
  • Vite for asset bundling
  • Vue 3 with TypeScript support
  • LiveVue components and utilities
  • SSR configuration for server-side rendering
  • Tailwind CSS integration for Vue files
  • PostCSS configuration
  • Demo Vue component to test your setup

​
Manual installation

Outdated manual instructionsManual installation instructions are currently outdated and don’t work with current versions of dependencies (Tailwind, Phoenix, etc.).We strongly recommend using the Igniter installation above.
The manual installation process involves many complex steps including:
  • Configuring Vite and Vue dependencies
  • Setting up TypeScript and PostCSS
  • Updating Phoenix configuration files
  • Configuring Tailwind for Vue files
  • Setting up SSR for production
  • And many more manual steps…
For the current version, please use the Igniter installation method.

​
Next steps

Quick start guide

Now that you have LiveVue installed, create your first Vue component

Build docs developers (and LLMs) love

Get started for freeTalk to us