DEV Community 👩‍💻👨‍💻

Konnor Rogers
Konnor Rogers

Posted on

Using Shoelace with Vite Rails


To provide a reusable reference for myself to add Shoelace to a ViteRails project.

Setup ViteRails

I will not cover this here. Instead go check out the ViteRails documentation here:
And come back once youre all setup!

Install Packages

1.) Install Shoelace and rollup-plugin-copy via yarn

yarn install @shoelace-style/shoelace rollup-plugin-copy

Setup CSS entrypoint file

When using vite I usually have a file called:


This is my entrypoint CSS file.

Heres what it should look like:

/* app/frontend/entrypoints/application.css */
@import '@shoelace-style/shoelace/dist/shoelace/themes/base.css';

/* if you want to use the dark theme, uncomment this */
/* @import '@shoelace-style/shoelace/dist/shoelace/themes/dark.css'; */
Enter fullscreen mode Exit fullscreen mode

Setup JS entrypoint file

In Vite, you will also have a app/frontend/entrypoints/application.js file. In this file, add the following lines:

// app/frontend/entrypoints/application.js

import './application.css'

// import shoelace components here

import { setBasePath } from '@shoelace-style/shoelace/dist/utilities/base-path.js'

const mode = import.meta.env.MODE || "development"

const paths = {
  production: "",
  development: "-dev",
  test: "-test"

let rootUrl = `/vite${paths[mode]}`
Enter fullscreen mode Exit fullscreen mode

Setup vite.config.ts

Finally, setup your vite.config.ts like so:

// vite.config.ts

import { defineConfig } from 'vite'
import RubyPlugin from 'vite-plugin-ruby'
import * as path from "path"
import copy from 'rollup-plugin-copy';

const mode = process.env.NODE_ENV || "development"

const paths = {
  production: ``,
  development: `-dev`,
  test: `-test`
const vitePath = `public/vite${paths[mode]}/assets`

export default defineConfig({
  build: {
    rollupOptions: {
      plugins: [
          targets: [
              src: path.resolve(__dirname, 'node_modules/@shoelace-style/shoelace/dist/assets/icons'),
              dest: path.resolve(__dirname, vitePath)
          hook: 'writeBundle'
  plugins: [
Enter fullscreen mode Exit fullscreen mode

and BAM! youre good to go!

Sorry this was so brief and I don't have any examples to share, this was a quick down and dirty that I may revise in the future.

Top comments (0)

Create an Account!

👀 Just want to lurk?

That's fine, you can still create an account and turn on features like 🌚 dark mode.