Vitex (Vitex v0.2.4)

View Source

Phoenix integration with Vite.

This module provides helpers for integrating Vite with Phoenix applications, handling both development and production environments.

Summary

Functions

Get the URL for a Vite asset.

Check if running in development mode with hot module replacement.

Get the path to the Vite plugin JavaScript files.

Generate a script tag for React Refresh in development.

Generate script tags for Vite entries.

Generate Vite client script tag for development.

Functions

asset_path(path)

Get the URL for a Vite asset.

In development, returns the dev server URL. In production, returns the hashed asset URL from the manifest.

Example

<link rel="stylesheet" href={Vitex.asset_path("css/app.css")} />

hmr_enabled?()

Check if running in development mode with hot module replacement.

plugin_path()

Get the path to the Vite plugin JavaScript files.

This is used to configure npm/yarn to use the plugin from the Elixir dependency.

react_refresh()

Generate a script tag for React Refresh in development.

This should be included before your main application scripts when using React.

Example

<%= Vitex.react_refresh() %>

vite_assets(entries)

Generate script tags for Vite entries.

In development, this will load scripts from the Vite dev server. In production, this will load the built and hashed assets.

Examples

<%= Vitex.vite_assets("js/app.js") %>
<%= Vitex.vite_assets(["js/app.js", "js/admin.js"]) %>

vite_client()

Generate Vite client script tag for development.

This enables hot module replacement and other development features.

Example

<%= Vitex.vite_client() %>