wdzeng / vue3-template

A vue3 project template with pnpm, Vite, Vue Router, Pinia, TypeScript, SCSS, Tailwindcss v3 and sweetalert2.

Vue 3 Template

• Demo

This is a template Vue 3 project, integrated with:

• Vite
• Pinia
• Vue Router
• TypeScript
• SCSS
• Tailwind CSS v3
• Sweetalert2
• Storybook
• Pnpm
• Prettier
• ESLint
• VS Code

Recommended IDE Setup

Use IDE VSCode for development.

TypeScript Setup

You must make VSCode to use Typescript which is installed on node_modules instead of a builtin one. Open command palette (ctrl + shift + p) and search for TypeScript: Select TypeScript Version... to update the settings.

Vue.js Development Setup

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

You must make VSCode to use Typescript which is installed on node_modules instead of a builtin one. Open command palette (ctrl + shift + p) and search for Volar: Select TypeScript Version... to update the settings.

Formatter and Linter Setup

Install VSCode extension ESLint and set it as default formatter for all .vue and .ts files in VSCode. Though Prettier is installed on pnpm i, you don't need to install or enable Prettier extension, since we are not using it with VSCode.

Development Backend

Project Setup

pnpm i

Compile and Hot-Reload for Development

pnpm dev

Type-Check, Compile and Minify for Production

pnpm build

Run Unit Tests with Vitest

pnpm test:unit

Lint with ESLint

pnpm lint

Development with Storybook

pnpm storybook