vite-plugin-turbo-reload

Automatically reload the page via Hotwired Turbo when files are modified

Why? 🤔

When using Vite Ruby, I wanted to see changes to server-rendered layouts and templates without having to manually reload the page.

vite-plugin-turbo-reload is a replacement for the vite-plugin-full-reload plugin, offering smoother and faster DOM updates when using Hotwire Turbo.

Also support HMR for Tailwind CSS.

Installation 💿

Install the package as a development dependency:

npm i -D vite-plugin-turbo-reload # yarn add -D vite-plugin-turbo-reload

Usage 🚀

Add it to your plugins in vite.config.ts

import { defineConfig } from 'vite'
import TurboReload from 'vite-plugin-turbo-reload'

export default defineConfig({
  plugins: [
    TurboReload(["app/components/**/*.slim", "app/views/**/*.slim"], {
      // for Tailwind CSS
      tailwindDirectivePath: "app/frontend/stylesheets/vendor/tailwind/tailwind.scss",
    }),
  ],
})

This is useful to trigger a page refresh for files that are not being imported, such as server-rendered templates.

To see which file globbing options are available, check picomatch.

Limitation

• work only with Turbo version 8.0+
• if using plugin vite-plugin-rails you should set fullReload: false:

import { defineConfig } from 'vite'
import rails from "vite-plugin-rails"
import TurboReload from 'vite-plugin-turbo-reload'

export default defineConfig({
  plugins: [
    rails({ fullReload: false }),
    TurboReload(['app/views/**/*', 'app/components/**/*']),
  ],
})

Configuration ⚙️

The following options can be provided:

• root

  Files will be resolved against this directory.

  Default: process.cwd()

  TurboReload('config/routes.rb', { root: __dirname }),

• tailwindDirectivePath

  Path to file, that contains Tailwind directive - @tailwind base or @import "tailwindcss"

  Default: false

  TurboReload('app/views/**/*', {
    tailwindDirectivePath: "app/frontend/stylesheets/tailwind.scss"
  })

License

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