Почему в Nuxt не работает axios?

Question

[lodas]

Решил добавить модуль Axios Module на nuxt. Сделал все по инструкции:
1) Установил npm install @nuxtjs/axios
2) В nuxt.config.js добавил модуль

modules: [
    '@nuxtjs/axios',
  ],

3) скопировал пример для asyncData из документации с нужным url

async asyncData({ $axios }) {
      const ip = await $axios.$get('https://jsonplaceholder.typicode.com/todos/1')
      return { ip }
    },

Выдает ошибку:

ERROR  Cannot read property '$get' of undefined                      16:18:09

  at asyncData (index.vue:49:0)
  at promisify (.nuxt/utils.js:262:0)
  at server.js:1455:82
  at Array.map (<anonymous>)
  at module.exports../.nuxt/server.js.__webpack_exports__.default (.nuxt/server.
js:222:0)

Как это починить?

Comments

[Михаил]

https://github.com/nuxt-community/axios-module/pul...

[lodas]

не помогло, та же ошибка остается

Answer 1

[Алекс Глебов]

asyncData принимает контекст, смотрите что в нем есть и ищите axios

asyncData(ctx) {
  console.log(ctx)
}

Так должно работать

async asyncData({app}) {
      const ip = await app.$axios.$get('https://jsonplaceholder.typicode.com/todos/1')
      return { ip }
}

Comments

[lodas]

Код приведенный выше не помог

async asyncData({app}) {
      const ip = await app.$axios.$get('https://jsonplaceholder.typicode.com/todos/1')
      return { ip }
}

Через console.log("{app}", {app});вывел контекст и в нем нету axios:

{app} {
  app: {
    head: { meta: [], link: [], style: [], script: [] },
    router: VueRouter {
      app: [Vue],
      apps: [Array],
      options: [Object],
      beforeHooks: [],
      resolveHooks: [],
      afterHooks: [],
      matcher: [Object],
      fallback: false,
      mode: 'abstract',
      history: [AbstractHistory]
    },
    nuxt: {
      defaultTransition: [Object],
      transitions: [Array],
      setTransitions: [Function: setTransitions],
      err: null,
      dateErr: null,
      error: [Function: error]
    },
    render: [Function: render],
    data: [Function: data],
    beforeCreate: [Function: beforeCreate],
    created: [Function: created],
    mounted: [Function: mounted],
    watch: { 'nuxt.err': 'errorChanged' },
    computed: {
      isOffline: [Function: isOffline],
      isFetching: [Function: isFetching]
    },
    methods: {
      refreshOnlineStatus: [Function: refreshOnlineStatus],
      refresh: [AsyncFunction: refresh],
      errorChanged: [Function: errorChanged],
      setLayout: [Function: setLayout],
      loadLayout: [Function: loadLayout]
    },
    components: { NuxtLoading: [Object] },
    context: {
      isStatic: false,
      isDev: true,
      isHMR: false,
      app: [Circular],
      payload: undefined,
      error: [Function: bound error],
      base: '/',
      env: {},
      req: [IncomingMessage],
      res: [ServerResponse],
      ssrContext: [Object],
      redirect: [Function],
      beforeNuxtRender: [Function],
      route: [Object],
      next: [Function],
      _redirected: false,
      _errored: false,
      params: {},
      query: {}
    }
  }
}

[Алекс Глебов]

lodas, а если весь контекст вывести?
asyncData(ctx) {
console.log(ctx)
}
Если нету, то axios не подключен. Или не пересобран проект после редактирования nuxt.config.js

[lodas]

Весь контекст:

ctx {
  isStatic: false,
  isDev: true,
  isHMR: false,
  app: {
    head: { meta: [], link: [], style: [], script: [] },
    router: VueRouter {
      app: [Vue],
      apps: [Array],
      options: [Object],
      beforeHooks: [],
      resolveHooks: [],
      afterHooks: [],
      matcher: [Object],
      fallback: false,
      mode: 'abstract',
      history: [AbstractHistory]
    },
    nuxt: {
      defaultTransition: [Object],
      transitions: [Array],
      setTransitions: [Function: setTransitions],
      err: null,
      dateErr: null,
      error: [Function: error]
    },
    render: [Function: render],
    data: [Function: data],
    beforeCreate: [Function: beforeCreate],
    created: [Function: created],
    mounted: [Function: mounted],
    watch: { 'nuxt.err': 'errorChanged' },
    computed: {
      isOffline: [Function: isOffline],
      isFetching: [Function: isFetching]
    },
    methods: {
      refreshOnlineStatus: [Function: refreshOnlineStatus],
      refresh: [AsyncFunction: refresh],
      errorChanged: [Function: errorChanged],
      setLayout: [Function: setLayout],
      loadLayout: [Function: loadLayout]
    },
    components: { NuxtLoading: [Object] },
    context: [Circular]
  },
  payload: undefined,
  error: [Function: bound error],
  base: '/',
  env: {},
  req: IncomingMessage {
    _readableState: ReadableState {
      objectMode: false,
      highWaterMark: 16384,
      buffer: BufferList { head: null, tail: null, length: 0 },
      length: 0,
      pipes: null,
      pipesCount: 0,
      flowing: null,
      ended: true,
      endEmitted: false,
      reading: false,
      sync: true,
      needReadable: false,
      emittedReadable: false,
      readableListening: false,
      resumeScheduled: false,
      emitClose: true,
      autoDestroy: false,
      destroyed: false,
      defaultEncoding: 'utf8',
      awaitDrain: 0,
      readingMore: true,
      decoder: null,
      encoding: null,
      [Symbol(kPaused)]: null
    },
    readable: true,
    _events: [Object: null prototype] {
      end: [Function: resetHeadersTimeoutOnReqEnd]
    },
    _eventsCount: 1,
    _maxListeners: undefined,
    socket: Socket {
      connecting: false,
      _hadError: false,
      _parent: null,
      _host: null,
      _readableState: [ReadableState],
      readable: true,
      _events: [Object: null prototype],
      _eventsCount: 8,
      _maxListeners: undefined,
      _writableState: [WritableState],
      writable: true,
      allowHalfOpen: true,
      _sockname: null,
      _pendingData: null,
      _pendingEncoding: '',
      server: [Server],
      _server: [Server],
      timeout: 120000,
      parser: [HTTPParser],
      on: [Function: socketListenerWrap],
      addListener: [Function: socketListenerWrap],
      prependListener: [Function: socketListenerWrap],
      _paused: false,
      _peername: [Object],
      _httpMessage: [ServerResponse],
      [Symbol(asyncId)]: 236065,
      [Symbol(kHandle)]: [TCP],
      [Symbol(kSetNoDelay)]: false,
      [Symbol(lastWriteQueueSize)]: 0,
      [Symbol(timeout)]: Timeout {
        _idleTimeout: 120000,
        _idlePrev: [TimersList],
        _idleNext: [Timeout],
        _idleStart: 654160,
        _onTimeout: [Function: bound ],
        _timerArgs: undefined,
        _repeat: null,
        _destroyed: false,
        [Symbol(refed)]: false,
        [Symbol(asyncId)]: 236102,
        [Symbol(triggerId)]: 236067
      },
      [Symbol(kBuffer)]: null,
      [Symbol(kBufferCb)]: null,
      [Symbol(kBufferGen)]: null,
      [Symbol(kCapture)]: false,
      [Symbol(kBytesRead)]: 0,
      [Symbol(kBytesWritten)]: 0
    },
    connection: Socket {
      connecting: false,
      _hadError: false,
      _parent: null,
      _host: null,
      _readableState: [ReadableState],
      readable: true,
      _events: [Object: null prototype],
      _eventsCount: 8,
      _maxListeners: undefined,
      _writableState: [WritableState],
      writable: true,
      allowHalfOpen: true,
      _sockname: null,
      _pendingData: null,
      _pendingEncoding: '',
      server: [Server],
      _server: [Server],
      timeout: 120000,
      parser: [HTTPParser],
      on: [Function: socketListenerWrap],
      addListener: [Function: socketListenerWrap],
      prependListener: [Function: socketListenerWrap],
      _paused: false,
      _peername: [Object],
      _httpMessage: [ServerResponse],
      [Symbol(asyncId)]: 236065,
      [Symbol(kHandle)]: [TCP],
      [Symbol(kSetNoDelay)]: false,
      [Symbol(lastWriteQueueSize)]: 0,
      [Symbol(timeout)]: Timeout {
        _idleTimeout: 120000,
        _idlePrev: [TimersList],
        _idleNext: [Timeout],
        _idleStart: 654160,
        _onTimeout: [Function: bound ],
        _timerArgs: undefined,
        _repeat: null,
        _destroyed: false,
        [Symbol(refed)]: false,
        [Symbol(asyncId)]: 236102,
        [Symbol(triggerId)]: 236067
      },
      [Symbol(kBuffer)]: null,

по поводу

Если нету, то axios не подключен

файл nuxt.config.js где есть подключение:

module.exports = {
  head: {
    title: 'Test',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'Nuxt.js project' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto:400,700' }
    ]
  },

  modules: [
    '@nuxtjs/axios',
  ],

  axios: {
    debug: true
  },

  loading: {
    height: '10px',
    duration: 1000,
    rtl: true,
    continuous: true,
  },

  build: {
    extend (config, { isDev, isClient }) {
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  }
}

export default {
  css: [
    '@/assets/scss/fonts.scss',
    '@/assets/scss/framework-style.scss',
    '@/assets/scss/elements/body.scss',
    '@/assets/scss/style.scss',
  ],
  layout: 'default'
}

А так же package.json

"dependencies": {
    "@nuxtjs/axios": "^5.10.3",
    "axios": "^0.19.2",
    "nuxt": "^2.0.0",
    "prompts": "^2.3.2",
    "vue-meta": "^2.3.3",
    "vue-resource": "^1.5.1"
  },
  "devDependencies": {
    "babel-eslint": "^10.0.1",
    "eslint": "^4.19.1",
    "eslint-friendly-formatter": "^4.0.1",
    "eslint-loader": "^2.1.1",
    "eslint-plugin-vue": "^4.0.0",
    "node-sass": "^4.14.1",
    "sass-loader": "^8.0.2"
  }

[Алекс Глебов]

ну кинь проект посмотреть

[lodas]

Алекс Глебов, отправил на почту. На главной странице pages\index.vue там воспроизвел эту ошибку.
Спасибо.

[Алекс Глебов]

export на 47 сроке перекрывает весь конфиг.
Если его убрать то заработает.
Css переноси наверх, а layout и так default.

img

[lodas]

Алекс Глебов, Спасибо - помогло!