あとで読む昨年からクライアントワークおよび個人制作でWebサイトを構築するにあたりいくつかの場面でNuxt.jsを使ってきました。使い始めた頃は、随時調べながらWebサイト制作のための環境構築を行っていましたが、ある程度毎回セットアップを行う内容が固定化されてきたので、それらをご紹介しようと思います。nuxtをインストール後、以下のセットアップを行えば快適にWebサイト構築がスタートできる、そんな状態を目指します。カテゴリごとに分けると、大まかに以下のようになります。共通スクリプトの設定それでは早速、見ていきましょう。インストールしただけではScssは使えないので、最初に導入しておきます。yarnもしくはnpmで以下のように必要なモジュールを追加します。lang=”scss”></style>で記述できるようになります。CSSの欄に登録します。このmain.scss内に記述した値はグローバルなスタイルとして反映されます。上記同様にpackage.jsonに追加します。nuxt-sass-resources-loaderその後、nuxt.config.jsのmodules欄および、新たに追加したstyleResources内に登録したい.scssファイルを追加します。これで、Scssの変数、mixinがグローバルに扱えるようになりました。PostCSSを使いたい場合は以下を参照してください。NuxtJSリセットCSSの設定どのリセットCSSを使うかは好みがありますが、僕はモダンなリセットCSSである”ress“を使うことが多いです。以下のようにressを追加してください。CSSで以下のように登録します。これですべてのページにリセットCSSが適用されます。オススメのリセットCSSはこちらを参照してみてください。共通のメタタグ設定メタタグも初期構築時は最低限しか設定されていないので、改めて設定しておきます。これも全ページ共通なので、nuxt.config.jsに記述します。タイトルやディスクリプション、URLなど使い回せる要素を変数化し、nuxt.config.jsのheadプロパティ内に記載します。ページごとに個別に設定したい場合は、該当するページコンポーネントのheadプロパティに同様に書けばOKです。Managerのタグ)も、同様にnuxt.config.jsにて設定します。Analyticsのタグの埋め込みの例を説明します。以下のコマンドを実行して必要なモジュールをインストールしてください。@nuxtjs/google-analyticsその後、nuxt.config.jsのmodulesに以下のように登録します。Analyticsのコンソールにタグの設定が反映されるようになります。Managerの導入もモジュールが用意されているので、そちらを使えばOKです。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サイト構築においてはこれらの設定を施しておくと、よりスムーズに開発が進められるので、多少手間がかかりますがぜひ設定しておくことをオススメします。新卒でデジタルマーケティングを手がける会社に入社し、Web編集者としてキャリアをスタート。2016年にはディレクター兼COOとしてWeb制作会社を立ち上げる。2019年7月より株式会社トゥーアール入社。トゥーアール株式会社トゥーアールは渋谷にあるフロントエンドに特化したWeb制作会社です。HTML/CSSやJavaScriptなどのフロントエンド開発についてお気軽にご相談ください。