This template should help get you started developing with Vue 3 in Vite.
VSCode + Volar (and disable Vetur).
See Vite Configuration Reference.
npm install
npm run dev
npm run build
Run Unit Tests with Vitest
npm run test:unit
Run End-to-End Tests with Playwright
# Install browsers for the first run
npx playwright install
# When testing on CI, must build the project first
npm run build
# Runs the end-to-end tests
npm run test:e2e
# Runs the tests only on Chromium
npm run test:e2e -- --project=chromium
# Runs the tests of a specific file
npm run test:e2e -- tests/example.spec.ts
# Runs the tests in debug mode
npm run test:e2e -- --debug
Lint with ESLint
npm run lint
Project setup:
npm create vue@latest
Selected options:
- Router
- Pinia
- Vitest
- End-to-End Testing
- ESLint
- Prettier
Extensions:
- Debugger for Firefox
- Azure Static Web Apps
- ESLint
- Playwright Tewst for VSCode
- Prettier
- Pug Beautify
- Vite
- Vitest
- Vue - Offical
- Vue Extension Box
- Vue Peek
Setup and config:
npm install --save pug
Add the following to the eslint.config.json
:
{
"extends": ["plugin:vue/vue3-recommended", "plugin:vue-pug/vue3-recommended"]
}
Finally, we have a local and updated build of the eslint-plugin-vue-pug
which we:
# go to the plugin project
cd ~/src/eslint-plugin-vue-pug
# create global link
npm link
# go tho this project
cd ~/src/vue-yak-stak
# import the link
npm link eslint-plugin-vue-pug
- Configure and run the workflows
- Add routes
- Authentication
- Authorization
- Roles
- anonymous
- authenticated (guest)
- administrator
- premium
- Roles