Skip to main content

Vue Wizard Template

This template provides a comprehensive setup for a modern Vue.js project, designed to get you up and running with a full-featured development environment and best practices out of the box.

Features​

  • Vue 3: Utilizes the latest Vue.js version with Composition API and <script setup> syntax.
  • Vite: A lightning-fast development server and build tool.
  • TypeScript: Full TypeScript integration for type safety.
  • Vue Router: For client-side routing.
  • Pinia: For state management.
  • ESLint & Prettier: For code linting and formatting.
  • Vitest: For unit testing.
  • GitHub Integration: Includes workflows for CI/CD, GitHub Pages deployment, and release drafting.
  • Dark/Light Mode: A built-in theme switcher.
  • Responsive UI: Comes with a preset responsive layout, including a navigation bar and footer.

Interactive Setup​

When you select the vue-wizard template, the CLI will guide you through an interactive setup process, allowing you to customize your project with the following options:

  • Public GitHub Repository: Choose whether to make your new repository public.
  • LICENSE File: Add a LICENSE file (MIT by default).
  • FUNDING.yml: Add a FUNDING.yml file to your GitHub repository.
  • docs/ Directory: Set up a docs/ directory for your project documentation.
  • GitHub Pages Workflow: Include a workflow to automatically deploy your project to GitHub Pages.

Available Scripts​

  • npm run dev: Starts the development server.
  • npm run build: Builds the app for production.
  • npm run preview: Previews the production build locally.
  • npm run test: Runs the unit tests.
  • npm run lint: Lints the code.
  • npm run format: Formats the code with Prettier.
  • npm run typecheck: Checks for TypeScript errors.
  • npm run version: Updates the project version.