Vue, Pinia, TailwindCSS, Vite
https://tailwindcss.com/docs/guides/vite
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx,vue}'],
https://vuejs.org/style-guide/
This template should help get you started developing with Vue 3 in Vite.
Pinia Store https://pinia.vuejs.org/core-concepts/#Option-Stores
Vue Rules https://eslint.vuejs.org/rules/multi-word-component-names.html
mapState (readonly) vs mapWritableState
getters - think of them as computed properties for your store; accessible in all components; only update if the state changes this can help with performance
Alias
...mapWritableState(useModalStore, {
isModelOpen:"isOpen"
})
- reduce num of reqs sent to the server.
VeeValidate or Vuelidate
https://vee-validate.logaretm.com/v4/
pnpm add vee-validate
create a dir includes
to organize plugin and non-plugins files
https://vuejs.org/guide/components/registration
We will validate more than one form so we can register it at the global level
login and registration forms
switch form
to vee-form
validation process:
- Use the Field component. (vee-field)
- Assign a name to the input.
- Add the rules.
- Handle the errors
pnpm add @vee-validate/rules
https://vee-validate.logaretm.com/v4/guide/global-validators#vee-validaterules
VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).
See Vite Configuration Reference.
pnpm install
pnpm dev
pnpm build
Run Unit Tests with Vitest
pnpm test:unit
Run End-to-End Tests with Cypress
pnpm test:e2e:dev
This runs the end-to-end tests against the Vite development server. It is much faster than the production build.
But it's still recommended to test the production build with test:e2e
before deploying (e.g. in CI environments):
pnpm build
pnpm test:e2e
Lint with ESLint
pnpm lint