feat: Add Pinia support

[yusufkandemir]

What kind of change does this PR introduce?

• Feature
• Documentation

Does this PR introduce a breaking change?

• No

The PR fulfills these requirements:

• It's submitted to the dev branch (or v[X] branch)
• Any necessary documentation has been added or updated in the docs or explained in the PR's description.

Other information:

TODO:

• SSR work
• Docs work

To test it locally:

1. Install the dependencies of each related package, and build them if applicable:

cd create-app
yarn

cd ../app-vite
yarn

cd ../app-webpack
yarn

cd ../ui
yarn
yarn build

2. Create apps by running the following:

./quasar/create-app/index.js # your local path might be different

Note: Linting with TS projects doesn't work OOTB, because create-app is WIP. So, you might want to not choose the linting feature. Alternatively, you can update .eslintrc.js's parserOptions section to this:

parserOptions: {
  parser: require.resolve('@typescript-eslint/parser'),
  extraFileExtensions: [ '.vue' ]
},

3. cd into the project you've created.

4. Update package.json of the created projects to use the local packages:

"quasar": "file:../../quasar/ui",

"@quasar/app-vite": "file:../quasar/app-vite",

"@quasar/app-webpack": "file:../../quasar/app-webpack",

5. Install the dependencies

yarn

6. (Optional) Modify src/pages/Index.vue to actually use the example store:

<template>
  <q-page class="row items-center justify-evenly">
    <div>
      {{ counter }} - {{ doubleCount }}
    </div>

    <div>
      <q-btn label="Increment" @click="store.increment" />
    </div>
  </q-page>
</template>

<script lang="ts" setup>
import { useCounterStore } from 'src/store/example';
import { storeToRefs } from 'pinia';

const store = useCounterStore();
const { counter, doubleCount } = storeToRefs(store);
</script>

7. Start the dev server:

yarn quasar dev # or just "quasar dev"

[rstoenescu]

PERFECT timing.

One thing to explore is the SSR state serialization/deserialization of the Pinia store. The equivalence of what we do for Vuex. The setup needs Quasar v2.6 in order for SSR to work (for both app-webpack and app-vite).

Wanna dig into this tomorrow or would u like me to do it?

[yusufkandemir]

I was actually going to continue with the SSR stuff and docs, as I noted them as TODO and marked the PR as draft. But, it seems like you've needed it just in time, so I will continue with them in separate PRs. I already somewhat know what the solution will be like, so I will continue working tomorrow.

[rstoenescu]

@yusufkandemir will push something for app-vite in quasar-config-file that you'll need tomorrow (#initialVersions.pinia/vuex) --> so that templates/entry/client and server can be handled differently for each store.

store.replaceStore for Vuex and Pinia's equivalent stuff

Sorry for talking briefly. On a hurry to release all the stuff.

PS: you're amazing! keep it going

[rstoenescu]

For SSR it is absolutely necessary to build the /ui package and use it. Both app-webpack and app-vite will break without it on SSR otherwise.

[rstoenescu]

Just saw the draft PR. Your approach actually doesn't require my stuff. Sniffing should work better than wasting time and resources checking for Vuex and Pinia installation.