Environment
@nuxtjs/leaflet 1.3.2- Nuxt 4.4.8
leaflet 1.9.4@vue-leaflet/vue-leaflet 0.10.1- Vite 7.3.6
- Node 24.18.0
Describe the bug
setup() pushes Leaflet's stylesheet into nuxt.options.css before any option is
consulted (dist/module.mjs:38):
defaults: {},
async setup(options, nuxt) {
const resolver = createResolver(import.meta.url);
nuxt.options.css.push("leaflet/dist/leaflet.css"); // unconditional
…
if (options.markerCluster) {
nuxt.options.css.push("leaflet.markercluster/dist/MarkerCluster.css");
nuxt.options.css.push("leaflet.markercluster/dist/MarkerCluster.Default.css");
}ModuleOptions offers no way to turn this off:
interface ModuleOptions {
markerCluster?: boolean;
heat?: boolean;
}Anything in nuxt.options.css is bundled into the entry stylesheet, which is
render-blocking on every route. In an app where maps appear on one or two
routes, every other route still downloads and parses Leaflet's CSS before it can
paint.
Suggested fix
An option that defaults to the current behaviour, so nothing changes for existing
users:
defaults: { injectCss: true },
async setup(options, nuxt) {
const resolver = createResolver(import.meta.url);
if (options.injectCss !== false) {
nuxt.options.css.push("leaflet/dist/leaflet.css");
}
…
if (options.markerCluster) {
if (options.injectCss !== false) {
nuxt.options.css.push("leaflet.markercluster/dist/MarkerCluster.css");
nuxt.options.css.push("leaflet.markercluster/dist/MarkerCluster.Default.css");
}
addImports({ … });
}
}plus injectCss?: boolean on ModuleOptions, and a docs note that with it
disabled, components which render a map should import the stylesheet themselves:
<script setup>
import 'leaflet/dist/leaflet.css';
</script>
Vite then emits it in that component's chunk, so only routes with a map pay for it.
I'm happy to open a PR for the injectCss option if you'd like this approach
Environment
@nuxtjs/leaflet1.3.2leaflet1.9.4@vue-leaflet/vue-leaflet0.10.1Describe the bug
setup()pushes Leaflet's stylesheet intonuxt.options.cssbefore any option isconsulted (
dist/module.mjs:38):ModuleOptionsoffers no way to turn this off:Anything in
nuxt.options.cssis bundled into the entry stylesheet, which isrender-blocking on every route. In an app where maps appear on one or two
routes, every other route still downloads and parses Leaflet's CSS before it can
paint.
Suggested fix
An option that defaults to the current behaviour, so nothing changes for existing
users:
plus
injectCss?: booleanonModuleOptions, and a docs note that with itdisabled, components which render a map should import the stylesheet themselves:
Vite then emits it in that component's chunk, so only routes with a map pay for it.
I'm happy to open a PR for the
injectCssoption if you'd like this approach