How to get baseUrl in Nuxt?

Getting baseUrl in Nuxt.js is a common requirement, especially when making API calls or handling URL-related logic. Nuxt.js offers several approaches to obtain baseUrl, and here are some common methods:

1. Using Environment Variables

The most straightforward approach is to set and retrieve baseUrl via environment variables. This method allows you to use different URLs based on various deployment environments (development, testing, production, etc.).

In the nuxt.config.js file, configure environment variables:

javascript
export default {
  // Environment variables
  env: {
    baseUrl: process.env.BASE_URL || 'http://localhost:3000'
  }
}

Then, in your components or pages, access this variable using process.env.baseUrl:

javascript
export default {
  mounted() {
    console.log('Base URL:', process.env.baseUrl);
  }
}

2. Using $config

Starting from Nuxt 2.13, Nuxt introduced a runtime configuration system that allows you to access these settings via the $config object.

First, define your configuration in nuxt.config.js:

javascript
export default {
  publicRuntimeConfig: {
    baseUrl: process.env.BASE_URL || 'http://localhost:3000'
  }
}

Next, in your components, access it through this.$config.baseUrl:

javascript
export default {
  mounted() {
    console.log('Base URL:', this.$config.baseUrl);
  }
}

3. Using Plugins

Another approach is to create a Nuxt plugin to inject baseUrl into the Vue instance, making it accessible throughout your application.

First, create a plugin file, for example, plugins/baseUrl.js:

javascript
export default ({ app }, inject) => {
  const baseUrl = process.env.BASE_URL || 'http://localhost:3000';
  // Inject baseUrl into Vue instance
  inject('baseUrl', baseUrl);
}

Then, register the plugin in nuxt.config.js:

javascript
export default {
  plugins: [
    '~/plugins/baseUrl.js'
  ]
}

Now, in any component, access it via this.$baseUrl:

javascript
export default {
  mounted() {
    console.log('Base URL:', this.$baseUrl);
  }
}

Summary

The above methods provide common ways to obtain baseUrl in Nuxt.js. Depending on your project requirements and deployment environment, choose the most suitable approach. For practical development, environment variables and $config are recommended as they offer greater flexibility and security.