Vite Ruby
Return to top
On this page

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.

Batteries Included 🔋

If you want a more opinionated setup, you can replace vite-plugin-ruby with vite-plugin-rails.

It will include additional plugins that users typically add in Rails apps.

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 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 images you can use vite_image_tag or vite_picture_tag (Rails 7.1+):

<%= vite_image_tag 'images/logo.jpg' %>
<%= vite_picture_tag 'images/logo.avif', 'images/logo.jpg', image: {alt: 'example'}) %>

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

<link rel="apple-touch-icon" type="image/png" href="<%= vite_asset_path 'images/favicon.png' %>" />
<link rel="prefetch" href="<%= vite_asset_path 'typography.css' %>" />

Use vite_asset_url when you need the full URL:

<meta property="twitter:image" content="<%= vite_asset_url 'images/social-banner.png' %>">

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

Entrypoints Only

Make sure any files that are being referenced in tag helpers are entrypoints.

Otherwise, Vite won't be aware of these files and won't bundle them.

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"/>