add pinia

app/pages/contact.vue

@@ -2,8 +2,22 @@
     <v-container
         class="fill-height d-flex flex-column align-center justify-center text-center"
     >
+        <img :src="norrisStore.response.icon_url" alt="chuck norris" />
         <v-icon icon="mdi-account-box" size="64"></v-icon>
-
         <div class="mt-3">My Application's Contact Page</div>
+        <div>
+            {{ norrisStore.response }}
+        </div>
     </v-container>
 </template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { useChuckNorris } from "~/stores/chuck";
+const norrisStore = useChuckNorris();
+
+onMounted(async () => {
+    await norrisStore.getData();
+    console.log(norrisStore.response);
+});
+</script>

app/stores/chuck.js

@@ -0,0 +1,14 @@
+import { defineStore } from "pinia";
+
+export const useChuckNorris = defineStore("chuckNorris", {
+  state: () => ({
+    response: "",
+  }),
+  actions: {
+    async getData() {
+      const response = await fetch("https://api.chucknorris.io/jokes/random");
+      const data = await response.json();
+      this.response = data;
+    },
+  },
+});

nuxt.config.ts

@@ -10,4 +10,5 @@ export default defineNuxtConfig({
   build: {
     transpile: ["vuetify"],
   },
+  modules: ["@pinia/nuxt"],
 });

package-lock.json

@@ -8,7 +8,9 @@
       "hasInstallScript": true,
       "dependencies": {
         "@mdi/font": "^7.4.47",
+        "@pinia/nuxt": "^0.11.2",
         "nuxt": "^4.0.1",
+        "pinia": "^3.0.3",
         "vue": "^3.5.18",
         "vue-router": "^4.5.1",
         "vuetify": "^3.9.3"
@@ -3118,6 +3120,54 @@
         "url": "https://opencollective.com/parcel"
       }
     },
+    "node_modules/@pinia/nuxt": {
+      "version": "0.11.2",
+      "resolved": "https://registry.npmjs.org/@pinia/nuxt/-/nuxt-0.11.2.tgz",
+      "integrity": "sha512-CgvSWpbktxxWBV7ModhAcsExsQZqpPq6vMYEe9DexmmY6959ev8ukL4iFhr/qov2Nb9cQAWd7niFDnaWkN+FHg==",
+      "license": "MIT",
+      "dependencies": {
+        "@nuxt/kit": "^3.9.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "pinia": "^3.0.3"
+      }
+    },
+    "node_modules/@pinia/nuxt/node_modules/@nuxt/kit": {
+      "version": "3.18.0",
+      "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-3.18.0.tgz",
+      "integrity": "sha512-svS1CBEx7gMgEIaNYrQt26J/t5bDSUdIf7GQWr5M6yszOzLw+IVzyfH7TBmuxZEbjovhLaJEG379mgKp82H/lA==",
+      "license": "MIT",
+      "dependencies": {
+        "c12": "^3.1.0",
+        "consola": "^3.4.2",
+        "defu": "^6.1.4",
+        "destr": "^2.0.5",
+        "errx": "^0.1.0",
+        "exsolve": "^1.0.7",
+        "ignore": "^7.0.5",
+        "jiti": "^2.5.1",
+        "klona": "^2.0.6",
+        "knitwork": "^1.2.0",
+        "mlly": "^1.7.4",
+        "ohash": "^2.0.11",
+        "pathe": "^2.0.3",
+        "pkg-types": "^2.2.0",
+        "scule": "^1.3.0",
+        "semver": "^7.7.2",
+        "std-env": "^3.9.0",
+        "tinyglobby": "^0.2.14",
+        "ufo": "^1.6.1",
+        "unctx": "^2.4.1",
+        "unimport": "^5.2.0",
+        "untyped": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      }
+    },
     "node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -8726,6 +8776,36 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pinia": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-3.0.3.tgz",
+      "integrity": "sha512-ttXO/InUULUXkMHpTdp9Fj4hLpD/2AoJdmAbAeW2yu1iy1k+pkFekQXw5VpC0/5p51IOR/jDaDRfRWRnMMsGOA==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-api": "^7.7.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.4.4",
+        "vue": "^2.7.0 || ^3.5.11"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pinia/node_modules/@vue/devtools-api": {
+      "version": "7.7.7",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-7.7.7.tgz",
+      "integrity": "sha512-lwOnNBH2e7x1fIIbVT7yF5D+YWhqELm55/4ZKf45R9T8r9dE2AIOy8HKjfqzGsoTHFbWbr337O4E0A0QADnjBg==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-kit": "^7.7.7"
+      }
+    },
     "node_modules/pkg-types": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-2.2.0.tgz",

package.json

@@ -11,7 +11,9 @@
   },
   "dependencies": {
     "@mdi/font": "^7.4.47",
+    "@pinia/nuxt": "^0.11.2",
     "nuxt": "^4.0.1",
+    "pinia": "^3.0.3",
     "vue": "^3.5.18",
     "vue-router": "^4.5.1",
     "vuetify": "^3.9.3"