Nuxt•3w ago

How Nuxt load CSS from node_modules in dynamically imported component

Hi guys, I'm wondering about how Nuxt load CSS from node_modules. I think every page that importing CSS like this import "pkg/some.css" or any component that used in a page that import a CSS, the CSS will be loaded into head. I have this simple Slider component that importing CSS.

<script setup>
import { onMounted } from "vue";
import Glide, { Autoplay } from "@glidejs/glide/dist/glide.modular.esm";
import "@glidejs/glide/dist/css/glide.core.min.css";

onMounted(() => {
  new Glide(".glide", {
    autoplay: 3000,
  }).mount({ Autoplay });
});
</script>

<template>
  <div class="glide">
    <div class="glide__track h-24" data-glide-el="track">
      <ul class="glide__slides">
        <li
          v-for="n in 10"
          :key="n"
          class="glide__slide border border-black p-4"
        >
          {{ n }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { onMounted } from "vue";
import Glide, { Autoplay } from "@glidejs/glide/dist/glide.modular.esm";
import "@glidejs/glide/dist/css/glide.core.min.css";

onMounted(() => {
  new Glide(".glide", {
    autoplay: 3000,
  }).mount({ Autoplay });
});
</script>

<template>
  <div class="glide">
    <div class="glide__track h-24" data-glide-el="track">
      <ul class="glide__slides">
        <li
          v-for="n in 10"
          :key="n"
          class="glide__slide border border-black p-4"
        >
          {{ n }}
        </li>
      </ul>
    </div>
  </div>
</template>

Slider component is perfectly dynamically imported. But, I see that the CSS is loaded right away despite the component using it is lazy-loaded. Is there a way to lazy-load the CSS too?

<script setup>
const Slider = defineAsynComponent(() => import("./components/Slider.vue"));
const showSlider = ref(false):
</script>

<template>
  <main>
    <button @click="showSlider = !showSlider">
      {{ showSlider ? "Hide" : "Show" }} slider
    </button>
    <Slider v-if="showSlider" />
  </main>
</template>

<script setup>
const Slider = defineAsynComponent(() => import("./components/Slider.vue"));
const showSlider = ref(false):
</script>

<template>
  <main>
    <button @click="showSlider = !showSlider">
      {{ showSlider ? "Hide" : "Show" }} slider
    </button>
    <Slider v-if="showSlider" />
  </main>
</template>

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

How Nuxt load CSS from node_modules in dynamically imported component