Fork My Brain

Rails + Vite + Vue + TailwindCSS Setup Guide

2 min read

Rails + Vite + Vue + TailwindCSS Setup Guide

Create a New Rails Project

rails new sixshot-admin --skip-javascript

Add Vite Ruby Gem

In your Gemfile, add:

gem "vite_rails"

Then install the gems:

bundle install

Install Vite:

bundle exec vite install

Setup Vue Project

  1. Inside your Rails project, create a frontend folder if not exist:
mkdir -p app/frontend
  1. Create a Vite + Vue project inside the frontend folder:
pnpm create vite client --template vue
  1. Remove the default node_modules in the client folder:
rm -rf client/node_modules

If you want you can follow Vite + Vue + TailwindCSS Setup (Using pnpm)

Install TailwindCSS

From the Rails root folder:

pnpm add tailwindcss @tailwindcss/vite

Update the package.json in the root folder with the following:

{
  "private": true,
  "type": "module",
  "devDependencies": {
    "vite": "^5.4.20",
    "vite-plugin-ruby": "^5.1.1"
  },
  "dependencies": {
    "@tailwindcss/vite": "^4.1.14",
    "@vitejs/plugin-vue": "^6.0.1",
    "tailwindcss": "^4.1.14",
    "vite": "^5.0.0",
    "vite-plugin-rails": "^0.5.0",
    "vue": "^3.5.22"
  }
}

and do pnpm install from the root folder

Configure Vite + TailwindCSS

Edit vite.config.ts in your root folder:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite'
 
export default defineConfig({
  plugins: [
    vue(),
    tailwindcss(),
  ],
})

Setup TailwindCSS

In your main CSS file (e.g., src/style.css):

@import "tailwindcss";

Clean Up Client Folder

Delete unnecessary files in client:

rm client/main.js package.json pnpm-lock.yaml

Update Rails Application JS

In app/frontend/entrypoints/application.js:

import { createApp } from "vue";
import App from "../client/src/App.vue";
import "../client/src/style.css";
 
const app = createApp(App);
app.mount("#app");

Create Root View

In app/views/home/index.html.erb:

<div id="app"></div>

Update Application Controller

In app/controllers/application_controller.rb:

class ApplicationController < ActionController::Base
  # Only allow modern browsers supporting webp images, web push, badges, import maps, CSS nesting, and CSS :has.
  allow_browser versions: :modern
 
  def index
    render "home/index"
  end
end

Configure Routes

In config/routes.rb:

Rails.application.routes.draw do
  root "application#index"
end

Setup Complete

  • Rails serves Vue via Vite.

  • TailwindCSS is integrated.

  • The root route points to a Vue-powered home page.

Graph View