upgrade dependencies, update config, add mdi fonts

app/layouts/default.vue

@@ -1,7 +1,69 @@
 <template>
   <v-app>
+    <v-navigation-drawer v-model="drawer" app>
+      <v-list>
+        <v-list-item
+          v-for="(item, i) in items"
+          :key="i"
+          :to="item.to"
+          router
+          exact
+        >
+          <v-list-item-title>
+            {{ item.title }}
+          </v-list-item-title>
+        </v-list-item>
+      </v-list>
+    </v-navigation-drawer>
+
+    <v-app-bar app>
+      <v-app-bar-nav-icon @click.stop="drawer = !drawer" />
+
+      <v-toolbar-title>
+        {{ title }}
+      </v-toolbar-title>
+
+      <v-spacer />
+
+      <v-btn :icon="true" @click="toggleTheme">
+        <v-icon>{{ isDark ? 'mdi-weather-sunny' : 'mdi-weather-night' }}</v-icon>
+      </v-btn>
+    </v-app-bar>
+
+    <v-main>
+      <v-container>
+        <slot />
+      </v-container>
+    </v-main>
   </v-app>
 </template>
 
 <script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useTheme } from 'vuetify'
+
+const theme = useTheme()
+const drawer = ref(false)
+const isDark = computed(() => theme.global.current.value.dark)
+
+const title = ref('SNC Demo')
+
+const items = [
+  {
+    title: 'Authors',
+    to: '/'
+  },
+  {
+    title: 'Songs',
+    to: '/songs'
+  },
+  {
+    title: 'About',
+    to: '/about'
+  }
+]
+
+const toggleTheme = () => {
+  theme.global.name.value = isDark.value ? 'light' : 'dark'
+}
 </script>

app/nuxt.config.js

@@ -1,21 +1,23 @@
-export default {
+export default defineNuxtConfig({
   ssr: true,
   // Global page headers: https://go.nuxtjs.dev/config-head
-  head: {
-    titleTemplate: '%s - App',
-    title: 'app',
-    htmlAttrs: {
-      lang: 'en'
+  app: {
+    head: {
+      titleTemplate: '%s - App',
+      title: 'app',
+      htmlAttrs: {
+        lang: 'en'
+      },
+      meta: [
+        {charset: 'utf-8'},
+        {name: 'viewport', content: 'width=device-width, initial-scale=1'},
+        {hid: 'description', name: 'description', content: ''},
+        {name: 'format-detection', content: 'telephone=no'}
+      ],
+      link: [
+        {rel: 'icon', type: 'image/x-icon', href: '/favicon.ico'}
+      ]
     },
-    meta: [
-      { charset: 'utf-8' },
-      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
-      { hid: 'description', name: 'description', content: '' },
-      { name: 'format-detection', content: 'telephone=no' }
-    ],
-    link: [
-      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
-    ]
   },
 
   typescript: {
@@ -24,11 +26,12 @@ export default {
 
   // Global CSS: https://go.nuxtjs.dev/config-css
   css: [
+    'vuetify/styles'
   ],
 
-  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
-  plugins: [
-  ],
+  build: {
+    transpile: ['vuetify']
+  },
 
   // Modules: https://go.nuxtjs.dev/config-modules
   modules: [
@@ -49,7 +52,6 @@ export default {
       noExternal: ['vuetify']
     },
     server: {
-      // @ts-expect-error J'ignore pourquoi cette erreur TS se produit, cette propriété est valide
       port: 443,
       hmr: {
         protocol: 'wss',
@@ -59,4 +61,4 @@ export default {
   },
 
   compatibilityDate: '2025-02-28'
-}
+})

app/package.json

@@ -13,10 +13,11 @@
     "test": "jest"
   },
   "dependencies": {
-    "@nuxtjs/i18n": "^8.3.1",
-    "nuxt": "^3.15.4",
-    "vite-plugin-vuetify": "^1.0.2",
-    "vuetify": "3.6.14"
+    "@mdi/font": "^7.4.47",
+    "@nuxtjs/i18n": "^9.5.5",
+    "nuxt": "^3.17.5",
+    "vite-plugin-vuetify": "^2.1.1",
+    "vuetify": "3.8.8"
   },
   "devDependencies": {
     "@nuxtjs/eslint-config": "^12.0.0",

app/pages/about.vue

@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <h1 class="text-center mb-6">About</h1>
+    <v-card class="pa-4">
+      <p class="text-center">
+        This is a demo application built with Symfony 7 + Nuxt.js 3.
+      </p>
+    </v-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+useHead({
+  title: 'About'
+})
+</script>

app/pages/index.vue

@@ -1,5 +1,59 @@
 <template>
+  <div>
+    <h1 class="text-center mb-6">Authors</h1>
+    <v-card v-if="pending" class="text-center pa-4">
+      <v-progress-circular indeterminate />
+      <div class="mt-2">Loading authors...</div>
+    </v-card>
+    <v-card v-else-if="error" class="text-center pa-4 error--text">
+      <v-icon color="error" large>mdi-alert-circle</v-icon>
+      <div class="mt-2">Error loading authors: {{ error }}</div>
+    </v-card>
+    <v-card v-else>
+      <v-list>
+        <v-list-item v-for="author in authors" :key="author.id">
+          <v-list-item-title>{{ author.name }}</v-list-item-title>
+        </v-list-item>
+        <v-list-item v-if="authors.length === 0">
+          <v-list-item-title class="text-center">No authors found</v-list-item-title>
+        </v-list-item>
+      </v-list>
+    </v-card>
+  </div>
 </template>
 
 <script setup lang="ts">
+import { ref, onMounted } from 'vue'
+
+// Set page title
+useHead({
+  title: 'Authors'
+})
+
+// Define types
+interface Author {
+  id: number
+  name: string
+}
+
+// Fetch authors from API
+const authors = ref<Author[]>([])
+const error = ref<string | null>(null)
+const pending = ref(true)
+
+onMounted(async () => {
+  try {
+    const response = await fetch('https://local.api.snc-demo.fr/api/authors')
+    if (!response.ok) {
+      throw new Error(`HTTP error! Status: ${response.status}`)
+    }
+    const data = await response.json()
+    authors.value = data['hydra:member'] || []
+  } catch (err) {
+    error.value = err instanceof Error ? err.message : 'Unknown error'
+    console.error('Error fetching authors:', err)
+  } finally {
+    pending.value = false
+  }
+})
 </script>

app/pages/songs.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <h1 class="text-center mb-6">Songs</h1>
+    <v-card class="pa-4">
+      <p class="text-center">This page is under construction.</p>
+    </v-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+// Set page title
+useHead({
+  title: 'Songs'
+})
+</script>

app/plugins/vuetify.ts

@@ -0,0 +1,48 @@
+import { createVuetify } from 'vuetify'
+import * as components from 'vuetify/components'
+import * as directives from 'vuetify/directives'
+import 'vuetify/styles'
+import { mdi } from 'vuetify/iconsets/mdi'
+import '@mdi/font/css/materialdesignicons.css'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  const vuetify = createVuetify({
+    ssr: true,
+    components,
+    directives,
+    theme: {
+      defaultTheme: 'light',
+      themes: {
+        light: {
+          colors: {
+            primary: '#1976D2',
+            secondary: '#424242',
+            accent: '#82B1FF',
+            error: '#FF5252',
+            info: '#2196F3',
+            success: '#4CAF50',
+            warning: '#FFC107'
+          }
+        },
+        dark: {
+          colors: {
+            primary: '#2196F3',
+            secondary: '#424242',
+            accent: '#FF4081',
+            error: '#FF5252',
+            info: '#2196F3',
+            success: '#4CAF50',
+            warning: '#FB8C00'
+          }
+        }
+      }
+    },
+    icons: {
+      defaultSet: 'mdi',
+      sets: {
+        mdi
+      }
+    }
+  })
+  nuxtApp.vueApp.use(vuetify)
+})