Vue 3 Starter

This is a comprehensive Vite + Vue 3 template, deployed here. Follow the steps below to set it up locally:

npx degit RazorSiM/vue-starter
pnpm install

What's Included

This template is configured to work seamlessly with ESLint, TypeScript, and VSCode. Below is a detailed list of the included features and tools.

Features

• Vue 3: The progressive JavaScript framework.
• SSG build through the pnpm generate command, using vite-ssg.
• Vue Router: For handling routes.
• Pinia: State management library.
• VueUse: Collection of essential Vue Composition Utilities.
• UnoCSS: Fast and highly customizable utility-first CSS framework.
  • @unocss/reset: Tailwind settings for style resetting.
  • @unocss/preset-uno: Base preset.
  • @unocss/preset-icons: Use icons from Icones.
  • @unocss/preset-web-fonts: Easily set up web fonts.
  • @unocss/transformer-variant-group: Use the group variant (e.g., hover:(bg-blue-500 text-white font-bold)).
• Unhead: For SEO and page metadata.
• Multi-Layout Support: Example implementation of a multi-layout approach.
• Markdown Vue Components: Example implementation using unplugin-vue-markdown.
• Shikiji: Markdown syntax highlighting support.

Development Experience

• Vite: For development and production builds.
• TypeScript: Full support for .vue files.
• ESLint: Configured with antfu/eslint-config for linting and formatting.
• Lefthook: Easy git hooks.
• Unplugin Auto Import: Automatically import utilities in your files.
• Unplugin Vue Components: Automatically import Vue components.
• Unplugin Vue Markdown: Vue components in Markdown files.
• Unplugin Turbo Console: Turbo charge your console.
• VSCode Integration: Auto-fix and format on save with ESLint.

Testing

• Vitest: For unit testing.
• Playwright: For end-to-end testing.

Recommended IDE Setup

• VSCode: Recommended IDE.
• Vue - Official: Vue language support.

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 Playwright

pnpm run test:e2e

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

For CI environments, test the production build:

pnpm run build
pnpm run test:e2e

Lint, Fix, and Format with ESLint and @antfu/eslint-config settings

pnpm run lint # Check only
pnpm run lint:fix # Fix and format