Hydration mismatche

   <ClientOnly>
     <UAccordion>
       <!-- Your accordion items -->
     </UAccordion>
   </ClientOnly>
   

   <ClientOnly>
     <UAccordion>
       <!-- Your accordion items -->
     </UAccordion>
   </ClientOnly>
   

   export default defineNuxtConfig({
     routeRules: {
       '/your-problematic-route': { ssr: false }
     }
   });
   

   export default defineNuxtConfig({
     routeRules: {
       '/your-problematic-route': { ssr: false }
     }
   });
   

<script setup>
import { useId } from 'vue'
// ... other imports and code
</script>

<script setup>
import { useId } from 'vue'
// ... other imports and code
</script>

<template>
  <UAccordion
    class="w-11/12 mx-auto mt-10 laptop-m:w-4/6 bg-mgp-cyan rounded-xl"
    variant="ghost"
    color="blue"
    :items="faqStore.faqs"
    :ui="{ item: { color: 'text-mgp-slate-500' } }"
  >
    <template #default="{ item, index, open }">
      <UButton
        :id="useId()"
        variant="ghost"
        :class="[
          index === 0 ? 'rounded-tl-xl rounded-tr-xl' : '',
          index === faqStore.faqs.length - 1 ? 'rounded-bl-xl rounded-br-xl border-b-0' : '',
          !open && index !== faqStore.faqs.length - 1 ? 'border-b border-gray-200' : ''
        ]"
        class="flex justify-between p-4"
        :ui="{ rounded: 'rounded-none', padding: { 'mobile-md': 'p-3' } }"
      >
        <span class="mt-2 text-lg font-semibold truncate text-mgp-slate-500">
          {{ item.title }}
        </span>
<template #trailing>
          <div class="flex justify-end text-white rounded-full bg-mgp-dark-blue">
            <UIcon
              size="25"
              :name="open ? 'i-heroicons-minus-20-solid' : 'i-heroicons-plus-20-solid'"
              class="transition-transform duration-200 transform ms-auto text-mgp-blue"
            />
          </div>
        </template>
      </UButton>
    </template>

    <template #item="{ item }">
      <p :id="useId()" class="p-4 text-base text-gray-900 dark:text-white">
        {{ item.description }}
      </p>
    </template>
  </UAccordion>
</template>

<template>
  <UAccordion
    class="w-11/12 mx-auto mt-10 laptop-m:w-4/6 bg-mgp-cyan rounded-xl"
    variant="ghost"
    color="blue"
    :items="faqStore.faqs"
    :ui="{ item: { color: 'text-mgp-slate-500' } }"
  >
    <template #default="{ item, index, open }">
      <UButton
        :id="useId()"
        variant="ghost"
        :class="[
          index === 0 ? 'rounded-tl-xl rounded-tr-xl' : '',
          index === faqStore.faqs.length - 1 ? 'rounded-bl-xl rounded-br-xl border-b-0' : '',
          !open && index !== faqStore.faqs.length - 1 ? 'border-b border-gray-200' : ''
        ]"
        class="flex justify-between p-4"
        :ui="{ rounded: 'rounded-none', padding: { 'mobile-md': 'p-3' } }"
      >
        <span class="mt-2 text-lg font-semibold truncate text-mgp-slate-500">
          {{ item.title }}
        </span>
<template #trailing>
          <div class="flex justify-end text-white rounded-full bg-mgp-dark-blue">
            <UIcon
              size="25"
              :name="open ? 'i-heroicons-minus-20-solid' : 'i-heroicons-plus-20-solid'"
              class="transition-transform duration-200 transform ms-auto text-mgp-blue"
            />
          </div>
        </template>
      </UButton>
    </template>

    <template #item="{ item }">
      <p :id="useId()" class="p-4 text-base text-gray-900 dark:text-white">
        {{ item.description }}
      </p>
    </template>
  </UAccordion>
</template>

   <ClientOnly>
     <UAccordion
       class="w-11/12 mx-auto mt-10 laptop-m:w-4/6 bg-mgp-cyan rounded-xl"
       variant="ghost"
       color="blue"
       :items="faqStore.faqs"
       :ui="{ item: { color: 'text-mgp-slate-500' } }"
     >
       <!-- Le reste de votre code d'accordéon -->
     </UAccordion>
   </ClientOnly>
   

   <ClientOnly>
     <UAccordion
       class="w-11/12 mx-auto mt-10 laptop-m:w-4/6 bg-mgp-cyan rounded-xl"
       variant="ghost"
       color="blue"
       :items="faqStore.faqs"
       :ui="{ item: { color: 'text-mgp-slate-500' } }"
     >
       <!-- Le reste de votre code d'accordéon -->
     </UAccordion>
   </ClientOnly>
   

   export default defineNuxtConfig({
     routeRules: {
       '/votre-route-problematique': { ssr: false }
     }
   });
   

   export default defineNuxtConfig({
     routeRules: {
       '/votre-route-problematique': { ssr: false }
     }
   });
   

   <ClientOnly>
     <p class="tablet:p-4 p-2 flex justify-between">
       <span class="tablet:text-base text-xs">Envoyer un colis</span>
       <URadio
         v-model="selectedOption"
         name="notifications"
         value="sendPackage"
         :ui="{ rounded: 'rounded-full' }"
       />
     </p>
   </ClientOnly>
   

   <ClientOnly>
     <p class="tablet:p-4 p-2 flex justify-between">
       <span class="tablet:text-base text-xs">Envoyer un colis</span>
       <URadio
         v-model="selectedOption"
         name="notifications"
         value="sendPackage"
         :ui="{ rounded: 'rounded-full' }"
       />
     </p>
   </ClientOnly>
   

   <script setup>
   import { ref } from 'vue'
   
   const selectedOption = ref('sendPackage')
   </script>
   

   <script setup>
   import { ref } from 'vue'
   
   const selectedOption = ref('sendPackage')
   </script>
   

   <script setup>
   import { useId } from 'vue'
   
   const radioId = useId()
   </script>

   <template>
     <URadio
       :id="radioId"
       v-model="selectedOption"
       name="notifications"
       value="sendPackage"
       :ui="{ rounded: 'rounded-full' }"
     />
   </template>
   

   <script setup>
   import { useId } from 'vue'
   
   const radioId = useId()
   </script>

   <template>
     <URadio
       :id="radioId"
       v-model="selectedOption"
       name="notifications"
       value="sendPackage"
       :ui="{ rounded: 'rounded-full' }"
     />
   </template>
   

   export default defineNuxtConfig({
     routeRules: {
       '/auth/register': { ssr: false }
     }
   })
   

   export default defineNuxtConfig({
     routeRules: {
       '/auth/register': { ssr: false }
     }
   })
   

export default defineNuxtConfig({
  nitro: {
    experimental: {
      websocket: true
    }
  }
})

export default defineNuxtConfig({
  nitro: {
    experimental: {
      websocket: true
    }
  }
})

export default defineWebSocketHandler({
  open(peer) {
    console.log('Connexion ouverte')
    peer.send('Bienvenue sur le serveur WebSocket!')
  },
  message(peer, message) {
    console.log('Message reçu:', message)
    peer.send(`Vous avez dit: ${message}`)
  },
  close(peer) {
    console.log('Connexion fermée')
  }
})

export default defineWebSocketHandler({
  open(peer) {
    console.log('Connexion ouverte')
    peer.send('Bienvenue sur le serveur WebSocket!')
  },
  message(peer, message) {
    console.log('Message reçu:', message)
    peer.send(`Vous avez dit: ${message}`)
  },
  close(peer) {
    console.log('Connexion fermée')
  }
})

<template>
  <div>
    <h2>WebSocket Demo</h2>
    <ul>
      <li v-for="(message, index) in messages" :key="index">{{ message }}</li>
    </ul>
    <input v-model="inputMessage" @keyup.enter="sendMessage" placeholder="Entrez un message">
    <button @click="sendMessage">Envoyer</button>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const messages = ref([])
const inputMessage = ref('')
let ws
const connectWebSocket = () => {
  const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
  ws = new WebSocket(`${protocol}//${window.location.host}/_ws`)

  ws.onopen = () => {
    messages.value.push('Connecté au serveur WebSocket')
  }

  ws.onmessage = (event) => {
    messages.value.push(`Reçu: ${event.data}`)
  }

  ws.onclose = () => {
    messages.value.push('Déconnecté du serveur WebSocket')
  }
}

const sendMessage = () => {
  if (inputMessage.value && ws.readyState === WebSocket.OPEN) {
    ws.send(inputMessage.value)
    inputMessage.value = ''
  }
}

onMounted(() => {
  connectWebSocket()
})

onUnmounted(() => {
  if (ws) ws.close()
})
</script>

<template>
  <div>
    <h2>WebSocket Demo</h2>
    <ul>
      <li v-for="(message, index) in messages" :key="index">{{ message }}</li>
    </ul>
    <input v-model="inputMessage" @keyup.enter="sendMessage" placeholder="Entrez un message">
    <button @click="sendMessage">Envoyer</button>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const messages = ref([])
const inputMessage = ref('')
let ws
const connectWebSocket = () => {
  const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
  ws = new WebSocket(`${protocol}//${window.location.host}/_ws`)

  ws.onopen = () => {
    messages.value.push('Connecté au serveur WebSocket')
  }

  ws.onmessage = (event) => {
    messages.value.push(`Reçu: ${event.data}`)
  }

  ws.onclose = () => {
    messages.value.push('Déconnecté du serveur WebSocket')
  }
}

const sendMessage = () => {
  if (inputMessage.value && ws.readyState === WebSocket.OPEN) {
    ws.send(inputMessage.value)
    inputMessage.value = ''
  }
}

onMounted(() => {
  connectWebSocket()
})

onUnmounted(() => {
  if (ws) ws.close()
})
</script>

<template>
  <div>
    <h1>Page d'accueil</h1>
    <WebSocketDemo />
  </div>
</template>

<script setup>
import WebSocketDemo from '~/components/WebSocketDemo.vue'
</script>

<template>
  <div>
    <h1>Page d'accueil</h1>
    <WebSocketDemo />
  </div>
</template>

<script setup>
import WebSocketDemo from '~/components/WebSocketDemo.vue'
</script>

const connectWebSocket = () => {
    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
    ws = new WebSocket(`${protocol}//${window.location.host}/_ws`)
    // ...
}

const connectWebSocket = () => {
    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
    ws = new WebSocket(`${protocol}//${window.location.host}/_ws`)
    // ...
}

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useNuxtApp } from '#app'

const { $fetch } = useNuxtApp()
const messages = ref([])
const inputMessage = ref('')
let ws

const connectWebSocket = () => {
    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
    ws = new WebSocket(`${protocol}//${window.location.host}/_ws`)

    ws.onopen = () => {
        messages.value.push('Connecté au serveur WebSocket')
    }

    ws.onmessage = (event) => {
        messages.value.push(`${event.data}`)
    }

    ws.onclose = () => {
        messages.value.push('Déconnecté du serveur WebSocket')
    }
}
const sendMessage = () => {
    if (inputMessage.value && ws.readyState === WebSocket.OPEN) {
        ws.send(inputMessage.value)
        inputMessage.value = ''
    }
}

onMounted(() => {
    connectWebSocket()
})

onUnmounted(() => {
    if (ws) ws.close()
})
</script>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useNuxtApp } from '#app'

const { $fetch } = useNuxtApp()
const messages = ref([])
const inputMessage = ref('')
let ws

const connectWebSocket = () => {
    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
    ws = new WebSocket(`${protocol}//${window.location.host}/_ws`)

    ws.onopen = () => {
        messages.value.push('Connecté au serveur WebSocket')
    }

    ws.onmessage = (event) => {
        messages.value.push(`${event.data}`)
    }

    ws.onclose = () => {
        messages.value.push('Déconnecté du serveur WebSocket')
    }
}
const sendMessage = () => {
    if (inputMessage.value && ws.readyState === WebSocket.OPEN) {
        ws.send(inputMessage.value)
        inputMessage.value = ''
    }
}

onMounted(() => {
    connectWebSocket()
})

onUnmounted(() => {
    if (ws) ws.close()
})
</script>

ws.onerror = (error) => {
    console.error('Erreur WebSocket:', error)
    messages.value.push('Erreur de connexion WebSocket')
}

ws.onerror = (error) => {
    console.error('Erreur WebSocket:', error)
    messages.value.push('Erreur de connexion WebSocket')
}

const connectWebSocket = () => {
    // ... (code existant)

    ws.onclose = () => {
        messages.value.push('Déconnecté du serveur WebSocket')
        setTimeout(connectWebSocket, 5000) // Tentative de reconnexion après 5 secondes
    }
}

const connectWebSocket = () => {
    // ... (code existant)

    ws.onclose = () => {
        messages.value.push('Déconnecté du serveur WebSocket')
        setTimeout(connectWebSocket, 5000) // Tentative de reconnexion après 5 secondes
    }
}

<template>
  <ClientOnly>
    <WebSocketDemo />
  </ClientOnly>
</template>

<template>
  <ClientOnly>
    <WebSocketDemo />
  </ClientOnly>
</template>

   export default defineEventHandler((event) => {
     if (event.node.req.url === '/api/ws') {
       return defineWebSocketHandler({
         // Votre logique WebSocket ici
       })(event)
     }
   })
   

   export default defineEventHandler((event) => {
     if (event.node.req.url === '/api/ws') {
       return defineWebSocketHandler({
         // Votre logique WebSocket ici
       })(event)
     }
   })
   

   const connectWebSocket = () => {
     const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
     ws = new WebSocket(`${protocol}//${window.location.host}/api/ws`)
     // ...
   }
   

   const connectWebSocket = () => {
     const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
     ws = new WebSocket(`${protocol}//${window.location.host}/api/ws`)
     // ...
   }
   

   const connectWebSocket = () => {
     // ... (code existant)
const pingInterval = setInterval(() => {
       if (ws.readyState === WebSocket.OPEN) {
         ws.send('ping')
       }
     }, 30000) // Envoie un ping toutes les 30 secondes

     ws.onclose = () => {
       clearInterval(pingInterval)
       messages.value.push('Déconnecté du serveur WebSocket')
       setTimeout(connectWebSocket, 5000)
     }
   }
   

   const connectWebSocket = () => {
     // ... (code existant)
const pingInterval = setInterval(() => {
       if (ws.readyState === WebSocket.OPEN) {
         ws.send('ping')
       }
     }, 30000) // Envoie un ping toutes les 30 secondes

     ws.onclose = () => {
       clearInterval(pingInterval)
       messages.value.push('Déconnecté du serveur WebSocket')
       setTimeout(connectWebSocket, 5000)
     }
   }
   

   export default defineWebSocketHandler({
     open(peer) {
       console.log('Connexion WebSocket ouverte', peer)
     },
     close(peer) {
       console.log('Connexion WebSocket fermée', peer)
     },
     // ...
   })
   

   export default defineWebSocketHandler({
     open(peer) {
       console.log('Connexion WebSocket ouverte', peer)
     },
     close(peer) {
       console.log('Connexion WebSocket fermée', peer)
     },
     // ...
   })
   

   server {
     # ... autres configurations ...

     location / {
       proxy_pass <http://localhost:3000;> # Supposons que votre app Nuxt tourne sur le port 3000
       proxy_http_version 1.1;
       proxy_set_header Upgrade $http_upgrade;
       proxy_set_header Connection 'upgrade';
       proxy_set_header Host $host;
       proxy_cache_bypass $http_upgrade;
     }
   }
   

   server {
     # ... autres configurations ...

     location / {
       proxy_pass <http://localhost:3000;> # Supposons que votre app Nuxt tourne sur le port 3000
       proxy_http_version 1.1;
       proxy_set_header Upgrade $http_upgrade;
       proxy_set_header Connection 'upgrade';
       proxy_set_header Host $host;
       proxy_cache_bypass $http_upgrade;
     }
   }
   

   export default defineNuxtConfig({
     nitro: {
       experimental: {
         websocket: true
       }
     }
   })
   

   export default defineNuxtConfig({
     nitro: {
       experimental: {
         websocket: true
       }
     }
   })
   

   export default defineWebSocketHandler({
     open(peer) {
       console.log('Connexion WebSocket ouverte', peer)
     },
     message(peer, message) {
       console.log('Message WebSocket reçu:', message)
     },
     close(peer) {
       console.log('Connexion WebSocket fermée', peer)
     }
   })
   

   export default defineWebSocketHandler({
     open(peer) {
       console.log('Connexion WebSocket ouverte', peer)
     },
     message(peer, message) {
       console.log('Message WebSocket reçu:', message)
     },
     close(peer) {
       console.log('Connexion WebSocket fermée', peer)
     }
   })
   

   <UButton
     @click="navigateTo('/auth/login')"
     size="xl"
     :ui="{ rounded: 'rounded-full' }"
     class="bg-[#E8F1FC] hover:bg-[#E8F1FC]/90 text-black"
     label="Se connecter"
   />
   

   <UButton
     @click="navigateTo('/auth/login')"
     size="xl"
     :ui="{ rounded: 'rounded-full' }"
     class="bg-[#E8F1FC] hover:bg-[#E8F1FC]/90 text-black"
     label="Se connecter"
   />
   

   export default defineAppConfig({
     ui: {
       button: {
         size: {
           '2xl': 'text-lg px-6 py-3',
           // Ajoutez d'autres tailles personnalisées si nécessaire
         }
       }
     }
   })
   

   export default defineAppConfig({
     ui: {
       button: {
         size: {
           '2xl': 'text-lg px-6 py-3',
           // Ajoutez d'autres tailles personnalisées si nécessaire
         }
       }
     }
   })
   

   import '@nuxt/ui'

   declare module '@nuxt/ui' {
     interface ButtonSize {
       '2xl': string
     }
   }
   

   import '@nuxt/ui'

   declare module '@nuxt/ui' {
     interface ButtonSize {
       '2xl': string
     }
   }
   

   <UButton
     @click="navigateTo('/auth/login')"
     size="2xl" as ButtonSize
     :ui="{ rounded: 'rounded-full' }"
     class="bg-[#E8F1FC] hover:bg-[#E8F1FC]/90 text-black"
     label="Se connecter"
   />
   

   <UButton
     @click="navigateTo('/auth/login')"
     size="2xl" as ButtonSize
     :ui="{ rounded: 'rounded-full' }"
     class="bg-[#E8F1FC] hover:bg-[#E8F1FC]/90 text-black"
     label="Se connecter"
   />
   

   import '@nuxt/ui'

   declare module '@nuxt/ui' {
     interface ButtonSize {
       '2xl': string
     }
   }
   

   import '@nuxt/ui'

   declare module '@nuxt/ui' {
     interface ButtonSize {
       '2xl': string
     }
   }
   

   {
     "include": [
       "types/**/*.d.ts",
       // ... autres chemins
     ]
   }
   

   {
     "include": [
       "types/**/*.d.ts",
       // ... autres chemins
     ]
   }
   

export default defineAppConfig({
  ui: {
    button: {
      size: {
        '2xl': 'text-lg px-6 py-3', // Ajustez ces valeurs selon vos besoins
      }
    }
  }
})

export default defineAppConfig({
  ui: {
    button: {
      size: {
        '2xl': 'text-lg px-6 py-3', // Ajustez ces valeurs selon vos besoins
      }
    }
  }
})

   export default defineNuxtConfig({
     future: {
       compatibilityVersion: 4
     },
     // ... autres configurations
   })
   

   export default defineNuxtConfig({
     future: {
       compatibilityVersion: 4
     },
     // ... autres configurations
   })
   

   import '@nuxt/ui'

   declare module '@nuxt/ui-types' {
     interface ButtonSize {
       '2xl': string
     }
   }
   

   import '@nuxt/ui'

   declare module '@nuxt/ui-types' {
     interface ButtonSize {
       '2xl': string
     }
   }
   

   export default defineAppConfig({
     ui: {
       button: {
         size: {
           '2xl': 'text-lg px-6 py-3', // Ajustez selon vos besoins
         }
       }
     }
   })
   

   export default defineAppConfig({
     ui: {
       button: {
         size: {
           '2xl': 'text-lg px-6 py-3', // Ajustez selon vos besoins
         }
       }
     }
   })
   

   <UButton
     @click="navigateTo('/auth/login')"
     size="2xl"
     :ui="{ rounded: 'rounded-full' }"
     class="bg-[#E8F1FC] hover:bg-[#E8F1FC]/90 text-black"
     label="Se connecter"
   />
   

   <UButton
     @click="navigateTo('/auth/login')"
     size="2xl"
     :ui="{ rounded: 'rounded-full' }"
     class="bg-[#E8F1FC] hover:bg-[#E8F1FC]/90 text-black"
     label="Se connecter"
   />
   

   export default defineNuxtConfig({
     // ... autres configurations
     build: {
       transpile: ['leaflet']
     }
   })
   

   export default defineNuxtConfig({
     // ... autres configurations
     build: {
       transpile: ['leaflet']
     }
   })
   

   "scripts": {
     // ... autres scripts
     "postinstall": "node copyLeafletImages.js"
   }
   

   "scripts": {
     // ... autres scripts
     "postinstall": "node copyLeafletImages.js"
   }
   

   const fs = require('fs-extra');
   const path = require('path');

   const leafletPath = path.join(__dirname, 'node_modules', 'leaflet', 'dist', 'images');
   const publicPath = path.join(__dirname, 'public', 'images', 'leaflet');

   fs.copySync(leafletPath, publicPath);
   console.log('Leaflet images copied successfully');
   

   const fs = require('fs-extra');
   const path = require('path');

   const leafletPath = path.join(__dirname, 'node_modules', 'leaflet', 'dist', 'images');
   const publicPath = path.join(__dirname, 'public', 'images', 'leaflet');

   fs.copySync(leafletPath, publicPath);
   console.log('Leaflet images copied successfully');
   

   <script setup>
   import 'leaflet/dist/leaflet.css'
   import L from 'leaflet'
// Redéfinir le chemin des images
   delete L.Icon.Default.prototype._getIconUrl
   L.Icon.Default.mergeOptions({
     iconRetinaUrl: '/images/leaflet/marker-icon-2x.png',
     iconUrl: '/images/leaflet/marker-icon.png',
     shadowUrl: '/images/leaflet/marker-shadow.png',
   })
   </script>
   

   <script setup>
   import 'leaflet/dist/leaflet.css'
   import L from 'leaflet'
// Redéfinir le chemin des images
   delete L.Icon.Default.prototype._getIconUrl
   L.Icon.Default.mergeOptions({
     iconRetinaUrl: '/images/leaflet/marker-icon-2x.png',
     iconUrl: '/images/leaflet/marker-icon.png',
     shadowUrl: '/images/leaflet/marker-shadow.png',
   })
   </script>
   

   export default defineNuxtConfig({
     // ... autres configurations
     modules: [
       'nuxt3-leaflet'
     ]
   })
   

   export default defineNuxtConfig({
     // ... autres configurations
     modules: [
       'nuxt3-leaflet'
     ]
   })
   

   <template>
     <ClientOnly>
       <l-map>
         <!-- Contenu de votre carte -->
       </l-map>
     </ClientOnly>
   </template>
   

   <template>
     <ClientOnly>
       <l-map>
         <!-- Contenu de votre carte -->
       </l-map>
     </ClientOnly>
   </template>
   

<template>
  <ClientOnly>
    <div class="z-0 h-full px-0.5">
      <LMap
        ref="map"
        :zoom="6"
        :center="[47.21322, -1.559482]"
        :use-global-leaflet="false"
      >
        <LTileLayer
          url="<https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png">
          attribution="&copy; <a href='<https://www.openstreetmap.org/'>OpenStreetMap</a>> contributors"
          layer-type="base"
          name="OpenStreetMap"
        />

        <LCircleMarker
          :lat-lng="[47.21322, -1.559482]"
          :radius="6"
          :color="'red'"
        />
      </LMap>
    </div>
  </ClientOnly>
</template>

<template>
  <ClientOnly>
    <div class="z-0 h-full px-0.5">
      <LMap
        ref="map"
        :zoom="6"
        :center="[47.21322, -1.559482]"
        :use-global-leaflet="false"
      >
        <LTileLayer
          url="<https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png">
          attribution="&copy; <a href='<https://www.openstreetmap.org/'>OpenStreetMap</a>> contributors"
          layer-type="base"
          name="OpenStreetMap"
        />

        <LCircleMarker
          :lat-lng="[47.21322, -1.559482]"
          :radius="6"
          :color="'red'"
        />
      </LMap>
    </div>
  </ClientOnly>
</template>

   export default defineNuxtConfig({
     // ... autres configurations
     build: {
       transpile: ['leaflet']
     }
   })
   

   export default defineNuxtConfig({
     // ... autres configurations
     build: {
       transpile: ['leaflet']
     }
   })
   

   <script setup>
   import 'leaflet/dist/leaflet.css'
   import L from 'leaflet'
// Redéfinir le chemin des images
   delete L.Icon.Default.prototype._getIconUrl
   L.Icon.Default.mergeOptions({
     iconRetinaUrl: '/images/leaflet/marker-icon-2x.png',
     iconUrl: '/images/leaflet/marker-icon.png',
     shadowUrl: '/images/leaflet/marker-shadow.png',
   })
   </script>
   

   <script setup>
   import 'leaflet/dist/leaflet.css'
   import L from 'leaflet'
// Redéfinir le chemin des images
   delete L.Icon.Default.prototype._getIconUrl
   L.Icon.Default.mergeOptions({
     iconRetinaUrl: '/images/leaflet/marker-icon-2x.png',
     iconUrl: '/images/leaflet/marker-icon.png',
     shadowUrl: '/images/leaflet/marker-shadow.png',
   })
   </script>
   

export default defineNuxtConfig({
  // ... autres configurations
  security: {
    headers: {
      contentSecurityPolicy: {
        'img-src': ["'self'", 'data:', '<https://*.tile.openstreetmap.org']>
      }
    }
  }
})

export default defineNuxtConfig({
  // ... autres configurations
  security: {
    headers: {
      contentSecurityPolicy: {
        'img-src': ["'self'", 'data:', '<https://*.tile.openstreetmap.org']>
      }
    }
  }
})

export default defineNuxtConfig({
  // ... autres configurations
  security: {
    headers: {
      contentSecurityPolicy: {
        'img-src': ["'self'", 'data:', '<https://*.tile.openstreetmap.org'],>
        'script-src': ["'self'", "'unsafe-inline'"],
        'style-src': ["'self'", "'unsafe-inline'"]
      }
    }
  }
})

export default defineNuxtConfig({
  // ... autres configurations
  security: {
    headers: {
      contentSecurityPolicy: {
        'img-src': ["'self'", 'data:', '<https://*.tile.openstreetmap.org'],>
        'script-src': ["'self'", "'unsafe-inline'"],
        'style-src': ["'self'", "'unsafe-inline'"]
      }
    }
  }
})

export default defineNuxtConfig({
  security: {
    headers: {
      contentSecurityPolicy: {
        'img-src': ["'self'", 'data:', '<https://*.tile.openstreetmap.org']>
      }
    }
  }
})

export default defineNuxtConfig({
  security: {
    headers: {
      contentSecurityPolicy: {
        'img-src': ["'self'", 'data:', '<https://*.tile.openstreetmap.org']>
      }
    }
  }
})

export default defineNuxtConfig({
  security: {
    headers: {
      contentSecurityPolicy: {
        'img-src': ["'self'", 'data:', '<https://*.tile.openstreetmap.org']>
      } as Record<string, string | string[]>
    }
  }
})

export default defineNuxtConfig({
  security: {
    headers: {
      contentSecurityPolicy: {
        'img-src': ["'self'", 'data:', '<https://*.tile.openstreetmap.org']>
      } as Record<string, string | string[]>
    }
  }
})

import { NuxtConfig } from '@nuxt/types'
import { SecurityOptions } from 'nuxt-security'

export default defineNuxtConfig<NuxtConfig & { security: SecurityOptions }>({
  security: {
    headers: {
      contentSecurityPolicy: {
        'img-src': ["'self'", 'data:', '<https://*.tile.openstreetmap.org']>
      }
    }
  }
})

import { NuxtConfig } from '@nuxt/types'
import { SecurityOptions } from 'nuxt-security'

export default defineNuxtConfig<NuxtConfig & { security: SecurityOptions }>({
  security: {
    headers: {
      contentSecurityPolicy: {
        'img-src': ["'self'", 'data:', '<https://*.tile.openstreetmap.org']>
      }
    }
  }
})