implement pinia

README.md

@@ -5,6 +5,7 @@
 [![vike][badge-vike-img]][badge-vike-href]
 [![vuetify][badge-vuetify-img]][badge-vuetify-href]
 [![storybook][badge-storybook-img]][badge-storybook-href]
+[![pinia][badge-pinia-img]][badge-pinia-href]
 
 The IT4C Boilerplate for frontends
 
@@ -49,11 +50,12 @@ The following commands are available:
 
 ## Technology
 
-- [x] vue3
+- [x] vite
 - [x] vike
+- [x] vue3
 - [x] vuetify
 - [x] storybook
-- [ ] pinia store
+- [x] pinia store
 - [ ] eslint
 - [ ] figma
 - [ ] chromatic
@@ -91,5 +93,8 @@ See [vite-plugin-ssr-vuetify](https://github.com/brillout/vite-plugin-ssr-vuetif
 [badge-vuetify-img]: https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2FIT4Change%2Fboilerplate-frontend%2Fmaster%2Fpackage.json&query=dependencies.vuetify&label=vuetify&color=green
 [badge-vuetify-href]: https://vuetifyjs.com/
 
-[badge-storybook-img]: https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2FIT4Change%2Fboilerplate-frontend%2Fmaster%2Fpackage.json&query=devDependencies.storybook&label=storybook&color=green
-[badge-storybook-href]: https://storybook.js.org/
+[badge-pinia-img]: https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2FIT4Change%2Fboilerplate-frontend%2Fmaster%2Fpackage.json&query=dependencies.pinia&label=pinia&color=green
+[badge-pinia-href]: https://pinia.vuejs.org/
+
+[badge-storybook-img]: https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2FIT4Change%2Fboilerplate-frontend%2Fmaster%2Fpackage.json&query=devDependencies.storybook&label=storybook&color=yellow
+[badge-storybook-href]: https://storybook.js.org/

package-lock.json

@@ -19,6 +19,7 @@
         "compression": "^1.7.4",
         "cross-env": "^7.0.3",
         "express": "^4.18.2",
+        "pinia": "^2.1.7",
         "sass": "^1.69.5",
         "sass-loader": "^13.3.2",
         "sirv": "^2.0.3",
@@ -6106,6 +6107,11 @@
         "@vue/shared": "3.3.8"
       }
     },
+    "node_modules/@vue/devtools-api": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.5.1.tgz",
+      "integrity": "sha512-+KpckaAQyfbvshdDW5xQylLni1asvNSGme1JFs8I1+/H5pHEhqUKMEQD/qn3Nx5+/nycBq11qAEi8lk+LXI2dA=="
+    },
     "node_modules/@vue/reactivity": {
       "version": "3.3.8",
       "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.3.8.tgz",
@@ -10880,6 +10886,56 @@
         "node": ">=6"
       }
     },
+    "node_modules/pinia": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.1.7.tgz",
+      "integrity": "sha512-+C2AHFtcFqjPih0zpYuvof37SFxMQ7OEG2zV9jRI12i9BOy3YQVAHwdKtyyc8pDcDyIc33WCIsZaCFWU7WWxGQ==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.5.0",
+        "vue-demi": ">=0.14.5"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.4.0",
+        "typescript": ">=4.4.4",
+        "vue": "^2.6.14 || ^3.3.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pinia/node_modules/vue-demi": {
+      "version": "0.14.6",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
+      "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/pirates": {
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",

package.json

@@ -10,7 +10,13 @@
   },
   "keywords": [
     "npm",
-    "vike"
+    "nodejs",
+    "vite",
+    "vike",
+    "vue",
+    "vuetify",
+    "pinia",
+    "storybook"
   ],
   "author": "Ulf Gebhardt",
   "license": "Apache-2.0",
@@ -40,6 +46,7 @@
     "compression": "^1.7.4",
     "cross-env": "^7.0.3",
     "express": "^4.18.2",
+    "pinia": "^2.1.7",
     "sass": "^1.69.5",
     "sass-loader": "^13.3.2",
     "sirv": "^2.0.3",

renderer/app.ts

@@ -3,6 +3,8 @@ import PageShell from './PageShell.vue'
 import { setPageContext } from './usePageContext'
 import type { Component, PageContext, PageProps } from './types'
 import vuetify from './vuetify'
+import { createPinia } from 'pinia'
+
 
 export { createApp }
 
@@ -21,8 +23,9 @@ function createApp(Page: Component, pageProps: PageProps | undefined, pageContex
     }
   })
 
+  const pinia = createPinia()
   const app = createSSRApp(PageWithLayout)
-  console.log('abc')
+  app.use(pinia)
   app.use(vuetify)
 
   // Make pageContext available from any Vue component