Boot Vue

shadcn-vue copies accessible components built on Reka UI into src/components/ui. They are styled with Tailwind CSS 4 and the theme variables in src/styles/main.css, and the code is yours to change. The template comes with button, card, dropdown menu, tooltip, avatar, switch, slider and label, and the CLI adds the rest, see Add components.

Vite 8 builds with Rolldown. pnpm dev opens the app on http://localhost:8888, with Vue DevTools at /__devtools__/, Inspect at /__inspect/ to see how each module is transformed, and an MCP server at /__mcp/sse for AI assistants.

The site bar switches between light, dark and the system theme. VueUse's useColorMode stores the choice, a short script in index.html applies it before the first paint so a dark page never flashes white, and the new theme spreads from the click with a view transition (src/composables/theme.ts).

Pinia stores live in src/store and are imported automatically. The tile on the home page and the counter page both call counter(), so they share one count.

// src/store/counter.ts
export const counter = defineStore("counter", () => {
  const count = ref<number>(1);
  function increment() {
    count.value++;
  }

  return { count, increment };
});

Messages live in src/locales/<language>.json and are compiled at build time by @intlify/unplugin-vue-i18n. To add a language, add a file: the language menu lists every file in the folder, remembers the visitor's choice and sets the lang of the page.

unplugin-auto-import brings in the APIs of Vue, Vue Router, vue-i18n and VueUse, and everything exported from src/composables and src/store. unplugin-vue-components registers the components in src/components, and unplugin-icons turns names such as <IMdiGithub /> into icons from Iconify. The type declarations are generated into types/.

Chinese and Latin text share the code points of quotation marks, dashes and ellipses, so a Latin font in front draws them narrow and in Latin style. The font stack in src/styles/main.css puts a Punctuation Chinese face first. It covers only these marks and takes them from PingFang SC, Noto Sans CJK SC or Microsoft YaHei, while Latin text keeps the system UI font.

vite-plugin-pwa generates the web app manifest and a Workbox service worker that updates itself. After the first visit, a production build keeps working offline. The service worker is only registered in production builds.

netlify.toml sets the build command and Node 24 for Netlify. Vercel finds the Vite settings by itself. The router uses hash history, so the app needs no rewrite rules on any static host. For a container, see Docker production build.

Create a repository from this template, or copy it with degit:

npx degit kirklin/boot-vue my-app
cd my-app
pnpm i
pnpm dev

Each commit runs ESLint on the staged files and checks the message against Conventional Commits.

Add shadcn-vue components with the CLI the template installs, then format the new files in the project's style:

pnpm shadcn-vue add dialog
pnpm lint:fix

When a component builds on one you already have, such as dialog on button, the CLI asks before it overwrites your copy.

Build the image from the project root:

docker buildx build . -t boot-vue:latest

Run it and map a port with -p:

docker run --rm -it -p 8080:80 boot-vue:latest

The app is then served by nginx on http://localhost:8080.

For the editor, WebStorm works out of the box, and VS Code needs the Vue - Official extension.

If you have any questions or issues, please report them on GitHub Issues.

MIT License © 2023-PRESENT Kirk Lin