Vite Ruby
Return to top
On this page

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:

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 vite-plugin-windicss and 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(),

Windi CSS

Use vite-plugin-windicss to get an insanely faster and powerful alternative to Tailwind CSS.

This configuration will detect utility classes in components and server-rendered templates:

  • root should match the project root which is usually where vite.config.ts is located
  • Scans erb and haml files to detect classes in server templates
  • Scans the sourceCodeDir to detect classes in components
plugins: [
  WindiCSS({
    root: __dirname,
    scan: {
      fileExtensions: ['erb', 'haml', 'html', 'vue', 'js', 'ts', 'jsx', 'tsx'],
      dirs: ['app/views', 'app/frontend'], // or app/javascript, or app/packs
    },
  }),

Add vite-plugin-full-reload to have the page refresh when making changes to the templates.