Nuxt•10mo ago

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!

4 Replies

manniL•10mo ago

Do you really need to?

manniL•10mo ago

Try out e.g. this pattern https://www.youtube.com/watch?v=jXH8Tr-exhI

Alexander Lichter

YouTube

Custom $fetch and Repository Pattern in Nuxt 3

💻 The repository pattern is a popular way to abstract your API calls away and provide a descriptive way to retrieve or send data. But how would you implement it in Nuxt? And should you use composables or $fetch for it? This video will give answers to all the questions! Key points: 🎛️ Implementing the repository pattern in Nuxt 🔛 Creating our ow...

kueOP•10mo ago

I needed it before because I think its require less rewrite (I'm migrating from Nuxt 2 to 3). Then I changed my mind after trying out the repository pattern. It works with previously defined axios function; just a little bit move things around. Thank you for the reference!

manniL•10mo ago

of course! ☺️

Gaming

Programming

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