Added more notes

README.md

@@ -8,19 +8,49 @@ This repo contains a starter template that connects the following pieces:
 - [Vue Router 4](https://next.router.vuejs.org/guide/)
 - [Quasar](https://quasar.dev/)
 
+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
 
 This is inspired by [Evan You's presentation at VueConf Toronto](https://www.youtube.com/watch?v=2KBHvaAWJOA) on the future state of Vue development.
 
-Having worked in Vue and React, one thing that is clear is that the Vue community reflects the fact there is a bit more of what Fred Brookes terms "conceptual integrity" because of the nature of how the ecosystem is being designed and architected as a community with a clear direction and leadership.
+Having worked in Vue and React, one thing that is clear is that the Vue community reflects the fact there is a bit more of what Fred Brookes terms *"conceptual integrity"* because of the nature of how the ecosystem is being designed and architected as a community with a clear direction and leadership.
 
 In the Vue ecosystem, there are a clear set of "best practices" which are coalescing around key building blocks which simplifies the overall architecture and, in my opinion, enhances productivity.
 
+Whereas in the React world, one might have to choose between Redux or Mobx (or Jotai or Zustand or [Valtio](https://betterprogramming.pub/magical-experiments-in-react-state-with-valtio-2b40cf159120)) and live with the compromises of one or the other, I kind of appreciate the fact that Pinia simply got lifted up to Vuex 5 instead of forking and creating two different, fragmented practices for state management.  These core functions of building front-end applications should "just work".
+
 ## Usage
 
 ```
 cd web
+yarn
 yarn run dev
 ```
 
-See the [Vite template README](web/README.md) for more details and notes.
+See the [Vite template README](web/README.md) for more details and notes.
+
+## Organization
+
+The code has been organized under the `/web` directory (planning on adding example backends).
+
+Highlights are below:
+
+```
+/src/App.vue                        # Entry point
+/src/layouts/MainLayout.vue         # The outer chrome (left nav, top bar)
+/src/views/SampleView.vue           # Example of a view or page displayed in the layout
+/src/components/HelloWorld.vue      # Default component example with the Vite template
+/src/router/routes.ts               # Defines the routes
+/src/stores/appState.ts             # Sample application state store
+```
+
+The `HelloWorld.vue` shows an example of how to use the global application state store provided by Pinia.
+
+Of note with Pinia is that we get full intellisense 🎉 compared to Vuex.  If you need to, you can create multiple stores (see the Pinia docs for examples).
+
+Additionally, with [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) instead of Vetur, we finally get full intellisense in the templates as well!
+
+## Notes:
+
+This approach 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).

web/src/main.ts

@@ -5,7 +5,8 @@ import { createPinia } from 'pinia'
 import { Quasar } from 'quasar'
 import quasarIconSet from 'quasar/icon-set/mdi-v6'
 
-// Import icon libraries
+// Import icon libraries; you can choose different ones!
+// See: https://quasar.dev/start/vite-plugin#using-quasar
 import '@quasar/extras/roboto-font-latin-ext/roboto-font-latin-ext.css'
 import '@quasar/extras/mdi-v6/mdi-v6.css'
 
@@ -40,7 +41,10 @@ myApp.use(Quasar, {
     */
 })
 
+// Connect Pinia
 myApp.use(createPinia());
+
+// Connect Vue Router
 myApp.use(router);
 
 // Assumes you have a <div id="app"></div> in your index.html