feat: ✨ add pinia and nuxt/image

CRBroughton · Nov 1, 2023 · 56293a0 · 56293a0
1 parent 91dd5a1
commit 56293a0
Show file tree

Hide file tree

Showing 7 changed files with 786 additions and 257 deletions.
diff --git a/components/GithubUser.vue b/components/GithubUser.vue
@@ -14,20 +14,20 @@ const props = defineProps<{
 
 <style scoped>
 .user-wrapper {
-    margin-top: 50px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 1em;
+  margin-top: 50px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1em;
 }
 
 p {
-    font-size: 24px;
+  font-size: 24px;
 }
 
 img {
-    width: 80px;
-    height: 80px;
-    border-radius: 50%;
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
 }
 </style>
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -2,9 +2,14 @@
 export default defineNuxtConfig({
   modules: [
     '@sidebase/nuxt-auth',
+    '@nuxt/image',
     '@nuxt/devtools',
     '@nuxtjs/tailwindcss',
+    '@pinia/nuxt',
   ],
+  imports: {
+    dirs: ['./stores'],
+  },
   build: { transpile: ['trpc-nuxt'] },
   css: ['~/assets/css/main.css'],
   postcss: {
@@ -25,7 +30,7 @@ export default defineNuxtConfig({
     origin: process.env.AUTH_ORIGIN,
   },
   devtools: {
-    enabled: false,
+    enabled: true,
   },
   experimental: {
     componentIslands: false,

diff --git a/package.json b/package.json
@@ -56,10 +56,14 @@
   },
   "dependencies": {
     "@next-auth/prisma-adapter": "^1.0.6",
+    "@nuxt/image": "^1.0.0",
+    "@pinia/nuxt": "^0.5.1",
     "@prisma/client": "4.14.1",
     "@trpc/client": "^10.37.1",
     "@trpc/server": "^10.37.1",
+    "@vueuse/core": "^10.5.0",
     "next-auth": "4.22.1",
+    "pinia": "^2.1.7",
     "superjson": "1.12.3",
     "trpc-nuxt": "0.10.7",
     "ts-pattern": "4.3.0",

diff --git a/pages/index.vue b/pages/index.vue
@@ -1,11 +1,9 @@
 <script setup lang="ts">
-import { store } from '~~/store'
-
-const { users, getUsers } = store()
+const usersStore = userStore()
 const { status, data, signIn, signOut } = useAuth()
 
-onMounted(async () => {
-  await getUsers()
+onMounted(() => {
+  usersStore.getUsers()
 })
 
 async function signUserOut() {
@@ -19,7 +17,7 @@ async function signUserIn() {
 </script>
 
 <template>
-  {{ users }}
+  {{ usersStore.users }}
   <Packages />
   <button v-if="status === 'unauthenticated'" @click="signUserIn">
     Sign in