Vue Starter

This is my personal take on a Vite + Vue 3 template. If you want to try it:

degit RazorSiM/vite-vue-ts-starter
pnpm install

Why?

I've been using Vue since forever and I find booring to always start a new project from scratch. This template is my starting point for every new project or proof of concept. It's minimalistic, with only Vue-Router, Pinia and Vueuse installed. The styling is handled by UnoCSS with sane defaults and presets added.

The only opinionated code you'll find in this template is how I handle the layouting system. It's very flexible and easy to use and modify for your needs.

On the DX side of the things, I've setup Eslint and Typescript to work out of the box with VSCode. I've also configured VScode to format and fix on save.

Tests are covered by Vitest and Cypress.

Continue reading to know what's included in this template!

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);
• Scaffolded an example on how you could implement a multi-layout approach

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;
• 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