Monday, January 4, 2021

Using axios with Nuxt Typescript

nuxt.config.js
plugins: ['~/plugins/axios-accessor.ts'],
  1. plugins/axios-accessor.ts
    import { Plugin } from '@nuxt/types'
    import { initializeAxios } from '~/utils/api'
    
    const accessor: Plugin = ({ $axios }) => {
      initializeAxios($axios)
    }
    
    export default accessor
    utils/api.ts
    import { NuxtAxiosInstance } from '@nuxtjs/axios'
    
    let $axios: NuxtAxiosInstance
    
    export function initializeAxios(axiosInstance: NuxtAxiosInstance) {
      $axios = axiosInstance
    }
       
    export { $axios }
    
    using
    import { $axios } from '~/utils/api'
    ...
    const users = await $axios.$get('/users')
    ...