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の項目を追加します。