Nuxt plugin throwing inject is not a function

Question

I decided to play a little bit with nuxt for the first time from scratch to finish. and now, I am trying to add plugins. the plugin I am trying to add is for my api. But when I inject it, it throws the error "inject is not a function". This is my code below. Every other thing works to the best of my knowledge.

import Vue from 'vue'
import axios from 'axios'
import get from 'lodash/get'
import cookies from 'js-cookie'
import { BASE_URL } from '../config/config'
export default (context, inject) => {
  const saveToken = (token) => {
    cookies.set('AuthToken', token)
  }
  const removeToken = () => {
    cookies.remove('AuthToken')
  }
  const getToken = () => {
    cookies.get('AuthToken')
  }
  const token = getToken() || ''
  const config = {
    baseURL: `${BASE_URL}/api/v1`,
    params: {},
    headers: {
      Authorization: `Bearer ${token}`
    }
  }
  const service = axios.create(config)
  service.interceptors.response.use(
    response => response,
    (error) => {
      // src of error.
      const data = get(error, 'response.data', {})
      Vue.$store.commit('notifications/setNotification', data)
    }
  )
  const ApiService = {
    ...service,
    removeToken,
    saveToken
  }
  inject('ApiService', ApiService)
}

score 2 · Answer 1 · answered Dec 12 '20 at 20:10

Okay, So, I was able to fix it. Apparently, the error was caused because I added the plugin in the module array instead of the plugins array as suggested in the Nuxt docs. After putting it in the plugins as opposed to putting it as a module like I did previously, my dev server has started working again.

Nuxt plugin throwing inject is not a function

1 Answers1