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.

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 globEager.

const controllers = import.meta.globEager('./**/*_controller.js')
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.