Vue 3 with Vite project structure

Vue 3 with Vite project structure

Explorer

  • .huskynew
  • commit-msgnew
  • pre-commitnew
  • .vscode
  • extensions.json
  • launch.jsonnew
  • settings.json
  • coverage…new, not committed
  • dist…new, not committed
  • e2e
  • orders.spec.tsnew
  • tsconfig.json
  • vue.spec.ts
  • node_modules…, not committed
  • public
  • favicon.ico
  • robots.txtnew
  • src
  • App.vue
  • main.ts
  • .editorconfig
  • .env.examplenew
  • .env.localnew, not committed
  • .gitattributes
  • .gitignore
  • .lintstagedrc.jsonnew
  • .nvmrcnew
  • .oxlintrc.json
  • .prettierrc.json
  • AGENTS.mdnew
  • CLAUDE.mdnew
  • README.md
  • commitlint.config.tsnew
  • compose.yamlnew
  • env.d.ts
  • eslint.config.ts
  • index.html
  • package-lock.json
  • package.json
  • playwright.config.ts
  • tsconfig.app.json
  • tsconfig.json
  • tsconfig.node.json
  • tsconfig.vitest.json
  • vite.config.ts
  • vitest.config.ts
  1. # Create the project with TypeScript, Router, Pinia, Vitest, Playwright, ESLint and Prettier

    npm create vue@latest my-app -- --typescript --router --pinia --vitest --playwright --eslint --prettier
  2. # Install and start the dev server on localhost:5173

    cd my-app && npm install && npm run dev
  3. # Install the Playwright browsers

    npx playwright install
  4. # Add i18n, validation and API mocking

    npm install vue-i18n zod && npm install -D msw @pinia/testing @vitest/coverage-v8
  5. # Add commit hooks

    npm install -D husky lint-staged @commitlint/cli @commitlint/config-conventional && npx husky init