The plugins directory

The /plugins/ directory is used to contain JavaScript functions, such as global functions that you want to run before the root Vue instance is instantiated. For example, you may want to create a new axios instance that sends API requests specifically to https://jsonplaceholder.typicode.com only, and you may want to make this instance available globally without importing axios and creating a fresh instance each time. You can create a plugin that injects and plugs into the Nuxt context, as follows:

// plugins/axios-typicode.js
import axios from 'axios'

const instance = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com'
})

export default (ctx, inject) => {
  ctx.$axiosTypicode = instance
  inject('axiosTypicode', instance)
}

Then, you can use this axios instance on any page by calling $axiosTypicode, as follows:

// pages/users/index.vue
export default {
  async asyncData ({ $axiosTypicode, error }) {
    let { data } = await...