Vite

Vite helps you to integrate Vite.js with Phoenix.

Instructions

Add following lines to your layout template:

<%# load the vite.js client script in dev/test environments %>
<%= Vite.vite_client() %>


<%# When using React.js, also include this preamble hot refresh code %>
<%= Vite.react_refresh_snippet() %>


<%#
entry point for your application
- delegates to [Vite.js] in dev / loads all modules / styles in production from the manifest.json
%>
<%= Vite.vite_snippet("src/main.tsx") %>

Configuration

# in config/config.exs

# Configure Vite
config :vite_phx,
  release_app: :demo,
  # to tell prod and dev env appart
  environment: Mix.env(),
  # this manifest is different from the Phoenix "cache_manifest.json"!
  vite_manifest: "priv/static/manifest.json", # optional
  phx_manifest: "priv/static/cache_manifest.json", # optional
  dev_server_address: "http://localhost:3000" # optional

Installation

If available in Hex, the package can be installed by adding vite to your list of dependencies in mix.exs:

def deps do
  [
    {:vite_phx, "~> 0.2"}
  ]
end

Documentation can be generated with ExDoc and published on HexDocs. Once published, the docs can be found at https://hexdocs.pm/vite.