存在感と注目度を高めているWebフレームワークであるNuxt.js。
今日はそんなNuxt.jsの開発をスムーズに行うための設定について、紹介していきます。
開発環境の構築は以下の記事で紹介していますので、Nuxt.jsに興味を持っているが、まだ触ったことのない方はこちらの記事を先にご覧になってください。
開発における便利テクニック
ポートの変更
Nuxt.jsの開発環境は基本的にポート3000を使用します。この3000はRuby on Railsなどでも使われている人気のポジションなので、変えておきたいという人も少なくないでしょう。
開発環境におけるポートを変えたい場合は、package.jsonに設定を加えるだけで可能です。
{
"name": "nuxt-sample",
"scripts": {
"dev": "PORT=3333 nuxt"
},
"dependencies": {
"nuxt": "^1.4.1"
}
}
いじったところはすでに記述してあるscript.devのnuxtの前にPORT=3333を加えた部分です。これだけでyarn(npm) run devを行った時にlocalhost:3000でアクセスできるようになります。
APIリクエストの準備
フロントエンド開発を行っているとほぼ実装することとなるAPIサーバーへのリクエスト処理。大体はaxiosなどのライブラリを使用する箇所で読み込んで使いますが、Nuxt.jsではaxiosのモジュールが用意されているので、そちらを利用することオススメします。こちらを利用することで各種設定や、ヘルパーの設定を柔軟かつシンプルに記載することが可能です。
モジュールのインストールとNuxtのコンフィグファイルに設定を追加するだけで可能です。nuxt.config.jsはスタートテンプレートを使った場合は最初から作成されていますが、フルスクラッチの場合でまだ存在しない場合はプロジェクトディレクトリのトップに作成してから編集して保存しましょう。
yarn add @nuxtjs/axios
module.exports = {
// 省略
modules: ['@nuxtjs/axios'],
axios: {
// リクエスト先のURLを固定したい場合は以下を設定
baseURL: 'http://localhost:8888'
},
// 省略
};
あとはリクエストするときは以下のように記述することで、効率よくAPI周りの処理を行えるようになります。他にもリクエスト/レスポンスにさいの共通して行いたい処理なども簡単に実装できますので特に強いこだわりがなければNuxtモジュールのaxiosを使用すると開発がスムーズになることでしょう。
GET
this.$axios
.$get(`user/post`)
.then(response => {
// リクエスト成功時の処理
})
.catch(error => {
// リクエスト失敗時の処理
});
POST
this.$axios
.$post('usert/post', { title, comment })
.then(response => {
// リクエスト成功時の処理
})
.catch(error => {
// リクエスト失敗時の処理
});
共通処理など
export default function({ store, $axios, redirect }) {
// リクエスト時にトークンを付与する
$axios.onRequest(config => {
if (store.state.user.token) {
config.headers.common['Authorization'] =
'Bearer ' + store.state.user.token;
}
});
// 認証エラー時の処理
$axios.onError(error => {
if (error.response.status === 401) {
redirect('/signin');
}
});
}
公式ドキュメントでは詳しい設定や使用例を参照することができます。
スタイルシートにsassを使う
vueファイルの中でスタイルを記述する時にcssではなくsassを使いたいということも多いでしょう。そんな時もほとんど手間なく実装可能です。
yarn add -D node-sass sass-loader
上記コマンドを実行すれば、vueファイルにおいて、以下のような記載が可能となります。
<template>
<h1>Hello world!</h1>
</template>
<style lang="sass">
h1
color: red
</style>
<template>
<h1>Hello world!</h1>
</template>
<style lang="scss">
h1 {
color: red;
}
</style>
fontawesomeを使う
Webフォントとして最も有名どころであり、使いやすさ・種類の豊富さに定評のあるfontawesomeですが、こちらもNuxtで簡単につかうことができます。Nuxtのモジュールにfontawesomeは用意されていますが、そちらが現在バージョン5に対応していないため、通常通りパッケージをインストールする形で導入します。
yarn add @fortawesome/fontawesome-free-webfonts
nuxt.config.jsに以下を記述します。
module.exports = {
// 省略
css: [
'@fortawesome/fontawesome-free-webfonts',
'@fortawesome/fontawesome-free-webfonts/css/fa-brands.css',
'@fortawesome/fontawesome-free-webfonts/css/fa-regular.css',
'@fortawesome/fontawesome-free-webfonts/css/fa-solid.css',
],
// 省略
};
あとはソースコード内で以下のようにアイコンを配置することが可能です。
<template>
<div>
<h1>Hello world!</h1>
<i class="fas fa-check-circle"/>
</div>
</template>
Normalize.cssを使う
スタイルシートの初期状態をいい感じに調整してくれるNormalize.cssもちょっとした手順で導入することが可能です。
yarn add normalize.css
あとはnuxt.config.jsに以下のように設定を加えることでNormalize.cssの導入が完了します。
module.exports = {
// 省略
css: [
'normalize.css'
]
// 省略
}
まとめ
いかがだったでしょうか。開発を行う前に押さえておきたい設定、プラグインの導入をメインに紹介しました。
この記事で開発の土台はできたかとも思いますので、早速Nuxt.jsでのフロント開発を楽しんでいきましょう。
閲覧いただき、ありがとうございました。
