Updated for latest Vue, Quasar
This commit is contained in:
@@ -2,10 +2,18 @@
|
||||
|
||||
This template should help get you started developing with Vue 3 and Typescript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
|
||||
|
||||
## Included Libraries
|
||||
|
||||
- [Quasar](https://quasar.dev/). Quasar is a powerful set of components which uses the Material UI design system. While the styles are quite plain on their own (and perhaps even off-putting), it is easy to customize it. I have used it extensively for my own projects like [Turas.app](https://turas.app), [Turas.app Chrome Extension](https://chromewebstore.google.com/detail/turasapp/lpfijfdbgohlblnadiokliolkkeeblpo), [Zeeq.ai](https://zeeq.ai), and [CodeRev.app](https://coderev.app). It is easy and fast; great for internal tooling and more than usable for public facing apps.
|
||||
- [Pinia]([https://](https://pinia.vuejs.org/introduction.html)). Pinia is state management for Vue. While it's not strictly necessary to use Pinia, it provides good integration with the devtools and hot module replacement for global state. It makes it easy to manage state that is truly global!
|
||||
|
||||
## More Reading
|
||||
|
||||
If you are just getting started with Vue, then check out:
|
||||
|
||||
- [A Conceptual Model of State in Vue 3.4](https://chrlschn.dev/blog/2024/01/a-conceptual-model-of-state-in-vue-34-using-definemodel/). A discussion on how Vue 3.4's release of `defineModel` changes the game for state management.
|
||||
- [Vue 3x3 - A Mental Model for Building Fast](https://chrlschn.dev/blog/2023/01/vue-3x3/). How to simplify your understanding of Vue to 9 core concepts.
|
||||
|
||||
## Recommended IDE Setup
|
||||
|
||||
- [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)
|
||||
|
||||
## Type Support For `.vue` Imports in TS
|
||||
|
||||
Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can enable Volar's `.vue` type support plugin by running `Volar: Switch TS Plugin on/off` from VSCode command palette.
|
||||
- [VSCode](https://code.visualstudio.com/) + [Vue Official](https://marketplace.visualstudio.com/items?itemName=Vue.volarr)
|
||||
|
||||
@@ -7,18 +7,18 @@
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@quasar/extras": "^1.12.3",
|
||||
"pinia": "^2.0.9",
|
||||
"quasar": "^2.4.10",
|
||||
"vue": "^3.2.25",
|
||||
"vue-router": "4"
|
||||
"@quasar/extras": "^1.16.12",
|
||||
"pinia": "^2.2.4",
|
||||
"quasar": "^2.17.0",
|
||||
"vue": "^3.5.12",
|
||||
"vue-router": "4.4.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@quasar/vite-plugin": "^1.0.4",
|
||||
"@vitejs/plugin-vue": "^2.0.0",
|
||||
"sass": "1.32.0",
|
||||
"typescript": "^4.4.4",
|
||||
"vite": "^2.7.2",
|
||||
"vue-tsc": "^0.29.8"
|
||||
"@quasar/vite-plugin": "^1.7.0",
|
||||
"@vitejs/plugin-vue": "^5.1.4",
|
||||
"sass": "1.33.0",
|
||||
"typescript": "^5.6.3",
|
||||
"vite": "^5.4.9",
|
||||
"vue-tsc": "^2.1.6"
|
||||
}
|
||||
}
|
||||
|
||||
1444
web/yarn.lock
1444
web/yarn.lock
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user