昨年からクライアントワークおよび個人制作でWebサイトを構築するにあたりいくつかの場面でNuxt.jsを使ってきました。
使い始めた頃は、随時調べながらWebサイト制作のための環境構築を行っていましたが、ある程度毎回セットアップを行う内容が固定化されてきたので、それらをご紹介しようと思います。
イメージとしては、 create-nuxt-app でnuxtをインストール後、以下のセットアップを行えば快適にWebサイト構築がスタートできる、そんな状態を目指します。カテゴリごとに分けると、大まかに以下のようになります。
- スタイル系の設定
- Scssの設定 & 共通のスタイル設定
- Scssで変数やmixinを扱いたい場合
- リセットCSSの設定
- Scssの設定 & 共通のスタイル設定
- メタタグの設定
- 共通のメタタグ設定
- 計測タグ（GA,GTM）の設定
- lint系の設定
- 共通スクリプトの設定
それでは早速、見ていきましょう。
スタイル系の設定
Scssの設定 & 共通のスタイル設定
create-nuxt-app でインストールしただけではScssは使えないので、最初に導入しておきます。
まず、yarnもしくはnpmで以下のように必要なモジュールを追加します。
$ yarn add -D node-sass sass-loader
この時点で、各コンポーネント内でscssが使えるようになり、<style lang=”scss”></style>で記述できるようになります。
次に、/assets/scss/main.scssなどのファイルを作り、以下のようにnuxt.config.jsのGlobal CSSの欄に登録します。このmain.scss内に記述した値はグローバルなスタイルとして反映されます。
Scssで変数やmixinを扱いたい場合
また、グローバルでCSSの変数やmixinを使いたい場合は、nuxt-sass-resources-loader を使います。まず、上記同様にpackage.jsonに追加します。
$ yarn add -D nuxt-sass-resources-loader
その後、nuxt.config.jsのmodules欄および、新たに追加したstyleResources内に登録したい.scssファイルを追加します。
これで、Scssの変数、mixinがグローバルに扱えるようになりました。
なお、PostCSSを使いたい場合は以下を参照してください。
PostCSS プラグインを追加するには？ – NuxtJS
リセットCSSの設定
どのリセットCSSを使うかは好みがありますが、僕はモダンなリセットCSSである”ress“を使うことが多いです。まずは、以下のようにressを追加してください。
$ yarn add -D ress
その後、nuxt.config.jsのGlobal CSSで以下のように登録します。これですべてのページにリセットCSSが適用されます。
なお、オススメのリセットCSSはこちらを参照してみてください。
【2019年最新版】おすすめリセットCSSまとめ | CSSデザインテクニック – chot.design –
メタタグの設定
共通のメタタグ設定
メタタグも初期構築時は最低限しか設定されていないので、改めて設定しておきます。これも全ページ共通なので、nuxt.config.jsに記述します。
タイトルやディスクリプション、URLなど使い回せる要素を変数化し、nuxt.config.jsのheadプロパティ内に記載します。
もし、ページごとに個別に設定したい場合は、該当するページコンポーネントのheadプロパティに同様に書けばOKです。
計測タグ（GA,GTM）の設定
Webサイトの運用にあたって必要な計測タグ（Google AnalyticsやGoogle Tag Managerのタグ）も、同様にnuxt.config.jsにて設定します。今回は、Google Analyticsのタグの埋め込みの例を説明します。
まずは、以下のコマンドを実行して必要なモジュールをインストールしてください。
$ yarn add -D @nuxtjs/google-analytics
その後、nuxt.config.jsのmodulesに以下のように登録します。設定はこれだけです。しばらく待つと、Google Analyticsのコンソールにタグの設定が反映されるようになります。
なお、Google Tag Managerの導入もモジュールが用意されているので、そちらを使えばOKです。
【参照】
nuxt-community/modules
lint系の設定
Nuxt.jsではcreate-nuxt-appでインストールする際に、ESLint／Prettier／Style Lintをデフォルトで設定することができるので、それらも設定しておきます。
インストール後、各設定ファイル（.eslintrc.js、.prettierrc、.stylelintrc.json）にお好みの設定を記載してください。以下にその例を示しておきます。
共通スクリプトの設定
Nuxt.jsでWebサイトを作ると、複数のコンポーネントで共通の処理を行いたい場面が出てくると思います。ですので、そうした処理が行えるような設定も予めておこなっておきましょう。
今回は、単純に”hoge”という文字列をreturnする関数hoge()を考えます。例としてまず、pluginsフォルダにutil.jsというファイルを作り、以下のように関数を記述します。
このケースでは、Nuxt.jsが提供するプラグインであるinjectを利用しています。injectを利用することでコンポーネントやVuexストア内で決まった処理を行う関数を呼び出すことができます。
登録した関数は、以下のようにthis.$[関数名]という表記でコンポーネント内で使用できます。
同様にmixinを使う方法もありますが、injectの場合はasyncDataならびにfetchでも使うことができるので、injectのほうが使う場面が多いかと思います。
【参照】
統合された注入
さいごに
Nuxt.jsでWebサイトを構築する際に最初に設定しておきたい項目をピックアップしてまとめてみました。
Nuxt.jsはcreate-nuxt-appでほぼ快適に使える状態ですが、ことWebサイト構築においてはこれらの設定を施しておくと、よりスムーズに開発が進められるので、多少手間がかかりますがぜひ設定しておくことをオススメします。
