I'm encountering an issue while trying to generate my nuxt app, specifically on my 'Area' page. It seems like the error is related to the leaflet maps being used on this page.
https://i.sstatic.net/Cj9ai.png
Initially, I attempted to resolve this problem by enclosing my area component within <client-only>, but unfortunately, that did not solve the issue.
This is the content of my Area page:
<template>
<client-only>
<div class="area">
<div class="title">
<h1>Alcaucín</h1>
</div>
...
</div>
</client-only>
</template>
<script>
...
</script>
Below is my nuxt.config file:
export default {
// Global page headers (https://go.nuxtjs.dev/config-head)
head: {
title: 'casa-isabella',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
...
]
},
target: 'static',
// Global CSS (https://go.nuxtjs.dev/config-css)
css: [],
// Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
plugins: [
{ src: '~/plugins/VueAwesomeSwiper.js', mode: 'client' },
],
...
}