Rails Integration

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

As an alternative, you could also use this template to jumpstart your app.

Tag Helpers 🏷

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

In order to link the JavaScript and CSS managed by Vite in your Rails layouts or templates, you can using the following helpers:

You can pass any options supported by javascript_include_tag and stylesheet_link_tag.

<head>
  <title>Example</title>
  <%= csrf_meta_tags %>
  <%= csp_meta_tag %>
  <%= vite_client_tag %>

  <%= vite_javascript_tag 'application' %>
  <%= vite_stylesheet_tag 'typography', media: 'print' %>
</head>

If using .jsx or any pre-processor, make sure to be explicit:

<%= vite_javascript_tag 'application.tsx' %>
<%= vite_stylesheet_tag 'theme.scss' %>

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 'images/logo.svg' # app/frontend/images/logo.svg
vite_asset_path 'typography.css'  # app/frontend/entrypoints/typography.css
vite_asset_path 'logo.svg'        # app/frontend/entrypoints/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.

Hot Reload for Stimulus Controllers

If you are using Stimulus, check out vite-plugin-stimulus-hmr.

You will no longer need to refresh the page when tweaking your controllers 😃

Comes installed by default in this template.

Smart Output ✨

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

<%= vite_javascript_tag '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"/>