From aeb1f42716e292752fc18dd6c80fb3136f69bb7b Mon Sep 17 00:00:00 2001
From: Yusuf Kandemir <yusuf.kandemir@outlook.com.tr>
Date: Tue, 8 Mar 2022 19:25:11 +0300
Subject: [PATCH 1/4] feat(app-webpack): Add Pinia support

---
 app-vite/lib/helpers/types-feature-flags.js   |  2 +-
 app-webpack/bin/quasar-info                   |  1 +
 app-webpack/bin/quasar-new                    | 20 +++++++++++++++++--
 .../lib/helpers/types-feature-flags.js        |  2 +-
 app-webpack/lib/quasar-conf-file.js           |  2 +-
 app-webpack/lib/webpack/create-chain.js       |  2 +-
 app-webpack/package.json                      |  1 +
 .../app/default/store/pinia/index.js          | 15 ++++++++++++++
 .../app/default/store/{ => vuex}/actions.js   |  0
 .../app/default/store/{ => vuex}/getters.js   |  0
 .../app/default/store/{ => vuex}/index.js     |  0
 .../app/default/store/{ => vuex}/mutations.js |  0
 .../app/default/store/{ => vuex}/state.js     |  0
 .../templates/app/ts/store/pinia/index.ts     | 15 ++++++++++++++
 .../app/ts/store/{ => vuex}/actions.ts        |  0
 .../app/ts/store/{ => vuex}/getters.ts        |  0
 .../app/ts/store/{ => vuex}/index.ts          |  0
 .../app/ts/store/{ => vuex}/mutations.ts      |  0
 .../app/ts/store/{ => vuex}/state.ts          |  0
 app-webpack/templates/entry/app.js            |  2 +-
 .../templates/store/pinia/default/index.js    | 20 +++++++++++++++++++
 app-webpack/templates/store/pinia/ts/index.ts | 20 +++++++++++++++++++
 .../store/{default => }/store-flag.d.ts       |  0
 .../templates/store/ts/store-flag.d.ts        | 10 ----------
 .../store/{ => vuex}/default/index.js         |  0
 .../templates/store/{ => vuex}/ts/index.ts    |  2 +-
 app-webpack/types/store.d.ts                  | 11 +++++++---
 27 files changed, 104 insertions(+), 21 deletions(-)
 create mode 100644 app-webpack/templates/app/default/store/pinia/index.js
 rename app-webpack/templates/app/default/store/{ => vuex}/actions.js (100%)
 rename app-webpack/templates/app/default/store/{ => vuex}/getters.js (100%)
 rename app-webpack/templates/app/default/store/{ => vuex}/index.js (100%)
 rename app-webpack/templates/app/default/store/{ => vuex}/mutations.js (100%)
 rename app-webpack/templates/app/default/store/{ => vuex}/state.js (100%)
 create mode 100644 app-webpack/templates/app/ts/store/pinia/index.ts
 rename app-webpack/templates/app/ts/store/{ => vuex}/actions.ts (100%)
 rename app-webpack/templates/app/ts/store/{ => vuex}/getters.ts (100%)
 rename app-webpack/templates/app/ts/store/{ => vuex}/index.ts (100%)
 rename app-webpack/templates/app/ts/store/{ => vuex}/mutations.ts (100%)
 rename app-webpack/templates/app/ts/store/{ => vuex}/state.ts (100%)
 create mode 100644 app-webpack/templates/store/pinia/default/index.js
 create mode 100644 app-webpack/templates/store/pinia/ts/index.ts
 rename app-webpack/templates/store/{default => }/store-flag.d.ts (100%)
 delete mode 100644 app-webpack/templates/store/ts/store-flag.d.ts
 rename app-webpack/templates/store/{ => vuex}/default/index.js (100%)
 rename app-webpack/templates/store/{ => vuex}/ts/index.ts (99%)

diff --git a/app-vite/lib/helpers/types-feature-flags.js b/app-vite/lib/helpers/types-feature-flags.js
index f29c3189ed4..160252bba2b 100644
--- a/app-vite/lib/helpers/types-feature-flags.js
+++ b/app-vite/lib/helpers/types-feature-flags.js
@@ -32,7 +32,7 @@ module.exports = function regenerateTypesFeatureFlags(quasarConf) {
     const [isFeatureInstalled, sourceFlagPath, destFlagPath] = feature === 'store'
       ? [
         quasarConf.store,
-        appPaths.resolve.cli('templates/store/ts/store-flag.d.ts'),
+        appPaths.resolve.cli('templates/store/store-flag.d.ts'),
         appPaths.resolve.app(getStoreFlagPath(quasarConf.sourceFiles.store))
       ]
       : [
diff --git a/app-webpack/bin/quasar-info b/app-webpack/bin/quasar-info
index 2f079af09ed..ddce493025a 100755
--- a/app-webpack/bin/quasar-info
+++ b/app-webpack/bin/quasar-info
@@ -82,6 +82,7 @@ print({ key: 'Important local packages', section: true })
   'eslint-plugin-quasar',
   'vue',
   'vue-router',
+  'pinia',
   'vuex',
   'electron',
   'electron-packager',
diff --git a/app-webpack/bin/quasar-new b/app-webpack/bin/quasar-new
index e04d2e62c8b..255d81ed1af 100755
--- a/app-webpack/bin/quasar-new
+++ b/app-webpack/bin/quasar-new
@@ -64,6 +64,7 @@ const fse = require('fs-extra')
 
 const { log, warn } = require('../lib/helpers/logger')
 const appPaths = require('../lib/app-paths')
+const getPackageJson = require('../lib/helpers/get-package-json')
 const defaultFilePath = 'default'
 
 if (argv._.length < 2) {
@@ -114,6 +115,8 @@ if (type.length === 1) {
   type = fullCmd[type]
 }
 
+const storeProvider = getPackageJson('vuex') !== void 0 ? 'vuex' : 'pinia'
+
 function getPaths (asset, names) {
   return names.map(name => {
     const hasExtension = !asset.ext || (asset.ext && name.endsWith(asset.ext))
@@ -133,8 +136,16 @@ function createFile (asset, file) {
   }
 
   fse.mkdirp(path.dirname(file))
+  let templatePath = path.join('templates/app', format)
+
+  if (type === 'store') {
+    templatePath = path.join(templatePath, 'store', storeProvider)
+  } else {
+    templatePath = path.join(templatePath, type + (asset.ext || ''))
+  }
+
   fse.copy(
-    appPaths.resolve.cli(path.join('templates/app', format, type + (asset.ext || ''))),
+    appPaths.resolve.cli(templatePath),
     file,
     err => {
       if (err) {
@@ -198,10 +209,15 @@ const filesToCreate = getPaths(asset, names)
 if (asset.install) {
   const folder = appPaths.resolve.app(asset.folder)
 
+  if (getPackageJson(storeProvider) === void 0) {
+    // TODO: Automatically install the package for the user
+    warn(`Don't forget to install "${storeProvider}" package.`)
+  }
+
   if (!fs.existsSync(folder)) {
     fse.mkdirp(folder)
     fse.copy(
-      appPaths.resolve.cli(`templates/store/${format}`),
+      appPaths.resolve.cli(`templates/store/${storeProvider}/${format}`),
       folder,
       err => {
         if (err) {
diff --git a/app-webpack/lib/helpers/types-feature-flags.js b/app-webpack/lib/helpers/types-feature-flags.js
index c4f8fc77d5b..2b41b8529fa 100644
--- a/app-webpack/lib/helpers/types-feature-flags.js
+++ b/app-webpack/lib/helpers/types-feature-flags.js
@@ -28,7 +28,7 @@ module.exports = function regenerateTypesFeatureFlags(quasarConf) {
     const [isFeatureInstalled, sourceFlagPath, destFlagPath] = feature === 'store'
       ? [
         quasarConf.store,
-        appPaths.resolve.cli('templates/store/ts/store-flag.d.ts'),
+        appPaths.resolve.cli('templates/store/store-flag.d.ts'),
         appPaths.resolve.app(getStoreFlagPath(quasarConf.sourceFiles.store))
       ]
       : [
diff --git a/app-webpack/lib/quasar-conf-file.js b/app-webpack/lib/quasar-conf-file.js
index 6ab41baea45..268e2cabc59 100644
--- a/app-webpack/lib/quasar-conf-file.js
+++ b/app-webpack/lib/quasar-conf-file.js
@@ -530,7 +530,7 @@ class QuasarConfFile {
 
     appFilesValidations(cfg)
 
-    // do we got vuex?
+    // do we have a store?
     const storePath = appPaths.resolve.app(cfg.sourceFiles.store)
     cfg.store = (
       fs.existsSync(storePath) ||
diff --git a/app-webpack/lib/webpack/create-chain.js b/app-webpack/lib/webpack/create-chain.js
index 5e5f970be1c..664dc378431 100644
--- a/app-webpack/lib/webpack/create-chain.js
+++ b/app-webpack/lib/webpack/create-chain.js
@@ -110,7 +110,7 @@ module.exports = function (cfg, configName) {
     .merge(resolveModules)
 
   chain.module.noParse(
-    /^(vue|vue-router|vuex|vuex-router-sync|@quasar[\\/]extras|quasar[\\/]dist)$/
+    /^(vue|vue-router|pinia|vuex|vuex-router-sync|@quasar[\\/]extras|quasar[\\/]dist)$/
   )
 
   const vueRule = chain.module.rule('vue')
diff --git a/app-webpack/package.json b/app-webpack/package.json
index 2e41ea0dd30..fb8fffc4193 100644
--- a/app-webpack/package.json
+++ b/app-webpack/package.json
@@ -111,6 +111,7 @@
   "devDependencies": {
     "electron-builder": "22.14.13",
     "electron-packager": "^15.3.0",
+    "pinia": "^2.0.0",
     "quasar": "^2.0.4",
     "ts-essentials": "^9.1.2",
     "vue": "^3.0.0",
diff --git a/app-webpack/templates/app/default/store/pinia/index.js b/app-webpack/templates/app/default/store/pinia/index.js
new file mode 100644
index 00000000000..83e83903916
--- /dev/null
+++ b/app-webpack/templates/app/default/store/pinia/index.js
@@ -0,0 +1,15 @@
+import { defineStore } from 'pinia';
+
+export const useCounterStore = defineStore('counter', {
+  state: () => ({
+    counter: 0,
+  }),
+  getters: {
+    doubleCount: (state) => state.counter * 2,
+  },
+  actions: {
+    increment() {
+      this.counter++;
+    },
+  },
+});
diff --git a/app-webpack/templates/app/default/store/actions.js b/app-webpack/templates/app/default/store/vuex/actions.js
similarity index 100%
rename from app-webpack/templates/app/default/store/actions.js
rename to app-webpack/templates/app/default/store/vuex/actions.js
diff --git a/app-webpack/templates/app/default/store/getters.js b/app-webpack/templates/app/default/store/vuex/getters.js
similarity index 100%
rename from app-webpack/templates/app/default/store/getters.js
rename to app-webpack/templates/app/default/store/vuex/getters.js
diff --git a/app-webpack/templates/app/default/store/index.js b/app-webpack/templates/app/default/store/vuex/index.js
similarity index 100%
rename from app-webpack/templates/app/default/store/index.js
rename to app-webpack/templates/app/default/store/vuex/index.js
diff --git a/app-webpack/templates/app/default/store/mutations.js b/app-webpack/templates/app/default/store/vuex/mutations.js
similarity index 100%
rename from app-webpack/templates/app/default/store/mutations.js
rename to app-webpack/templates/app/default/store/vuex/mutations.js
diff --git a/app-webpack/templates/app/default/store/state.js b/app-webpack/templates/app/default/store/vuex/state.js
similarity index 100%
rename from app-webpack/templates/app/default/store/state.js
rename to app-webpack/templates/app/default/store/vuex/state.js
diff --git a/app-webpack/templates/app/ts/store/pinia/index.ts b/app-webpack/templates/app/ts/store/pinia/index.ts
new file mode 100644
index 00000000000..83e83903916
--- /dev/null
+++ b/app-webpack/templates/app/ts/store/pinia/index.ts
@@ -0,0 +1,15 @@
+import { defineStore } from 'pinia';
+
+export const useCounterStore = defineStore('counter', {
+  state: () => ({
+    counter: 0,
+  }),
+  getters: {
+    doubleCount: (state) => state.counter * 2,
+  },
+  actions: {
+    increment() {
+      this.counter++;
+    },
+  },
+});
diff --git a/app-webpack/templates/app/ts/store/actions.ts b/app-webpack/templates/app/ts/store/vuex/actions.ts
similarity index 100%
rename from app-webpack/templates/app/ts/store/actions.ts
rename to app-webpack/templates/app/ts/store/vuex/actions.ts
diff --git a/app-webpack/templates/app/ts/store/getters.ts b/app-webpack/templates/app/ts/store/vuex/getters.ts
similarity index 100%
rename from app-webpack/templates/app/ts/store/getters.ts
rename to app-webpack/templates/app/ts/store/vuex/getters.ts
diff --git a/app-webpack/templates/app/ts/store/index.ts b/app-webpack/templates/app/ts/store/vuex/index.ts
similarity index 100%
rename from app-webpack/templates/app/ts/store/index.ts
rename to app-webpack/templates/app/ts/store/vuex/index.ts
diff --git a/app-webpack/templates/app/ts/store/mutations.ts b/app-webpack/templates/app/ts/store/vuex/mutations.ts
similarity index 100%
rename from app-webpack/templates/app/ts/store/mutations.ts
rename to app-webpack/templates/app/ts/store/vuex/mutations.ts
diff --git a/app-webpack/templates/app/ts/store/state.ts b/app-webpack/templates/app/ts/store/vuex/state.ts
similarity index 100%
rename from app-webpack/templates/app/ts/store/state.ts
rename to app-webpack/templates/app/ts/store/vuex/state.ts
diff --git a/app-webpack/templates/entry/app.js b/app-webpack/templates/entry/app.js
index a7e2ef8b27d..5f9bb3ad532 100644
--- a/app-webpack/templates/entry/app.js
+++ b/app-webpack/templates/entry/app.js
@@ -70,7 +70,7 @@ export default async function (createAppFn, quasarUserOptions<%= ctx.mode.ssr ?
     ? await createStore({<%= ctx.mode.ssr ? 'ssrContext' : '' %>})
     : createStore
 
-  // obtain Vuex injection key in case we use TypeScript
+  // obtain Vuex injection key in case we use TypeScript, not used for Pinia
   const { storeKey } = await import('app/<%= sourceFiles.store %>');
   <% } %>
   const router = typeof createRouter === 'function'
diff --git a/app-webpack/templates/store/pinia/default/index.js b/app-webpack/templates/store/pinia/default/index.js
new file mode 100644
index 00000000000..ca5bee55170
--- /dev/null
+++ b/app-webpack/templates/store/pinia/default/index.js
@@ -0,0 +1,20 @@
+import { store } from 'quasar/wrappers'
+import { createPinia } from 'pinia'
+
+/*
+ * If not building with SSR mode, you can
+ * directly export the Store instantiation;
+ *
+ * The function below can be async too; either use
+ * async/await or return a Promise which resolves
+ * with the Store instance.
+ */
+
+export default store((/* { ssrContext } */) => {
+  const pinia = createPinia()
+
+  // You can add Pinia plugins here
+  // pinia.use(SomePiniaPlugin)
+
+  return pinia
+})
diff --git a/app-webpack/templates/store/pinia/ts/index.ts b/app-webpack/templates/store/pinia/ts/index.ts
new file mode 100644
index 00000000000..ca5bee55170
--- /dev/null
+++ b/app-webpack/templates/store/pinia/ts/index.ts
@@ -0,0 +1,20 @@
+import { store } from 'quasar/wrappers'
+import { createPinia } from 'pinia'
+
+/*
+ * If not building with SSR mode, you can
+ * directly export the Store instantiation;
+ *
+ * The function below can be async too; either use
+ * async/await or return a Promise which resolves
+ * with the Store instance.
+ */
+
+export default store((/* { ssrContext } */) => {
+  const pinia = createPinia()
+
+  // You can add Pinia plugins here
+  // pinia.use(SomePiniaPlugin)
+
+  return pinia
+})
diff --git a/app-webpack/templates/store/default/store-flag.d.ts b/app-webpack/templates/store/store-flag.d.ts
similarity index 100%
rename from app-webpack/templates/store/default/store-flag.d.ts
rename to app-webpack/templates/store/store-flag.d.ts
diff --git a/app-webpack/templates/store/ts/store-flag.d.ts b/app-webpack/templates/store/ts/store-flag.d.ts
deleted file mode 100644
index 7677175b003..00000000000
--- a/app-webpack/templates/store/ts/store-flag.d.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-/* eslint-disable */
-// THIS FEATURE-FLAG FILE IS AUTOGENERATED,
-//  REMOVAL OR CHANGES WILL CAUSE RELATED TYPES TO STOP WORKING
-import "quasar/dist/types/feature-flag";
-
-declare module "quasar/dist/types/feature-flag" {
-  interface QuasarFeatureFlags {
-    store: true;
-  }
-}
diff --git a/app-webpack/templates/store/default/index.js b/app-webpack/templates/store/vuex/default/index.js
similarity index 100%
rename from app-webpack/templates/store/default/index.js
rename to app-webpack/templates/store/vuex/default/index.js
diff --git a/app-webpack/templates/store/ts/index.ts b/app-webpack/templates/store/vuex/ts/index.ts
similarity index 99%
rename from app-webpack/templates/store/ts/index.ts
rename to app-webpack/templates/store/vuex/ts/index.ts
index 2bae8e4ff73..0f9bb9e5e74 100644
--- a/app-webpack/templates/store/ts/index.ts
+++ b/app-webpack/templates/store/vuex/ts/index.ts
@@ -51,4 +51,4 @@ export default store(function (/* { ssrContext } */) {
 
 export function useStore() {
   return vuexUseStore(storeKey)
-}
\ No newline at end of file
+}
diff --git a/app-webpack/types/store.d.ts b/app-webpack/types/store.d.ts
index a536dc7d372..0561add819e 100644
--- a/app-webpack/types/store.d.ts
+++ b/app-webpack/types/store.d.ts
@@ -1,16 +1,21 @@
 import { HasStore } from "quasar";
+import { Pinia } from "pinia";
 import { Store } from "vuex";
 import { HasSsrParam } from "./ssr";
 
+// If Pinia is installed, its type will be resolved, thus it will be used.
+// Otherwise, if Vuex is installed, it will be used. If nothing is installed, 'any' will be used.
+type StoreInstance<S = any> = unknown extends Pinia ? Store<S> : Pinia;
+
 export type HasStoreParam<S = any> = HasStore<{
   /**
-   * The state of the Vuex store, gets filled in by Vuex itself
+   * The store instance.
    */
-  store: Store<S>;
+  store: StoreInstance<S>;
 }>;
 
 export type StoreParams = {} & HasSsrParam;
 
 export type StoreCallback = (
   params: StoreParams
-) => Store<any> | Promise<Store<any>>;
+) => StoreInstance | Promise<StoreInstance>;

From 2e15f786f6ab2d807df05ffc848b44cf4809ae0d Mon Sep 17 00:00:00 2001
From: Yusuf Kandemir <yusuf.kandemir@outlook.com.tr>
Date: Tue, 8 Mar 2022 20:26:24 +0300
Subject: [PATCH 2/4] feat(app-vite): Add Pinia support

---
 app-vite/bin/quasar-info                      |  1 +
 app-vite/bin/quasar-new                       | 20 +++++++++++++++++--
 app-vite/lib/quasar-config-file.js            |  2 +-
 app-vite/package.json                         |  1 +
 .../app/default/store/pinia/index.js          | 15 ++++++++++++++
 .../app/default/store/{ => vuex}/actions.js   |  0
 .../app/default/store/{ => vuex}/getters.js   |  0
 .../app/default/store/{ => vuex}/index.js     |  0
 .../app/default/store/{ => vuex}/mutations.js |  0
 .../app/default/store/{ => vuex}/state.js     |  0
 .../templates/app/ts/store/pinia/index.ts     | 15 ++++++++++++++
 .../app/ts/store/{ => vuex}/actions.ts        |  0
 .../app/ts/store/{ => vuex}/getters.ts        |  0
 .../app/ts/store/{ => vuex}/index.ts          |  0
 .../app/ts/store/{ => vuex}/mutations.ts      |  0
 .../app/ts/store/{ => vuex}/state.ts          |  0
 app-vite/templates/entry/app.js               |  2 +-
 .../templates/store/pinia/default/index.js    | 20 +++++++++++++++++++
 app-vite/templates/store/pinia/ts/index.ts    | 20 +++++++++++++++++++
 .../store/{default => }/store-flag.d.ts       |  0
 app-vite/templates/store/ts/store-flag.d.ts   | 10 ----------
 .../store/{ => vuex}/default/index.js         |  0
 .../templates/store/{ => vuex}/ts/index.ts    |  2 +-
 app-vite/types/store.d.ts                     | 11 +++++++---
 24 files changed, 101 insertions(+), 18 deletions(-)
 create mode 100644 app-vite/templates/app/default/store/pinia/index.js
 rename app-vite/templates/app/default/store/{ => vuex}/actions.js (100%)
 rename app-vite/templates/app/default/store/{ => vuex}/getters.js (100%)
 rename app-vite/templates/app/default/store/{ => vuex}/index.js (100%)
 rename app-vite/templates/app/default/store/{ => vuex}/mutations.js (100%)
 rename app-vite/templates/app/default/store/{ => vuex}/state.js (100%)
 create mode 100644 app-vite/templates/app/ts/store/pinia/index.ts
 rename app-vite/templates/app/ts/store/{ => vuex}/actions.ts (100%)
 rename app-vite/templates/app/ts/store/{ => vuex}/getters.ts (100%)
 rename app-vite/templates/app/ts/store/{ => vuex}/index.ts (100%)
 rename app-vite/templates/app/ts/store/{ => vuex}/mutations.ts (100%)
 rename app-vite/templates/app/ts/store/{ => vuex}/state.ts (100%)
 create mode 100644 app-vite/templates/store/pinia/default/index.js
 create mode 100644 app-vite/templates/store/pinia/ts/index.ts
 rename app-vite/templates/store/{default => }/store-flag.d.ts (100%)
 delete mode 100644 app-vite/templates/store/ts/store-flag.d.ts
 rename app-vite/templates/store/{ => vuex}/default/index.js (100%)
 rename app-vite/templates/store/{ => vuex}/ts/index.ts (99%)

diff --git a/app-vite/bin/quasar-info b/app-vite/bin/quasar-info
index 50cbf1139ce..f41ea14a198 100755
--- a/app-vite/bin/quasar-info
+++ b/app-vite/bin/quasar-info
@@ -82,6 +82,7 @@ print({ key: 'Important local packages', section: true })
   'eslint-plugin-quasar',
   'vue',
   'vue-router',
+  'pinia',
   'vuex',
   'vite',
   'eslint',
diff --git a/app-vite/bin/quasar-new b/app-vite/bin/quasar-new
index e2e6e3f774f..203a120fb78 100755
--- a/app-vite/bin/quasar-new
+++ b/app-vite/bin/quasar-new
@@ -64,6 +64,7 @@ const fse = require('fs-extra')
 
 const { log, warn } = require('../lib/helpers/logger')
 const appPaths = require('../lib/app-paths')
+const getPackageJson = require('../lib/helpers/get-package-json')
 const defaultFilePath = 'default'
 
 if (argv._.length < 2) {
@@ -114,6 +115,8 @@ if (type.length === 1) {
   type = fullCmd[type]
 }
 
+const storeProvider = getPackageJson('vuex') !== void 0 ? 'vuex' : 'pinia'
+
 function getPaths (asset, names) {
   return names.map(name => {
     const hasExtension = !asset.ext || (asset.ext && name.endsWith(asset.ext))
@@ -133,8 +136,16 @@ function createFile (asset, file) {
   }
 
   fse.mkdirp(path.dirname(file))
+  let templatePath = path.join('templates/app', format)
+
+  if (type === 'store') {
+    templatePath = path.join(templatePath, 'store', storeProvider)
+  } else {
+    templatePath = path.join(templatePath, type + (asset.ext || ''))
+  }
+
   fse.copy(
-    appPaths.resolve.cli(path.join('templates/app', format, type + (asset.ext || ''))),
+    appPaths.resolve.cli(templatePath),
     file,
     err => {
       if (err) {
@@ -198,10 +209,15 @@ const filesToCreate = getPaths(asset, names)
 if (asset.install) {
   const folder = appPaths.resolve.app(asset.folder)
 
+  if (getPackageJson(storeProvider) === void 0) {
+    // TODO: Automatically install the package for the user
+    warn(`Don't forget to install "${storeProvider}" package.`)
+  }
+
   if (!fs.existsSync(folder)) {
     fse.mkdirp(folder)
     fse.copy(
-      appPaths.resolve.cli(`templates/store/${format}`),
+      appPaths.resolve.cli(`templates/store/${storeProvider}/${format}`),
       folder,
       err => {
         if (err) {
diff --git a/app-vite/lib/quasar-config-file.js b/app-vite/lib/quasar-config-file.js
index 2dd5e11a3fb..b5b2695d001 100644
--- a/app-vite/lib/quasar-config-file.js
+++ b/app-vite/lib/quasar-config-file.js
@@ -500,7 +500,7 @@ class QuasarConfFile {
       return { error: 'Files validation not passed successfully' }
     }
 
-    // do we have vuex?
+    // do we have a store?
     const storePath = appPaths.resolve.app(cfg.sourceFiles.store)
     cfg.store = resolveExtension(storePath) !== void 0
 
diff --git a/app-vite/package.json b/app-vite/package.json
index 743d8b554e0..f647370a639 100644
--- a/app-vite/package.json
+++ b/app-vite/package.json
@@ -82,6 +82,7 @@
   "devDependencies": {
     "electron-builder": "22.14.13",
     "electron-packager": "^15.3.0",
+    "pinia": "^2.0.0",
     "quasar": "^2.0.4",
     "ts-essentials": "^9.1.2",
     "vue": "^3.0.0",
diff --git a/app-vite/templates/app/default/store/pinia/index.js b/app-vite/templates/app/default/store/pinia/index.js
new file mode 100644
index 00000000000..83e83903916
--- /dev/null
+++ b/app-vite/templates/app/default/store/pinia/index.js
@@ -0,0 +1,15 @@
+import { defineStore } from 'pinia';
+
+export const useCounterStore = defineStore('counter', {
+  state: () => ({
+    counter: 0,
+  }),
+  getters: {
+    doubleCount: (state) => state.counter * 2,
+  },
+  actions: {
+    increment() {
+      this.counter++;
+    },
+  },
+});
diff --git a/app-vite/templates/app/default/store/actions.js b/app-vite/templates/app/default/store/vuex/actions.js
similarity index 100%
rename from app-vite/templates/app/default/store/actions.js
rename to app-vite/templates/app/default/store/vuex/actions.js
diff --git a/app-vite/templates/app/default/store/getters.js b/app-vite/templates/app/default/store/vuex/getters.js
similarity index 100%
rename from app-vite/templates/app/default/store/getters.js
rename to app-vite/templates/app/default/store/vuex/getters.js
diff --git a/app-vite/templates/app/default/store/index.js b/app-vite/templates/app/default/store/vuex/index.js
similarity index 100%
rename from app-vite/templates/app/default/store/index.js
rename to app-vite/templates/app/default/store/vuex/index.js
diff --git a/app-vite/templates/app/default/store/mutations.js b/app-vite/templates/app/default/store/vuex/mutations.js
similarity index 100%
rename from app-vite/templates/app/default/store/mutations.js
rename to app-vite/templates/app/default/store/vuex/mutations.js
diff --git a/app-vite/templates/app/default/store/state.js b/app-vite/templates/app/default/store/vuex/state.js
similarity index 100%
rename from app-vite/templates/app/default/store/state.js
rename to app-vite/templates/app/default/store/vuex/state.js
diff --git a/app-vite/templates/app/ts/store/pinia/index.ts b/app-vite/templates/app/ts/store/pinia/index.ts
new file mode 100644
index 00000000000..83e83903916
--- /dev/null
+++ b/app-vite/templates/app/ts/store/pinia/index.ts
@@ -0,0 +1,15 @@
+import { defineStore } from 'pinia';
+
+export const useCounterStore = defineStore('counter', {
+  state: () => ({
+    counter: 0,
+  }),
+  getters: {
+    doubleCount: (state) => state.counter * 2,
+  },
+  actions: {
+    increment() {
+      this.counter++;
+    },
+  },
+});
diff --git a/app-vite/templates/app/ts/store/actions.ts b/app-vite/templates/app/ts/store/vuex/actions.ts
similarity index 100%
rename from app-vite/templates/app/ts/store/actions.ts
rename to app-vite/templates/app/ts/store/vuex/actions.ts
diff --git a/app-vite/templates/app/ts/store/getters.ts b/app-vite/templates/app/ts/store/vuex/getters.ts
similarity index 100%
rename from app-vite/templates/app/ts/store/getters.ts
rename to app-vite/templates/app/ts/store/vuex/getters.ts
diff --git a/app-vite/templates/app/ts/store/index.ts b/app-vite/templates/app/ts/store/vuex/index.ts
similarity index 100%
rename from app-vite/templates/app/ts/store/index.ts
rename to app-vite/templates/app/ts/store/vuex/index.ts
diff --git a/app-vite/templates/app/ts/store/mutations.ts b/app-vite/templates/app/ts/store/vuex/mutations.ts
similarity index 100%
rename from app-vite/templates/app/ts/store/mutations.ts
rename to app-vite/templates/app/ts/store/vuex/mutations.ts
diff --git a/app-vite/templates/app/ts/store/state.ts b/app-vite/templates/app/ts/store/vuex/state.ts
similarity index 100%
rename from app-vite/templates/app/ts/store/state.ts
rename to app-vite/templates/app/ts/store/vuex/state.ts
diff --git a/app-vite/templates/entry/app.js b/app-vite/templates/entry/app.js
index ac49770fe2c..dcc60a7f8bc 100644
--- a/app-vite/templates/entry/app.js
+++ b/app-vite/templates/entry/app.js
@@ -71,7 +71,7 @@ export default async function (createAppFn, quasarUserOptions<%= ctx.mode.ssr ?
     ? await createStore({<%= ctx.mode.ssr ? 'ssrContext' : '' %>})
     : createStore
 
-  // obtain Vuex injection key in case we use TypeScript
+  // obtain Vuex injection key in case we use TypeScript, not used for Pinia
   const { storeKey } = await import('app/<%= sourceFiles.store %>');
   <% } %>
   const router = typeof createRouter === 'function'
diff --git a/app-vite/templates/store/pinia/default/index.js b/app-vite/templates/store/pinia/default/index.js
new file mode 100644
index 00000000000..ca5bee55170
--- /dev/null
+++ b/app-vite/templates/store/pinia/default/index.js
@@ -0,0 +1,20 @@
+import { store } from 'quasar/wrappers'
+import { createPinia } from 'pinia'
+
+/*
+ * If not building with SSR mode, you can
+ * directly export the Store instantiation;
+ *
+ * The function below can be async too; either use
+ * async/await or return a Promise which resolves
+ * with the Store instance.
+ */
+
+export default store((/* { ssrContext } */) => {
+  const pinia = createPinia()
+
+  // You can add Pinia plugins here
+  // pinia.use(SomePiniaPlugin)
+
+  return pinia
+})
diff --git a/app-vite/templates/store/pinia/ts/index.ts b/app-vite/templates/store/pinia/ts/index.ts
new file mode 100644
index 00000000000..ca5bee55170
--- /dev/null
+++ b/app-vite/templates/store/pinia/ts/index.ts
@@ -0,0 +1,20 @@
+import { store } from 'quasar/wrappers'
+import { createPinia } from 'pinia'
+
+/*
+ * If not building with SSR mode, you can
+ * directly export the Store instantiation;
+ *
+ * The function below can be async too; either use
+ * async/await or return a Promise which resolves
+ * with the Store instance.
+ */
+
+export default store((/* { ssrContext } */) => {
+  const pinia = createPinia()
+
+  // You can add Pinia plugins here
+  // pinia.use(SomePiniaPlugin)
+
+  return pinia
+})
diff --git a/app-vite/templates/store/default/store-flag.d.ts b/app-vite/templates/store/store-flag.d.ts
similarity index 100%
rename from app-vite/templates/store/default/store-flag.d.ts
rename to app-vite/templates/store/store-flag.d.ts
diff --git a/app-vite/templates/store/ts/store-flag.d.ts b/app-vite/templates/store/ts/store-flag.d.ts
deleted file mode 100644
index 7677175b003..00000000000
--- a/app-vite/templates/store/ts/store-flag.d.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-/* eslint-disable */
-// THIS FEATURE-FLAG FILE IS AUTOGENERATED,
-//  REMOVAL OR CHANGES WILL CAUSE RELATED TYPES TO STOP WORKING
-import "quasar/dist/types/feature-flag";
-
-declare module "quasar/dist/types/feature-flag" {
-  interface QuasarFeatureFlags {
-    store: true;
-  }
-}
diff --git a/app-vite/templates/store/default/index.js b/app-vite/templates/store/vuex/default/index.js
similarity index 100%
rename from app-vite/templates/store/default/index.js
rename to app-vite/templates/store/vuex/default/index.js
diff --git a/app-vite/templates/store/ts/index.ts b/app-vite/templates/store/vuex/ts/index.ts
similarity index 99%
rename from app-vite/templates/store/ts/index.ts
rename to app-vite/templates/store/vuex/ts/index.ts
index 2bae8e4ff73..0f9bb9e5e74 100644
--- a/app-vite/templates/store/ts/index.ts
+++ b/app-vite/templates/store/vuex/ts/index.ts
@@ -51,4 +51,4 @@ export default store(function (/* { ssrContext } */) {
 
 export function useStore() {
   return vuexUseStore(storeKey)
-}
\ No newline at end of file
+}
diff --git a/app-vite/types/store.d.ts b/app-vite/types/store.d.ts
index a536dc7d372..0561add819e 100644
--- a/app-vite/types/store.d.ts
+++ b/app-vite/types/store.d.ts
@@ -1,16 +1,21 @@
 import { HasStore } from "quasar";
+import { Pinia } from "pinia";
 import { Store } from "vuex";
 import { HasSsrParam } from "./ssr";
 
+// If Pinia is installed, its type will be resolved, thus it will be used.
+// Otherwise, if Vuex is installed, it will be used. If nothing is installed, 'any' will be used.
+type StoreInstance<S = any> = unknown extends Pinia ? Store<S> : Pinia;
+
 export type HasStoreParam<S = any> = HasStore<{
   /**
-   * The state of the Vuex store, gets filled in by Vuex itself
+   * The store instance.
    */
-  store: Store<S>;
+  store: StoreInstance<S>;
 }>;
 
 export type StoreParams = {} & HasSsrParam;
 
 export type StoreCallback = (
   params: StoreParams
-) => Store<any> | Promise<Store<any>>;
+) => StoreInstance | Promise<StoreInstance>;

From 54a353a540d59d401bc724c4d3a322b514a90a8c Mon Sep 17 00:00:00 2001
From: Yusuf Kandemir <yusuf.kandemir@outlook.com.tr>
Date: Tue, 8 Mar 2022 20:38:18 +0300
Subject: [PATCH 3/4] feat(create-app): Add Pinia support, disable Vuex

---
 .../quasar-v2/js-vite/BASE/package.json       |  1 +
 .../templates/quasar-v2/js-vite/index.js      |  4 +++-
 .../js-vite/pinia/src/store/example/index.js  | 15 ++++++++++++++
 .../js-vite/pinia/src/store/index.js          | 20 +++++++++++++++++++
 .../quasar-v2/js-webpack/BASE/package.json    |  1 +
 .../templates/quasar-v2/js-webpack/index.js   |  4 +++-
 .../pinia/src/store/example/index.js          | 15 ++++++++++++++
 .../js-webpack/pinia/src/store/index.js       | 20 +++++++++++++++++++
 .../quasar-v2/ts-vite/BASE/package.json       |  1 +
 .../templates/quasar-v2/ts-vite/index.js      |  4 +++-
 .../ts-vite/pinia/src/store/example/index.ts  | 15 ++++++++++++++
 .../ts-vite/pinia/src/store/index.ts          | 20 +++++++++++++++++++
 .../quasar-v2/ts-webpack/BASE/package.json    |  1 +
 .../templates/quasar-v2/ts-webpack/index.js   |  4 +++-
 .../pinia/src/store/example/index.ts          | 15 ++++++++++++++
 .../ts-webpack/pinia/src/store/index.ts       | 20 +++++++++++++++++++
 16 files changed, 156 insertions(+), 4 deletions(-)
 create mode 100644 create-app/templates/quasar-v2/js-vite/pinia/src/store/example/index.js
 create mode 100644 create-app/templates/quasar-v2/js-vite/pinia/src/store/index.js
 create mode 100644 create-app/templates/quasar-v2/js-webpack/pinia/src/store/example/index.js
 create mode 100644 create-app/templates/quasar-v2/js-webpack/pinia/src/store/index.js
 create mode 100644 create-app/templates/quasar-v2/ts-vite/pinia/src/store/example/index.ts
 create mode 100644 create-app/templates/quasar-v2/ts-vite/pinia/src/store/index.ts
 create mode 100644 create-app/templates/quasar-v2/ts-webpack/pinia/src/store/example/index.ts
 create mode 100644 create-app/templates/quasar-v2/ts-webpack/pinia/src/store/index.ts

diff --git a/create-app/templates/quasar-v2/js-vite/BASE/package.json b/create-app/templates/quasar-v2/js-vite/BASE/package.json
index 2119e4c04b5..90cc4e9c27a 100644
--- a/create-app/templates/quasar-v2/js-vite/BASE/package.json
+++ b/create-app/templates/quasar-v2/js-vite/BASE/package.json
@@ -13,6 +13,7 @@
   "dependencies": {
     <% if (preset.axios) { %>"axios": "^0.21.1",<% } %>
     <% if (preset.i18n) { %>"vue-i18n": "^9.0.0",<% } %>
+    <% if (preset.pinia) { %>"pinia": "^2.0.11",<% } %>
     <% if (preset.vuex) { %>"vuex": "^4.0.1",<% } %>
     "@quasar/extras": "^1.0.0",
     "quasar": "^2.6.0",
diff --git a/create-app/templates/quasar-v2/js-vite/index.js b/create-app/templates/quasar-v2/js-vite/index.js
index 4bf034ffc92..3c0c48db0b9 100644
--- a/create-app/templates/quasar-v2/js-vite/index.js
+++ b/create-app/templates/quasar-v2/js-vite/index.js
@@ -22,7 +22,8 @@ module.exports = async function ({
       message: 'Check the features needed for your project:',
       choices: [
         { title: 'ESLint', value: 'lint', description: 'recommended', selected: true },
-        { title: 'Vuex', value: 'vuex' },
+        { title: 'State Management (Pinia)', value: 'pinia', description: 'https://pinia.vuejs.org' },
+        { title: 'State Management (Vuex) [DEPRECATED; see https://vuejs.org/guide/scaling-up/state-management.html#pinia]', value: 'vuex', disabled: true },
         { title: 'Axios', value: 'axios' },
         { title: 'Vue-i18n', value: 'i18n' }
       ],
@@ -49,6 +50,7 @@ module.exports = async function ({
 
   if (scope.preset.axios) utils.renderTemplate(utils.join(__dirname, 'axios'), dir, scope)
   if (scope.preset.i18n) utils.renderTemplate(utils.join(__dirname, 'i18n'), dir, scope)
+  if (scope.preset.pinia) utils.renderTemplate(utils.join(__dirname, 'pinia'), dir, scope)
   if (scope.preset.vuex) utils.renderTemplate(utils.join(__dirname, 'vuex'), dir, scope)
   if (scope.preset.lint) utils.renderTemplate(utils.join(__dirname, 'lint'), dir, scope)
 }
diff --git a/create-app/templates/quasar-v2/js-vite/pinia/src/store/example/index.js b/create-app/templates/quasar-v2/js-vite/pinia/src/store/example/index.js
new file mode 100644
index 00000000000..83e83903916
--- /dev/null
+++ b/create-app/templates/quasar-v2/js-vite/pinia/src/store/example/index.js
@@ -0,0 +1,15 @@
+import { defineStore } from 'pinia';
+
+export const useCounterStore = defineStore('counter', {
+  state: () => ({
+    counter: 0,
+  }),
+  getters: {
+    doubleCount: (state) => state.counter * 2,
+  },
+  actions: {
+    increment() {
+      this.counter++;
+    },
+  },
+});
diff --git a/create-app/templates/quasar-v2/js-vite/pinia/src/store/index.js b/create-app/templates/quasar-v2/js-vite/pinia/src/store/index.js
new file mode 100644
index 00000000000..ca5bee55170
--- /dev/null
+++ b/create-app/templates/quasar-v2/js-vite/pinia/src/store/index.js
@@ -0,0 +1,20 @@
+import { store } from 'quasar/wrappers'
+import { createPinia } from 'pinia'
+
+/*
+ * If not building with SSR mode, you can
+ * directly export the Store instantiation;
+ *
+ * The function below can be async too; either use
+ * async/await or return a Promise which resolves
+ * with the Store instance.
+ */
+
+export default store((/* { ssrContext } */) => {
+  const pinia = createPinia()
+
+  // You can add Pinia plugins here
+  // pinia.use(SomePiniaPlugin)
+
+  return pinia
+})
diff --git a/create-app/templates/quasar-v2/js-webpack/BASE/package.json b/create-app/templates/quasar-v2/js-webpack/BASE/package.json
index fc7a3208d0c..4fa1dc7ce1f 100644
--- a/create-app/templates/quasar-v2/js-webpack/BASE/package.json
+++ b/create-app/templates/quasar-v2/js-webpack/BASE/package.json
@@ -13,6 +13,7 @@
   "dependencies": {
     <% if (preset.axios) { %>"axios": "^0.21.1",<% } %>
     <% if (preset.i18n) { %>"vue-i18n": "^9.0.0",<% } %>
+    <% if (preset.pinia) { %>"pinia": "^2.0.11",<% } %>
     <% if (preset.vuex) { %>"vuex": "^4.0.1",<% } %>
     "@quasar/extras": "^1.0.0",
     "core-js": "^3.6.5",
diff --git a/create-app/templates/quasar-v2/js-webpack/index.js b/create-app/templates/quasar-v2/js-webpack/index.js
index 4bf034ffc92..3c0c48db0b9 100644
--- a/create-app/templates/quasar-v2/js-webpack/index.js
+++ b/create-app/templates/quasar-v2/js-webpack/index.js
@@ -22,7 +22,8 @@ module.exports = async function ({
       message: 'Check the features needed for your project:',
       choices: [
         { title: 'ESLint', value: 'lint', description: 'recommended', selected: true },
-        { title: 'Vuex', value: 'vuex' },
+        { title: 'State Management (Pinia)', value: 'pinia', description: 'https://pinia.vuejs.org' },
+        { title: 'State Management (Vuex) [DEPRECATED; see https://vuejs.org/guide/scaling-up/state-management.html#pinia]', value: 'vuex', disabled: true },
         { title: 'Axios', value: 'axios' },
         { title: 'Vue-i18n', value: 'i18n' }
       ],
@@ -49,6 +50,7 @@ module.exports = async function ({
 
   if (scope.preset.axios) utils.renderTemplate(utils.join(__dirname, 'axios'), dir, scope)
   if (scope.preset.i18n) utils.renderTemplate(utils.join(__dirname, 'i18n'), dir, scope)
+  if (scope.preset.pinia) utils.renderTemplate(utils.join(__dirname, 'pinia'), dir, scope)
   if (scope.preset.vuex) utils.renderTemplate(utils.join(__dirname, 'vuex'), dir, scope)
   if (scope.preset.lint) utils.renderTemplate(utils.join(__dirname, 'lint'), dir, scope)
 }
diff --git a/create-app/templates/quasar-v2/js-webpack/pinia/src/store/example/index.js b/create-app/templates/quasar-v2/js-webpack/pinia/src/store/example/index.js
new file mode 100644
index 00000000000..83e83903916
--- /dev/null
+++ b/create-app/templates/quasar-v2/js-webpack/pinia/src/store/example/index.js
@@ -0,0 +1,15 @@
+import { defineStore } from 'pinia';
+
+export const useCounterStore = defineStore('counter', {
+  state: () => ({
+    counter: 0,
+  }),
+  getters: {
+    doubleCount: (state) => state.counter * 2,
+  },
+  actions: {
+    increment() {
+      this.counter++;
+    },
+  },
+});
diff --git a/create-app/templates/quasar-v2/js-webpack/pinia/src/store/index.js b/create-app/templates/quasar-v2/js-webpack/pinia/src/store/index.js
new file mode 100644
index 00000000000..ca5bee55170
--- /dev/null
+++ b/create-app/templates/quasar-v2/js-webpack/pinia/src/store/index.js
@@ -0,0 +1,20 @@
+import { store } from 'quasar/wrappers'
+import { createPinia } from 'pinia'
+
+/*
+ * If not building with SSR mode, you can
+ * directly export the Store instantiation;
+ *
+ * The function below can be async too; either use
+ * async/await or return a Promise which resolves
+ * with the Store instance.
+ */
+
+export default store((/* { ssrContext } */) => {
+  const pinia = createPinia()
+
+  // You can add Pinia plugins here
+  // pinia.use(SomePiniaPlugin)
+
+  return pinia
+})
diff --git a/create-app/templates/quasar-v2/ts-vite/BASE/package.json b/create-app/templates/quasar-v2/ts-vite/BASE/package.json
index eb50634f734..5ca3b591566 100644
--- a/create-app/templates/quasar-v2/ts-vite/BASE/package.json
+++ b/create-app/templates/quasar-v2/ts-vite/BASE/package.json
@@ -14,6 +14,7 @@
     <% if (typescriptConfig === 'class') { %>"vue-class-component": "^8.0.0-rc.1",<% } %>
     <% if (preset.axios) { %>"axios": "^0.21.1",<% } %>
     <% if (preset.i18n) { %>"vue-i18n": "^9.0.0",<% } %>
+    <% if (preset.pinia) { %>"pinia": "^2.0.11",<% } %>
     <% if (preset.vuex) { %>"vuex": "^4.0.1",<% } %>
     "@quasar/extras": "^1.0.0",
     "quasar": "^2.6.0",
diff --git a/create-app/templates/quasar-v2/ts-vite/index.js b/create-app/templates/quasar-v2/ts-vite/index.js
index c6941e6b43e..2e3bb728d0e 100644
--- a/create-app/templates/quasar-v2/ts-vite/index.js
+++ b/create-app/templates/quasar-v2/ts-vite/index.js
@@ -33,7 +33,8 @@ module.exports = async function ({
       message: 'Check the features needed for your project:',
       choices: [
         { title: 'ESLint', value: 'lint', description: 'recommended', selected: true },
-        { title: 'Vuex', value: 'vuex' },
+        { title: 'State Management (Pinia)', value: 'pinia', description: 'https://pinia.vuejs.org' },
+        { title: 'State Management (Vuex) [DEPRECATED; see https://vuejs.org/guide/scaling-up/state-management.html#pinia]', value: 'vuex', disabled: true },
         { title: 'Axios', value: 'axios' },
         { title: 'Vue-i18n', value: 'i18n' }
       ],
@@ -60,6 +61,7 @@ module.exports = async function ({
 
   if (scope.preset.axios) utils.renderTemplate(utils.join(__dirname, 'axios'), dir, scope)
   if (scope.preset.i18n) utils.renderTemplate(utils.join(__dirname, 'i18n'), dir, scope)
+  if (scope.preset.pinia) utils.renderTemplate(utils.join(__dirname, 'pinia'), dir, scope)
   if (scope.preset.vuex) utils.renderTemplate(utils.join(__dirname, 'vuex'), dir, scope)
   if (scope.preset.lint) {
     utils.renderTemplate(utils.join(__dirname, 'lint'), dir, scope)
diff --git a/create-app/templates/quasar-v2/ts-vite/pinia/src/store/example/index.ts b/create-app/templates/quasar-v2/ts-vite/pinia/src/store/example/index.ts
new file mode 100644
index 00000000000..83e83903916
--- /dev/null
+++ b/create-app/templates/quasar-v2/ts-vite/pinia/src/store/example/index.ts
@@ -0,0 +1,15 @@
+import { defineStore } from 'pinia';
+
+export const useCounterStore = defineStore('counter', {
+  state: () => ({
+    counter: 0,
+  }),
+  getters: {
+    doubleCount: (state) => state.counter * 2,
+  },
+  actions: {
+    increment() {
+      this.counter++;
+    },
+  },
+});
diff --git a/create-app/templates/quasar-v2/ts-vite/pinia/src/store/index.ts b/create-app/templates/quasar-v2/ts-vite/pinia/src/store/index.ts
new file mode 100644
index 00000000000..ca5bee55170
--- /dev/null
+++ b/create-app/templates/quasar-v2/ts-vite/pinia/src/store/index.ts
@@ -0,0 +1,20 @@
+import { store } from 'quasar/wrappers'
+import { createPinia } from 'pinia'
+
+/*
+ * If not building with SSR mode, you can
+ * directly export the Store instantiation;
+ *
+ * The function below can be async too; either use
+ * async/await or return a Promise which resolves
+ * with the Store instance.
+ */
+
+export default store((/* { ssrContext } */) => {
+  const pinia = createPinia()
+
+  // You can add Pinia plugins here
+  // pinia.use(SomePiniaPlugin)
+
+  return pinia
+})
diff --git a/create-app/templates/quasar-v2/ts-webpack/BASE/package.json b/create-app/templates/quasar-v2/ts-webpack/BASE/package.json
index 092546f4d2f..f196a0b933e 100644
--- a/create-app/templates/quasar-v2/ts-webpack/BASE/package.json
+++ b/create-app/templates/quasar-v2/ts-webpack/BASE/package.json
@@ -14,6 +14,7 @@
     <% if (typescriptConfig === 'class') { %>"vue-class-component": "^8.0.0-rc.1",<% } %>
     <% if (preset.axios) { %>"axios": "^0.21.1",<% } %>
     <% if (preset.i18n) { %>"vue-i18n": "^9.0.0",<% } %>
+    <% if (preset.pinia) { %>"pinia": "^2.0.11",<% } %>
     <% if (preset.vuex) { %>"vuex": "^4.0.1",<% } %>
     "@quasar/extras": "^1.0.0",
     "core-js": "^3.6.5",
diff --git a/create-app/templates/quasar-v2/ts-webpack/index.js b/create-app/templates/quasar-v2/ts-webpack/index.js
index 742dfb5063e..6d60078d378 100644
--- a/create-app/templates/quasar-v2/ts-webpack/index.js
+++ b/create-app/templates/quasar-v2/ts-webpack/index.js
@@ -33,7 +33,8 @@ module.exports = async function ({
       message: 'Check the features needed for your project:',
       choices: [
         { title: 'ESLint', value: 'lint', description: 'recommended', selected: true },
-        { title: 'Vuex', value: 'vuex' },
+        { title: 'State Management (Pinia)', value: 'pinia', description: 'https://pinia.vuejs.org' },
+        { title: 'State Management (Vuex) [DEPRECATED; see https://vuejs.org/guide/scaling-up/state-management.html#pinia]', value: 'vuex', disabled: true },
         { title: 'Axios', value: 'axios' },
         { title: 'Vue-i18n', value: 'i18n' }
       ],
@@ -60,6 +61,7 @@ module.exports = async function ({
 
   if (scope.preset.axios) utils.renderTemplate(utils.join(__dirname, 'axios'), dir, scope)
   if (scope.preset.i18n) utils.renderTemplate(utils.join(__dirname, 'i18n'), dir, scope)
+  if (scope.preset.pinia) utils.renderTemplate(utils.join(__dirname, 'pinia'), dir, scope)
   if (scope.preset.vuex) utils.renderTemplate(utils.join(__dirname, 'vuex'), dir, scope)
   if (scope.preset.lint) {
     utils.renderTemplate(utils.join(__dirname, 'lint'), dir, scope)
diff --git a/create-app/templates/quasar-v2/ts-webpack/pinia/src/store/example/index.ts b/create-app/templates/quasar-v2/ts-webpack/pinia/src/store/example/index.ts
new file mode 100644
index 00000000000..83e83903916
--- /dev/null
+++ b/create-app/templates/quasar-v2/ts-webpack/pinia/src/store/example/index.ts
@@ -0,0 +1,15 @@
+import { defineStore } from 'pinia';
+
+export const useCounterStore = defineStore('counter', {
+  state: () => ({
+    counter: 0,
+  }),
+  getters: {
+    doubleCount: (state) => state.counter * 2,
+  },
+  actions: {
+    increment() {
+      this.counter++;
+    },
+  },
+});
diff --git a/create-app/templates/quasar-v2/ts-webpack/pinia/src/store/index.ts b/create-app/templates/quasar-v2/ts-webpack/pinia/src/store/index.ts
new file mode 100644
index 00000000000..ca5bee55170
--- /dev/null
+++ b/create-app/templates/quasar-v2/ts-webpack/pinia/src/store/index.ts
@@ -0,0 +1,20 @@
+import { store } from 'quasar/wrappers'
+import { createPinia } from 'pinia'
+
+/*
+ * If not building with SSR mode, you can
+ * directly export the Store instantiation;
+ *
+ * The function below can be async too; either use
+ * async/await or return a Promise which resolves
+ * with the Store instance.
+ */
+
+export default store((/* { ssrContext } */) => {
+  const pinia = createPinia()
+
+  // You can add Pinia plugins here
+  // pinia.use(SomePiniaPlugin)
+
+  return pinia
+})

From f0c41205fc5d9522861f17503e84caec956dcbfd Mon Sep 17 00:00:00 2001
From: Yusuf Kandemir <yusuf.kandemir@outlook.com.tr>
Date: Tue, 8 Mar 2022 21:03:24 +0300
Subject: [PATCH 4/4] fix(create-app/ts-webpack): Fix the wrong syntax in
 tsconfig.json

---
 create-app/templates/quasar-v2/ts-webpack/BASE/tsconfig.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/create-app/templates/quasar-v2/ts-webpack/BASE/tsconfig.json b/create-app/templates/quasar-v2/ts-webpack/BASE/tsconfig.json
index c0c1badf2a8..7fa81d2199e 100644
--- a/create-app/templates/quasar-v2/ts-webpack/BASE/tsconfig.json
+++ b/create-app/templates/quasar-v2/ts-webpack/BASE/tsconfig.json
@@ -1,7 +1,7 @@
 {
   "extends": "@quasar/app-webpack/tsconfig-preset",
   "compilerOptions": {
-    "baseUrl": "."<% if (typescriptConfig === 'class' { %>
+    "baseUrl": "."<% if (typescriptConfig === 'class') { %>
     "experimentalDecorators": true,
     "useDefineForClassFields": true<% } %>
   }