Updated for latest Vue, Quasar

README.md

@@ -4,10 +4,12 @@ This repo contains a starter template that connects the following pieces:
 
 - [Vue3](https://v3.vuejs.org/)
 - [Vite](https://vitejs.dev/)
-- [Pinia (de facto Vuex 5)](https://pinia.vuejs.org/)
-- [Vue Router 4](https://next.router.vuejs.org/guide/)
+- [Pinia](https://pinia.vuejs.org/)
+- [Vue Router](https://next.router.vuejs.org/guide/)
 - [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.
+
 This project has been configured with Material Design Icons for Quasar.  If you'd like to use a different configuration, [see the Quasar docs](https://quasar.dev/start/vite-plugin#using-quasar).
 
 ## Rationale
@@ -62,6 +64,11 @@ If you're not familiar with Quasar, it is one of ***the best*** and most complet
 - has fantastic, rich documentation and code examples
 - comes with pretty much everything one needs; I've rarely found myself having to pull in additional libraries when working with Quasar
 
-All of this means that you can build apps faster and with less friction.  I have built several apps now with Quasar ([CovidCureID](https://www.covidcureid.com/#/) is another public project of mine) and I find it incredibly productive.
+All of this means that you can build apps faster and with less friction.
 
-One key note is that the approach used in this project with Vite loses some of the power of Quasar as it does not take advantage of the Quasar CLI (one of the best parts of Quasar).  [The Quasar team is working on swapping WebPack for Vite](https://github.com/quasarframework/quasar/issues/11113).
+## 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.

web/README.md

@@ -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)

web/package.json

@@ -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"
   }
 }