From 3830ea84c8d8de4c2acbc35bd1ae8b07f5402c97 Mon Sep 17 00:00:00 2001
From: legonzaur <legonzaur@live.fr>
Date: Sun, 29 Dec 2024 19:34:26 +0100
Subject: [PATCH] feat : working UI for words

---
 app.vue                          | 15 ++++++--
 components/header.vue            | 52 +++++++++++++++++++++++++
 components/user.vue              | 35 +++++++++++++++++
 components/word.vue              | 56 +++++++++++++++++++++++++++
 dto/conceptinturnresponse.dto.ts | 20 ----------
 dto/conceptresponse.dto.ts       | 13 -------
 dto/gameresponse.dto.ts          | 36 ------------------
 dto/playerresponse.dto.ts        | 16 --------
 dto/userresponse.dto.ts          | 16 --------
 dto/wordresponse.dto.ts          | 18 ---------
 eslint.config.mjs                | 63 +++++++++++++++++++++++++++++++
 middleware/auth.global.ts        |  2 +-
 netcode/index.ts                 |  8 ++++
 nuxt.config.ts                   |  9 ++++-
 package-lock.json                | 65 ++++++++++++++++++++++++++++++++
 package.json                     |  2 +
 pages/index.vue                  |  6 ++-
 pages/login.vue                  |  2 +-
 pages/words.vue                  | 33 ++++++++++++++++
 service/user.service.ts          | 15 ++++++++
 store/user.store.ts              | 40 ++++++++++++++++++++
 store/word.store.ts              | 39 +++++++++++++++++++
 tsconfig.json                    |  9 ++++-
 23 files changed, 441 insertions(+), 129 deletions(-)
 create mode 100644 components/header.vue
 create mode 100644 components/user.vue
 create mode 100644 components/word.vue
 delete mode 100644 dto/conceptinturnresponse.dto.ts
 delete mode 100644 dto/conceptresponse.dto.ts
 delete mode 100644 dto/gameresponse.dto.ts
 delete mode 100644 dto/playerresponse.dto.ts
 delete mode 100644 dto/userresponse.dto.ts
 delete mode 100644 dto/wordresponse.dto.ts
 create mode 100644 eslint.config.mjs
 create mode 100644 netcode/index.ts
 create mode 100644 pages/words.vue
 create mode 100644 service/user.service.ts
 create mode 100644 store/user.store.ts
 create mode 100644 store/word.store.ts

diff --git a/app.vue b/app.vue
index 41705f0..00c8942 100644
--- a/app.vue
+++ b/app.vue
@@ -1,11 +1,20 @@
-<script lang="ts">
-import 'reflect-metadata';
+<script setup lang="ts">
+import { useUserStore } from '~/store/user.store';
+const userStore = useUserStore();
+
+
+const req = await userStore.whoami()
+
+
+
 </script>
+
 <template>
   <div>
     <NuxtRouteAnnouncer />
-    <NuxtWelcome />
     <NuxtLayout>
+      <NuxtLoadingIndicator> Loading... </NuxtLoadingIndicator>
+      <Header />
       <NuxtPage />
     </NuxtLayout>
   </div>
diff --git a/components/header.vue b/components/header.vue
new file mode 100644
index 0000000..95d5054
--- /dev/null
+++ b/components/header.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+
+import { useUserStore } from '~/store/user.store';
+
+const userStore = useUserStore();
+
+</script>
+
+<template>
+    <header>
+        <div id="self">
+            <template v-if="userStore.has_contacted">
+                <ClientOnly>
+                    <template v-if="userStore.self && userStore.self.id">
+                        <User :id="userStore.self.id"></User>
+                        <button>Logout</button>
+                    </template>
+                    <button v-else>Login</button>
+                </ClientOnly>
+            </template>
+
+            <template v-else>
+                Contacting server...
+            </template>
+        </div>
+
+        <div id="links">
+            <NuxtLink to="/">Home</NuxtLink>
+            <NuxtLink to="/words">Words</NuxtLink>
+        </div>
+
+    </header>
+</template>
+
+<style lang="css" scoped>
+header,
+header * {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: nowrap;
+}
+
+div#self {
+    height: 32px
+}
+
+div#links {
+    width: 100%;
+    gap: 1%;
+}
+</style>
\ No newline at end of file
diff --git a/components/user.vue b/components/user.vue
new file mode 100644
index 0000000..345b371
--- /dev/null
+++ b/components/user.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { fetchUser } from '~/service/user.service';
+import { useUserStore } from '~/store/user.store';
+
+
+export interface Props {
+    id: string;
+}
+
+const userStore = useUserStore();
+const props = defineProps<Props>()
+
+const user = await userStore.fetchUser(props.id)
+
+</script>
+
+<template>
+    <div class="user">
+        <img class="user-avatar" :src="`https://cdn.discordapp.com/avatars/${user?.id}/${user?.avatar}.webp?size=32`">
+        {{ user?.username }}
+    </div>
+
+</template>
+
+<style lang="css">
+div.user {
+    display: flex;
+    align-items: center;
+}
+
+img.user-avatar {
+    height: 32px;
+    border-radius: 50%;
+}
+</style>
\ No newline at end of file
diff --git a/components/word.vue b/components/word.vue
new file mode 100644
index 0000000..e4927c0
--- /dev/null
+++ b/components/word.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import type { WordResponseDTO } from '~/netcode/events/dto/wordresponse.dto';
+import { useWordStore } from '~/store/word.store';
+
+export interface Props {
+    word: WordResponseDTO;
+}
+
+const props = defineProps<Props>()
+
+const loading = ref(false)
+const wordStore = useWordStore();
+
+async function changeWordState() {
+    if (loading.value) {
+        return
+    }
+    loading.value = true
+    let data
+    if (props.word.enabled) {
+        data = await wordStore.disableWord(props.word.id)
+    } else {
+        data = await wordStore.enableWord(props.word.id)
+    }
+    loading.value = false
+    props.word.enabled = data.enabled
+
+}
+</script>
+
+<template>
+    <div class="word">
+        <span>{{ word.value }}</span>
+        <input type="checkbox" :class="{ loading }" :checked="word.enabled" :disabled="loading"
+            @click.prevent="changeWordState" />
+        <User :id="word.ownerId"></User>
+
+    </div>
+
+</template>
+
+<style lang="css" scoped>
+div.word {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    align-items: center;
+}
+
+input {
+    min-height: 28px;
+}
+
+input.loading {
+    cursor: wait
+}
+</style>
\ No newline at end of file
diff --git a/dto/conceptinturnresponse.dto.ts b/dto/conceptinturnresponse.dto.ts
deleted file mode 100644
index 0b82ac6..0000000
--- a/dto/conceptinturnresponse.dto.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Expose, Type } from 'class-transformer';
-import { ConceptResponseDTO } from './conceptresponse.dto';
-
-export class ConceptInTurnResponseDTO {
-  constructor(partial: Partial<ConceptInTurnResponseDTO>) {
-    Object.assign(this, partial);
-  }
-  @Type(() => ConceptResponseDTO)
-  @Expose()
-  concept: ConceptResponseDTO;
-
-  @Expose()
-  order: number;
-
-  @Expose()
-  subconcept: number;
-
-  @Expose()
-  markers: number;
-}
diff --git a/dto/conceptresponse.dto.ts b/dto/conceptresponse.dto.ts
deleted file mode 100644
index ed508fb..0000000
--- a/dto/conceptresponse.dto.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Expose } from 'class-transformer';
-
-export class ConceptResponseDTO {
-  constructor(partial: Partial<ConceptResponseDTO>) {
-    Object.assign(this, partial);
-  }
-
-  @Expose()
-  id: number;
-
-  @Expose()
-  value: string;
-}
diff --git a/dto/gameresponse.dto.ts b/dto/gameresponse.dto.ts
deleted file mode 100644
index b3f755c..0000000
--- a/dto/gameresponse.dto.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { Expose, Type } from 'class-transformer';
-import { UserResponseDTO } from './userresponse.dto';
-import { PlayerResponseDTO } from './playerresponse.dto';
-import { ConceptInTurnResponseDTO } from './conceptinturnresponse.dto';
-
-export class GameResponseDTO {
-  constructor(partial: Partial<GameResponseDTO>) {
-    Object.assign(this, partial);
-    this.owner = partial.owner;
-    this.players = partial.players;
-    this.currentPlayer = partial.currentPlayer;
-    this.currentConcepts = partial.currentConcepts;
-  }
-
-  @Expose()
-  id: number;
-
-  @Type(() => UserResponseDTO)
-  @Expose()
-  owner: UserResponseDTO;
-
-  @Type(() => PlayerResponseDTO)
-  @Expose()
-  players: PlayerResponseDTO[];
-
-  @Type(() => PlayerResponseDTO)
-  @Expose()
-  currentPlayer: PlayerResponseDTO;
-
-  @Expose()
-  started: boolean;
-
-  @Type(() => ConceptInTurnResponseDTO)
-  @Expose()
-  currentConcepts: ConceptInTurnResponseDTO[];
-}
diff --git a/dto/playerresponse.dto.ts b/dto/playerresponse.dto.ts
deleted file mode 100644
index 4ac8a53..0000000
--- a/dto/playerresponse.dto.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Expose, Type } from 'class-transformer';
-import { UserResponseDTO } from './userresponse.dto';
-
-export class PlayerResponseDTO {
-  constructor(partial: Partial<PlayerResponseDTO>) {
-    Object.assign(this, partial);
-    this.user = partial.user;
-  }
-
-  @Type(() => UserResponseDTO)
-  @Expose()
-  user: UserResponseDTO;
-
-  @Expose()
-  score: number;
-}
diff --git a/dto/userresponse.dto.ts b/dto/userresponse.dto.ts
deleted file mode 100644
index 5825d8b..0000000
--- a/dto/userresponse.dto.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Expose } from 'class-transformer';
-
-export class UserResponseDTO {
-  constructor(partial: Partial<UserResponseDTO>) {
-    Object.assign(this, partial);
-    this.id = partial.id;
-  }
-  @Expose()
-  id: string;
-
-  @Expose()
-  username: string;
-
-  @Expose()
-  avatar: string;
-}
diff --git a/dto/wordresponse.dto.ts b/dto/wordresponse.dto.ts
deleted file mode 100644
index 2d84c37..0000000
--- a/dto/wordresponse.dto.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Expose } from 'class-transformer';
-
-export class WordResponseDTO {
-  constructor(partial: Partial<WordResponseDTO>) {
-    Object.assign(this, partial);
-  }
-  @Expose()
-  id: number;
-
-  @Expose()
-  value: string;
-
-  @Expose()
-  ownerId: string;
-
-  @Expose()
-  enabled: boolean;
-}
diff --git a/eslint.config.mjs b/eslint.config.mjs
new file mode 100644
index 0000000..4bffc4c
--- /dev/null
+++ b/eslint.config.mjs
@@ -0,0 +1,63 @@
+import typescriptEslintEslintPlugin from '@typescript-eslint/eslint-plugin';
+import globals from 'globals';
+import tsParser from '@typescript-eslint/parser';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import js from '@eslint/js';
+import { FlatCompat } from '@eslint/eslintrc';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all,
+});
+
+export default [
+  {
+    ignores: ['**/.eslintrc.js'],
+  },
+  ...compat.extends(
+    'plugin:@typescript-eslint/recommended-type-checked',
+    'plugin:prettier/recommended',
+  ),
+  {
+    plugins: {
+      '@typescript-eslint': typescriptEslintEslintPlugin,
+    },
+
+    languageOptions: {
+      globals: {
+        ...globals.node,
+        ...globals.jest,
+      },
+
+      parser: tsParser,
+      ecmaVersion: 5,
+      sourceType: 'module',
+
+      parserOptions: {
+        project: 'tsconfig.json',
+        tsconfigRootDir: '/home/legonzaur/Documents/code/concept/back',
+      },
+    },
+
+    rules: {
+      '@typescript-eslint/interface-name-prefix': 'off',
+      '@typescript-eslint/explicit-function-return-type': 'off',
+      '@typescript-eslint/explicit-module-boundary-types': 'off',
+      '@typescript-eslint/no-explicit-any': 'off',
+      'require-await': 'off',
+      '@typescript-eslint/require-await': 'error',
+      '@typescript-eslint/no-unused-vars': [
+        'warn',
+        {
+          argsIgnorePattern: '^_',
+          varsIgnorePattern: '^_',
+          caughtErrorsIgnorePattern: '^_',
+        },
+      ],
+    },
+  },
+];
diff --git a/middleware/auth.global.ts b/middleware/auth.global.ts
index aab8c89..36f5e08 100644
--- a/middleware/auth.global.ts
+++ b/middleware/auth.global.ts
@@ -1,4 +1,4 @@
-const validPaths = ["/", "/rules", "/test"];
+const validPaths = ["/", "/rules", "/test", "/words"];
 
 export default defineNuxtRouteMiddleware(async (to, from) => {
   const config = useRuntimeConfig();
diff --git a/netcode/index.ts b/netcode/index.ts
new file mode 100644
index 0000000..3e3a046
--- /dev/null
+++ b/netcode/index.ts
@@ -0,0 +1,8 @@
+export function subscribe(endpoint: string) {
+    const config = useRuntimeConfig();
+    const evtSource = new EventSource(config.public.endpoint + endpoint, {
+        withCredentials: true,
+    });
+
+    return evtSource;
+}
\ No newline at end of file
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 6dda248..5354b14 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,8 +1,10 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
+import 'reflect-metadata';
+
 export default defineNuxtConfig({
   compatibilityDate: '2024-11-01',
-  ssr: true,
   devtools: { enabled: true },
+
   runtimeConfig: {
     public: {
       endpoint: "https://playtest.legonzaur.fr/api", // can be overridden by NUXT_PUBLIC_ENDPOINT environment variable
@@ -10,10 +12,13 @@ export default defineNuxtConfig({
       devMode: false,
     },
   },
+
   nitro: {
     prerender: {
       routes: ["/login", "/"],
       crawlLinks: true,
     },
   },
-})
+
+  modules: ["@pinia/nuxt"],
+})
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 4852a19..e9a85d7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,8 +7,10 @@
       "name": "nuxt-app",
       "hasInstallScript": true,
       "dependencies": {
+        "@pinia/nuxt": "^0.9.0",
         "class-transformer": "^0.5.1",
         "nuxt": "^3.15.0",
+        "pinia": "^2.3.0",
         "reflect-metadata": "^0.2.2",
         "vue": "latest",
         "vue-router": "latest"
@@ -1827,6 +1829,21 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/@pinia/nuxt": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@pinia/nuxt/-/nuxt-0.9.0.tgz",
+      "integrity": "sha512-2yeRo7LeyCF68AbNeL3xu2h6uw0617RkcsYxmA8DJM0R0PMdz5wQHnc44KeENQxR/Mrq8T910XVT6buosqsjBQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@nuxt/kit": "^3.9.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "pinia": "^2.3.0"
+      }
+    },
     "node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -6474,6 +6491,28 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pinia": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.3.0.tgz",
+      "integrity": "sha512-ohZj3jla0LL0OH5PlLTDMzqKiVw2XARmC1XYLdLWIPBMdhDW/123ZWr4zVAhtJm+aoSkFa13pYXskAvAscIkhQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-api": "^6.6.3",
+        "vue-demi": "^0.14.10"
+      },
+      "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/pkg-types": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.3.0.tgz",
@@ -9431,6 +9470,32 @@
         "ufo": "^1.5.4"
       }
     },
+    "node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "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/vue-devtools-stub": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/vue-devtools-stub/-/vue-devtools-stub-0.1.0.tgz",
diff --git a/package.json b/package.json
index cf75e17..3c7a628 100644
--- a/package.json
+++ b/package.json
@@ -10,8 +10,10 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
+    "@pinia/nuxt": "^0.9.0",
     "class-transformer": "^0.5.1",
     "nuxt": "^3.15.0",
+    "pinia": "^2.3.0",
     "reflect-metadata": "^0.2.2",
     "vue": "latest",
     "vue-router": "latest"
diff --git a/pages/index.vue b/pages/index.vue
index 5566a7a..c22f420 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,3 +1,7 @@
+<script setup lang="ts">
+
+</script>
+
 <template>
     Hello
-</template>
\ No newline at end of file
+</template>
diff --git a/pages/login.vue b/pages/login.vue
index 5566a7a..ccdba11 100644
--- a/pages/login.vue
+++ b/pages/login.vue
@@ -1,3 +1,3 @@
 <template>
-    Hello
+    Login
 </template>
\ No newline at end of file
diff --git a/pages/words.vue b/pages/words.vue
new file mode 100644
index 0000000..d635d30
--- /dev/null
+++ b/pages/words.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+
+import { useWordStore } from '~/store/word.store';
+
+const wordStore = useWordStore();
+
+await wordStore.fetchWordList()
+</script>
+
+<template>
+  <div id="words">
+    <div class="header">
+      <span>Word</span>
+      <span>Status</span>
+      <span>Submitter</span>
+    </div>
+    <Word v-for="word in wordStore.words" :word="word" />
+  </div>
+
+</template>
+
+<style lang="css" scoped>
+div#words {
+  display: grid;
+  grid-template-columns: 1fr;
+}
+
+div.header {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  align-items: center;
+}
+</style>
\ No newline at end of file
diff --git a/service/user.service.ts b/service/user.service.ts
new file mode 100644
index 0000000..97fffea
--- /dev/null
+++ b/service/user.service.ts
@@ -0,0 +1,15 @@
+import { UserResponseDTO } from "~/netcode/events/dto/userresponse.dto";
+
+export async function fetchUser(id: string) {
+    const config = useRuntimeConfig();
+    const data = await useFetch<UserResponseDTO>(config.public.endpoint + `/users/` + id, {
+        credentials: "include",
+    }).then(_d => {
+        if (_d.data.value) {
+            _d.data.value = new UserResponseDTO(_d.data.value)
+        }
+        return _d
+    })
+
+    return data
+}
diff --git a/store/user.store.ts b/store/user.store.ts
new file mode 100644
index 0000000..82ca0fc
--- /dev/null
+++ b/store/user.store.ts
@@ -0,0 +1,40 @@
+import { defineStore } from "pinia";
+import { UserResponseDTO } from "~/netcode/events/dto/userresponse.dto";
+
+export const useUserStore = defineStore("user", {
+    state: () => ({
+        users: {} as Record<string, UserResponseDTO>,
+        self: null as UserResponseDTO | null,
+        has_contacted: false
+    }),
+    actions: {
+        async fetchUser(id: string) {
+            if (id in this.users) {
+                return this.users[id]
+            }
+            const config = useRuntimeConfig();
+            const data = await useFetch<UserResponseDTO>(config.public.endpoint + `/users/` + id, {
+                credentials: "include",
+                immediate: true
+            })
+            if (data.data.value) {
+                this.users[data.data.value.id] = data.data.value
+            }
+            return data.data.value
+        },
+        async whoami() {
+            const config = useRuntimeConfig();
+            const req = await useFetch<UserResponseDTO>(config.public.endpoint + "/whoami", {
+                credentials: "include",
+                server: false,
+                immediate: true,
+                onResponse: (data) => {
+                    this.self = data.response._data
+                    this.has_contacted = true
+                },
+                lazy: true
+            })
+            return req;
+        }
+    },
+});
\ No newline at end of file
diff --git a/store/word.store.ts b/store/word.store.ts
new file mode 100644
index 0000000..34bb2e6
--- /dev/null
+++ b/store/word.store.ts
@@ -0,0 +1,39 @@
+import { defineStore } from "pinia";
+import { WordResponseDTO } from "~/netcode/events/dto/wordresponse.dto";
+
+export const useWordStore = defineStore("word", {
+    state: () => ({
+        words: {} as Record<string, WordResponseDTO>,
+    }),
+    actions: {
+        async fetchWordList() {
+            const config = useRuntimeConfig();
+            const data = await useFetch<WordResponseDTO[]>(config.public.endpoint + `/words/all`, {
+                credentials: "include",
+            })
+            if (data.data.value && !data.error.value) {
+
+                for (const word of data.data.value) {
+                    this.words[word.id] = word
+                }
+            }
+            return data
+        },
+        async enableWord(id: number) {
+            const config = useRuntimeConfig();
+            const data = await $fetch<WordResponseDTO>(config.public.endpoint + `/words/` + id + "/enable", {
+                credentials: "include",
+                method: "PUT"
+            })
+            return data
+        },
+        async disableWord(id: number) {
+            const config = useRuntimeConfig();
+            const data = await $fetch<WordResponseDTO>(config.public.endpoint + `/words/` + id + "/disable", {
+                credentials: "include",
+                method: "PUT"
+            })
+            return data
+        }
+    },
+});
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index a746f2a..6301ea1 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,4 +1,9 @@
 {
   // https://nuxt.com/docs/guide/concepts/typescript
-  "extends": "./.nuxt/tsconfig.json"
-}
+  "extends": "./.nuxt/tsconfig.json",
+  "compilerOptions": {
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "strictPropertyInitialization": false,
+  }
+}
\ No newline at end of file