Vue Starter

December 13, 2022

3 min read


Arch Linux ~ > cat Vue Starter

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


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.


Development Experience


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