chore(primevue): Upgrading to primevue module and updating dependencies

Author: Benoit Ngo

apps/front/nuxt.config.ts

@@ -3,12 +3,15 @@ import svgLoader from "vite-svg-loader";
 
 export default defineNuxtConfig({
   srcDir: "src/",
-  modules: ["@pinia/nuxt", "@nuxtjs/i18n"],
+  modules: ["@pinia/nuxt", "@nuxtjs/i18n", "nuxt-primevue"],
   runtimeConfig: {
     API_URL: process.env.API_URL || "",
   },
+  primevue: {
+    /* Options */
+  },
   i18n: {
-    vueI18n: "./modules_config/nuxt/i18n.config.ts", // if you are using custom path, default
+    vueI18n: "./modules_config/nuxt/i18n.config.ts",
   },
   app: {
     head: {

apps/front/package.json

@@ -1,5 +1,6 @@
 {
   "private": true,
+
   "scripts": {
     "build": "nuxt build",
     "dev": "rm -rf /tmp/nitro/worker-* && nuxt dev | pino-pretty -c",
@@ -17,28 +18,27 @@
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-prettier": "^4.2.1",
     "pino-pretty": "^10.0.0",
-    "typescript": "^5.0.4",
+    "typescript": "~5.1.6",
+    "nuxt-primevue": "^0.0.3",
     "vue-tsc": "^1.6.5"
   },
-
-
   "dependencies": {
     "@nuxtjs/i18n": "^8.0.0-rc.5",
     "@pinia/nuxt": "^0.4.11",
     "defu": "^6.1.2",
     "h3": "^1.8.2",
     "nitropack": "^2.4.1",
-    "nuxt": "3.7.4",
+    "nuxt": "3.8.0",
     "ofetch": "^1.3.3",
     "ohash": "^1.1.2",
-    "pinia": "^2.1.6",
+    "pinia": "^2.1.7",
     "pino": "^8.8.0",
     "prettier": "^2.8.8",
     "primeflex": "^3.3.1",
     "primeicons": "^6.0.1",
-    "primevue": "^3.35.0",
+    "primevue": "^3.37.0",
     "sass": "^1.57.1",
     "vite-svg-loader": "^4.0.0",
-    "vue": "^3.3.4"
+    "vue": "^3.3.6"
   }
 }

apps/front/src/components/layout/menu/AppMenu.vue

@@ -1,5 +1,27 @@
 <template>
-  <TieredMenu :model="items" class="h-screen sticky w-full"> </TieredMenu>
+  <TieredMenu :model="items" class="h-screen sticky w-full">
+    <template #item="{ label, item, props, hasSubmenu }">
+      <NuxtLink v-if="item.route" v-slot="routerProps" :to="item.route" custom>
+        <a
+          :href="routerProps.href"
+          v-bind="props.action"
+          @click="routerProps.navigate"
+        >
+          <span v-bind="props.icon" />
+          <span v-bind="props.label">{{ label }}</span>
+        </a>
+      </NuxtLink>
+      <a v-else :href="item.url" :target="item.target" v-bind="props.action">
+        <span v-bind="props.icon" />
+        <span v-bind="props.label">{{ label }}</span>
+        <span
+          v-if="hasSubmenu"
+          class="pi pi-fw pi-angle-right"
+          v-bind="props.submenuicon"
+        />
+      </a>
+    </template>
+  </TieredMenu>
 </template>
 <script setup lang="ts">
 import useAuthUser from "~/store/auth";
@@ -11,22 +33,22 @@ const items = computed(() => [
   {
     label: t("components.layout.menu.appMenu.users"),
     icon: "pi pi-fw pi-file",
-    to: "/users",
+    route: "/users",
   },
   {
     label: t("components.layout.menu.appMenu.page1"),
     icon: "pi pi-fw pi-pencil",
-    to: "/demo/page1",
+    route: "/demo/page1",
   },
   {
     label: t("components.layout.menu.appMenu.page2"),
     icon: "pi pi-fw pi-pencil",
-    to: "/demo/page2",
+    route: "/demo/page2",
   },
   {
     label: t("components.layout.menu.appMenu.page3"),
     icon: "pi pi-fw pi-pencil",
-    to: "/demo/page3",
+    route: "/demo/page3",
   },
   {
     separator: true,

apps/front/src/components/user/UserForm.vue

@@ -32,7 +32,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { User } from "~/types/User";
+import type { User } from "~/types/User";
 
 defineProps<
   Omit<User, "id"> & {
@@ -41,7 +41,6 @@ defineProps<
     passwordConfirm: string;
   }
 >();
-
 interface EventEmitter {
   (e: "update:email", email: string): void;
   (e: "update:password", password: string): void;

apps/front/src/composables/api/healthCheck/useHealthCheckFetch.ts

@@ -1,5 +1,5 @@
 import { FetchError } from "ofetch";
-import { AsyncData } from "#app";
+import type { AsyncData } from "#app";
 import useAppFetch from "~/composables/useAppFetch";
 
 interface LoggedHealthCheckResponse {

apps/front/src/composables/api/user/useCreateUser.ts

@@ -1,6 +1,6 @@
 import { POST } from "~/constants/http";
-import { User } from "~/types/User";
-import { Ref } from "vue";
+import type { User } from "~/types/User";
+import type { Ref } from "vue";
 import useBasicError from "~/composables/useBasicError";
 
 export default function useCreateUser(): {

apps/front/src/composables/api/user/useDeleteUser.ts

@@ -1,4 +1,4 @@
-import { User } from "~/types/User";
+import type { User } from "~/types/User";
 import { DELETE } from "~/constants/http";
 import useBasicError from "~/composables/useBasicError";
 

apps/front/src/composables/api/user/useGetUser.ts

@@ -1,5 +1,5 @@
 import { GET } from "~/constants/http";
-import { User } from "~/types/User";
+import type { User } from "~/types/User";
 import useAppFetch from "~/composables/useAppFetch";
 
 export default async function useGetUser(userId: string) {

apps/front/src/composables/api/user/useListUsers.ts

@@ -1,4 +1,4 @@
-import { User } from "~/types/User";
+import type { User } from "~/types/User";
 import { GET } from "~/constants/http";
 import useAppFetch from "~/composables/useAppFetch";
 

apps/front/src/composables/api/user/useUpdateUser.ts

@@ -1,5 +1,5 @@
 import { PUT } from "~/constants/http";
-import { User, UserId } from "~/types/User";
+import type { User, UserId } from "~/types/User";
 import useBasicError from "~/composables/useBasicError";
 
 type UserInput = Omit<User, "id">;