Vue 3 Starter

This is my take on a Vite + Vue 3 template, deployed here. If you want to spin it locally:

degit RazorSiM/vue-starter
pnpm install

What's included

Here's a list of what's included in this template. Everything has been configured to work out of the box with Eslint, Typescript and VScode.

Features

• Vue3;
• Vue Router to handle routes;
• Pinia for state management;
• Vueuse for useful composition API utilities;
• UnoCSS for fast and super customizable styling configured with:
  • @unocss/reset with Tailwind settings;
  • @unocss/preset-uno as a base preset;
  • @unocss/preset-icons to use icons from Icones;
  • @unocss/preset-web-fonts so you can grab your web fonts and set them up easily;
  • @unocss/transformer-variant-group to use the group variant; ex: hover:(bg-blue-500 text-white font-bold);
• unhead for SEO and page metadata;
• Scaffolded an example of how you could implement a multi-layout approach;
• Scaffolded an example of how you could implement using markdown vue components with unplugin-vue-markdown;
• Support for Shikiji for markdown syntax highlighting;

Development Experience

• Vite for development and production builds;
• Typescript support for .vue files;
• Eslint with antfu/eslint-config for linting and formatting;
• Lefthook for ez git(gud) hooks;
• Unplugin Auto Import to automatically import stuff in your files; No more import { defineComponent } from 'vue';
• Unplugin Vue Components to automatically import components;
• Unplugin Vue Macros to extend Vue macros and syntax sugar;
• Changesets to manage changelogs and releases;
• Vscode will fix and format on save with Eslint;

Testing

• Vitest for unit testing;
• Cypress for e2e testing;

Recommended IDE Setup

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Type Support for .vue Imports in TS

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need TypeScript Vue Plugin (Volar) to make the TypeScript language service aware of .vue types.

If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a Take Over Mode that is more performant. You can enable it by the following steps:

1. Disable the built-in TypeScript Extension
   1. Run Extensions: Show Built-in Extensions from VSCode's command palette
   2. Find TypeScript and JavaScript Language Features, right click and select Disable (Workspace)
2. Reload the VSCode window by running Developer: Reload Window from the command palette.

Customize configuration

See Vite Configuration Reference.

Project Setup

pnpm install

Compile and Hot-Reload for Development

pnpm run dev

Type-Check, Compile and Minify for Production

pnpm run build

Run Unit Tests with Vitest

pnpm run test:unit

Run End-to-End Tests with Cypress

pnpm run test:e2e:dev

This runs the end-to-end tests against the Vite development server. It is much faster than the production build.

But it's still recommended to test the production build with test:e2e before deploying (e.g. in CI environments):

pnpm run build
pnpm run test:e2e

Lint, fix and format with ESLint and @antfu/eslint-config settings

pnpm run lint # will only check
pnpm run lint:fix # will fix and format