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

В Nuxt.js axios не работает из коробки, потому что Nuxt.js является фреймворком для создания универсальных (universal) Vue.js приложений, которые могут быть отрендерены как на сервере, так и на клиенте. Из-за этого есть некоторые отличия в использовании axios в Nuxt.js по сравнению с обычной средой разработки Vue.js.

В обычном Vue.js приложении, вы можете установить и использовать axios просто импортировав его в необходимом компоненте и выполнив HTTP запросы. Однако, в Nuxt.js, для работы с axios требуется дополнительные настройки.

Сначала необходимо установить axios пакет, выполнив команду npm install axios или yarn add axios.

Затем, вам необходимо создать файл axios.js в папке plugins вашего Nuxt проекта (если еще не создана), и добавить следующий код:

import Vue from 'vue'
import axios from 'axios'

const axiosInstance = axios.create({
  // ваша конфигурация axios, например, baseUrl
})

Vue.prototype.$axios = axiosInstance

export default axiosInstance

Этот файл создает экземпляр axios с вашей конфигурацией и делает его доступным через $axios глобально для всех компонентов.

Затем, вам необходимо добавить этот плагин в файл nuxt.config.js. Добавьте следующий код:

export default {
  // ...
  plugins: [
    { src: '~/plugins/axios.js' }
  ]
  // ...
}

После этого, вы сможете использовать $axios в любом компоненте вашего проекта.

Пример использования axios в компоненте:

export default {
  async mounted() {
    try {
      const response = await this.$axios.get('https://api.example.com/data')
      console.log(response.data)
    } catch (error) {
      console.error(error)
    }
  }
}

Обратите внимание, что в Nuxt.js, вы можете использовать также методы жизненного цикла, такие как asyncData и fetch, чтобы запрашивать данные на стороне сервера, прежде чем компонент будет отрендерен.

Важно отметить, что при использовании axios в Nuxt.js вы также можете использовать интеграцию с плагином @nuxtjs/axios, который предоставляет несколько дополнительных возможностей и настроек для работы с axios в Nuxt.js.