https://github.com/languagexange/vue-music
vue music app - WIP
https://github.com/languagexange/vue-music
pinia pnpm tailwindcss vite vue
Last synced: 3 months ago
JSON representation
vue music app - WIP
- Host: GitHub
- URL: https://github.com/languagexange/vue-music
- Owner: LanguageXange
- Created: 2024-03-05T07:55:13.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2024-03-11T07:52:25.000Z (about 1 year ago)
- Last Synced: 2025-01-08T18:13:04.670Z (5 months ago)
- Topics: pinia, pnpm, tailwindcss, vite, vue
- Language: Vue
- Homepage:
- Size: 250 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Stack
Vue, Pinia, TailwindCSS, Vite
# Links
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
## Notes
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"
})
```
### Form Validation
- 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
### Validation components
login and registration forms
switch `form` to `vee-form`
validation process:
1. Use the Field component. (vee-field)
2. Assign a name to the input.
3. Add the rules.
4. Handle the errors
### Defining Rules
`pnpm add @vee-validate/rules`
https://vee-validate.logaretm.com/v4/guide/global-validators#vee-validaterules
## Recommended IDE Setup
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
## Customize configuration
See [Vite Configuration Reference](https://vitejs.dev/config/).
## Project Setup
```sh
pnpm install
```
### Compile and Hot-Reload for Development
```sh
pnpm dev
```
### Compile and Minify for Production
```sh
pnpm build
```
### Run Unit Tests with [Vitest](https://vitest.dev/)
```sh
pnpm test:unit
```
### Run End-to-End Tests with [Cypress](https://www.cypress.io/)
```sh
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):
```sh
pnpm build
pnpm test:e2e
```
### Lint with [ESLint](https://eslint.org/)
```sh
pnpm lint
```