Recommended Plugins

Using Vite Ruby is even more enjoyable with the following plugins.

Check the example app for a sample setup with most of them.

Official Vite.js Plugins

When using Vue, React, or Svelte, check out Vite's official plugins.

Rails

vite-plugin-rails provides a shortcut for installing and configuring the following plugins for a typical Rails application:

• vite-plugin-environment
• vite-plugin-full-reload
• vite-plugin-stimulus-hmr
• rollup-plugin-gzip: pre-configured to compress assets using gzip and brotli

In the future, vite_rails might install this plugin by default.

plugins: [
  Rails({
    envVars: { RAILS_ENV: 'development' },
  }),
],

TIP

You can opt-out and use vite-plugin-ruby instead, manually adding only the plugins you need.

Environment

Use vite-plugin-environment to expose environment variables to your client code.

plugins: [
  Environment(['NODE_ENV', 'API_KEY', 'APP_VERSION']),

TIP

Use it only when it's not possible or desirable to prefix variables with VITE_, or if using import.meta.env in the client code is not an option.

Full Reload

Use vite-plugin-full-reload to automatically reload the page when making changes to server-rendered layouts and templates, improving the feedback cycle.

Works nicely in combination with JS From Routes.

plugins: [
  FullReload(['config/routes.rb', 'app/views/**/*'], { delay: 200 })

JS From Routes

Use js_from_routes to generate path helpers and API methods from your Rails routes.

Forget about hard-coding URLs and enjoy a safer and smoother API layer.

import { videoClips } from '~/api'

const video = await videoClips.get({ id: '5' })

const path = videoClips.download.path(video) // "/video_clips/5/download"

Stimulus Helpers

Use stimulus-vite-helpers to easily register all Stimulus controllers using import.meta.glob.

const controllers = import.meta.glob('./**/*_controller.js', { eager: true })
registerControllers(application, controllers)

Comes installed by default in this template.

Stimulus HMR

Use vite-plugin-stimulus-hmr to enable HMR for Stimulus.

See changes to your controllers instantly without refreshing the page.

plugins: [
  StimulusHMR(),

Tailwind CSS 4

Use the official @tailwindcss/vite plugin to integrate Tailwind CSS 4 with Vite.

plugins: [
  tailwindcss(),

Import Tailwind in your application stylesheet:

@import "tailwindcss";

Tailwind CSS 4 can be configured to detect classes in both frontend code and server-rendered templates.

Add vite-plugin-full-reload when template changes should also refresh the page.