Vite helps you to integrate Vite.js with Phoenix.
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") %>
# in config/config.exs
# Configure Vite
config :vite_phx,
release_app: :demo,
# to tell prod and dev env appart
environment: Mix.env(),
# URL/path from which to load assets (in production)
asset_prefix: "https://static.example.com/", # defaults to "/"
# 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: "https://localhost:3000" # optional
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.