Convention over configuration for Rails projects using Vite

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

You can install it manually by running:

npm i vite-plugin-rails # yarn add vite-plugin-rails

Add it to your plugins in vite.config.ts

// vite.config.ts
import Vue from '@vitejs/plugin-vue' // Example, could be using other plugins.
import ViteRails from 'vite-plugin-rails'

export default {
  plugins: [
    Vue(),
    ViteRails(),
  ],
};

Unlike vite-plugin-ruby, which provides the minimum amount of configuration necessary to get started, this plugin takes a Rails-approach of including plugins you would normally add.

You can configure each plugin by passing options, which are fully typed. See the configuration options for reference.

If you need finer-grained control, you can opt-out and use vite-plugin-ruby instead, manually adding only the plugins you need.

vite-plugin-ruby is added by default.

This plugin uses rollup-plugin-gzip to create gzip and brotli compressed copies of your assets after build.

You can disable each manually:

    ViteRails({
      compress: { brotli: false }
    }),

    ViteRails({
      compress: false
    }),

vite-plugin-environment is used to expose environment variables to your client code, using the import.meta.env convention from Vite.

This plugin allows you to conveniently provide defaults, or fail on required env variables:

    ViteRails({
      envVars: {
        API_KEY: null,
        OPTIONAL_KEY: '<opt-value>',
      },
    }),

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

You can override the default paths, or pass additional ones:

    ViteRails({
      fullReload: {
        additionalPaths: ['app/serializers/**/*']
      },
    }),

vite-plugin-stimulus-hmr is included by default, allowing you to see changes to your Stimulus controllers instantly without refreshing the page.

You can use the stimulus option if you need to configure it.

vite-plugin-manifest-sri is included by default, calculating a cryptographic hash for JavaScript and CSS assets, so that the browser can verify the resources it fetches.

You can use the sri option if you need to configure it.

This library is available as open source under the terms of the MIT License.