Nuxt.jsに非同期通信のパッケージaxiosとproxyをインストールする方法についてです。
Vue.jsやNuxt.jsでは非同期通信にaxiosを使います。
@nuxtjsのインストール
axiosのインストールコマンドです。
$ npm i --save @nuxtjs/axios
@nuxtjs/proxy
proxyのインストールコマンドです。
$ npm i --save @nuxtjs/proxy
nuxt.config.jsの変更
export default { server: { port: 3000, // デフォルト: 3000 host: "xxx.xxx.xxx.xxx", // デフォルト: localhost }, srcDir: __dirname + "/client", mode: "universal", /* ** Headers of the page */ head: { title: process.env.npm_package_name || "", meta: [ { charset: "utf-8" }, { name: "viewport", content: "width=device-width, initial-scale=1", }, { hid: "description", name: "description", content: process.env.npm_package_description || "", }, ], link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }], }, /* ** Customize the progress-bar color */ loading: { color: "#fff" }, /* ** Global CSS */ css: [], /* ** Plugins to load before mounting the App */ plugins: [], /* ** Nuxt.js dev-modules */ buildModules: [], /* ** Nuxt.js modules */ modules: ["@nuxtjs/axios"], axios: { proxy: true, prefix: "/api", }, proxy: { "/api": "http://xxx.xxx.xxx.xxx:3000/", }, /* ** Build configuration */ build: { /* ** You can extend webpack config here */ extend(config, ctx) {}, }, };
modulesにaxiosの設定を追加、新しくaxiosとproxyの項目を追加します。