kue Posts - Answer Overflow

kue

•Created by kue on 10/3/2024 in #❓・help

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>

1 replies

NNuxt

•Created by kue on 2/25/2024 in #❓・help

How to access environment variables or runtime config outside of Nuxt context?

Hi folks! I need to access the environment variable outside of the Nuxt context like this:

// lib/http.js

// process.env undefined
// can't use `useRuntimeConfig` outside nuxt context
const http = axios.create({ ... });
const strapiHttp = axios.create({ ... });

// lib/http.js

// process.env undefined
// can't use `useRuntimeConfig` outside nuxt context
const http = axios.create({ ... });
const strapiHttp = axios.create({ ... });

// services/blog.service.js
import { strapiHttp } from "~/lib";

export const getBlogPosts = async () => {
  const res = await strapiHttp.get(...);
  return res.data;
};

// services/blog.service.js
import { strapiHttp } from "~/lib";

export const getBlogPosts = async () => {
  const res = await strapiHttp.get(...);
  return res.data;
};

<script setup>
const { data } = useAsyncData(() => getBlogPosts());
</script>

<script setup>
const { data } = useAsyncData(() => getBlogPosts());
</script>

I have several instance of axios and this is the current structure. Is there a way to preserve this kind of structure without having to rewrite it to composables in order to access env variables or runtime config? Thank you!

6 replies

Gaming

Programming