is it possible to define an variable as base url on nuxt.js-CodePudding

what i trying to do is define a base url variable for my api which is able to be called everywhere on nuxt app. for example im trying to call an image from my api storage like bellow

<img :src="`${baseUrl}/****/****.png`">

asuming i can define the variable,so i dont need to change every img url when the api domain changed. or I would be very thankful for introduce any better way to calling image from api storage. btw im using laravel as the api.

CodePudding user response：

You can use one of the runtimeConfig for this, publicRuntimeConfig or privateRuntimeConfig depending on your requirement

nuxt.config.js

export default {
  publicRuntimeConfig: {
    baseURL: 'https://nuxtjs.org'
  },
  privateRuntimeConfig: {
    apiSecret: 'something_private'
  }
}

Once added this variable will be available under $config across your Nuxt app like below

In templates

<template>
  <p>Our Url is: {{ $config.baseURL}}</p>
</template>

In places where you use the context (plugins, asyncData etc)

<script>
  asyncData ({ $config: { baseURL } }) {
    const posts = await fetch(`${baseURL}/posts`)
      .then(res => res.json())
  }
</script>