Vite Ruby
Return to top
On this page

Hanami Integration

Once you have installed the vite_hanami gem, and have run bundle exec vite install, you should have an installed example.

Tag Helpers 🏷

As we saw in the development section, entrypoints will be automatically detected.

In order to link these JavaScript and CSS entrypoints managed by Vite in your Hanami views or templates, you can use the following helpers:

You can pass any options supported by javascript and stylesheet.

<head>
  <title>Example</title>
  <%= favicon %>
  <%= vite_client %>

  <%= vite_stylesheet 'styles' %>
  <%= vite_typescript 'application' %>
</head>

For other types of assets, you can use vite_asset_path and pass the resulting URI to the appropriate tag helper.

<img src="<%= vite_asset_path 'images/logo.svg' %>" />
<link rel="prefetch" href="<%= vite_asset_path 'typography.css' %>" />

All helpers resolve names to the [entrypointsDir] unless the path includes a directory:

vite_asset_path 'logo.svg'        # app/frontend/entrypoints/logo.svg
vite_asset_path 'images/logo.svg' # app/frontend/images/logo.svg

Enabling Hot Module Reload 🔥

Use the following helpers to enable HMR in development:

They will only render if the dev server is running.

Smart Output ✨

For convenience, vite_javascript will automatically inject tags for styles or entries imported within a script.

<%= vite_javascript 'application' %>

Example output:

<script src="/vite/assets/application.a0ba047e.js" type="module" crossorigin="anonymous"/>
<link rel="modulepreload" href="/vite/assets/example_import.8e1fddc0.js" as="script" type="text/javascript" crossorigin="anonymous">
<link rel="stylesheet" media="screen" href="/vite/assets/application.cccfef34.css">

When running the development server, these tags are omitted, as Vite will load the dependencies.

<script src="/vite/assets/application.js" type="module" crossorigin="anonymous"/>