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;
+    },
+  },
+});