【Nuxt 2】NuxtJSのはじめかた

NuxtJS とは

NuxtJS は、Vue.js のフレームワークになります。

NuxtJS にはさまざまなモジュールが搭載されており、Vue.js の開発をより簡単に、より高速に行うことができます。

例えば、ページのルーティングはフォルダ構成によって自動で構築されます。 また PWA の実装や Google アナリティクスの追加などの機能を追加するための仕組みが多数提供されています。

特に大規模な開発においては、NuxtJS の利用を強くオススメします。

事前準備

NuxtJS のプロジェクトを作成するために、nodeをインストール必要があります。 推奨されている中で最新のバージョンをインストールします。

開発に使用するテキストエディタには、Visual Studio Codeを使用することをオススメします。 また拡張機能として Vetur を追加してください。 Vetur には、シンタックスハイライト、スニペットや Linter などの機能があります。

プロジェクトの作成

NuxtJS のプロジェクトの作成は、create-nuxt-appによって行います。

$ npx create-nuxt-app <project-name>

プロジェクトの作成について、いくつか質問が行われるので答えていきます。 重要なものだけピックアップして説明します。 create-nuxt-app自体のバージョンによって、質問内容が異なることがあるので注意してください。

? Package manager: (Use arrow keys)
  Yarn
❯ Npm

パッケージ管理システムを選択します。 Yarn は別途インストールが必要になるので注意してください。

? Nuxt.js modules:
❯◉ Axios - Promise based HTTP client
 ◯ Progressive Web App (PWA)
 ◯ Content - Git-based headless CMS

NuxtJS で必要なモジュールを選択します。 Axios は、API の接続が必要な場合に選択してください。 PWA は、PWA の実装が必要な場合に選択してください。 Content はひとまず選択しないようにしてください。

Content についての詳細は割愛しますが、Markdown によってページを生成するためのものです。

? Rendering mode: (Use arrow keys)
❯ Universal (SSR / SSG)
  Single Page App

nuxt.config.jsのssrプロパティに該当します。 Unibersal（true）はサーバーサイドでレンダリングされ、Single Page App（false）はクライアントサイドでレンダリングされます。

? Deployment target: (Use arrow keys)
❯ Server (Node.js hosting)
  Static (Static/Jamstack hosting)

nuxt.config.jsのtargetプロパティに該当します。 Server（true）は SSR 用にビルドされ、Static（false）は静的ファイルが生成されます。

ビルド

開発

NuxtJS を開発モードで起動するには以下のコマンドを実行します。

$ npm run dev

http://localhost:3000で開発サーバーが起動するので、ブラウザでアクセスします。

SPA（Single Page Application）

SPA は、ページの構成に必要なデータを外部から取得し、JavaScript によってレンダリングを行います。 データを取得してレンダリングを行うため、SEO に弱いことや OGP の設定が個別にできないなどのデメリットがあります。 しかし、Netlify などの静的サイトホスティングサービスで簡単にリリースできるなどのメリットもあります。

SPA としてビルドするには、nuxt.config.jsのssrとtargetを以下のように設定します。

export default {
  ssr: false,
  target: 'static',
}

ビルドは以下のコマンドで実行します。

$ npm run generate

ビルド結果は、/distフォルダに出力されます。 ビルドによって作成されるファイルは、レンダリング前の静的ファイルになります。

以下のコマンドによって、ビルドしたファイルでの動作確認ができます。

$ npm run generate

SSR（Server Side Rendering）

SSR は、サーバーサイドでレンダリングした結果を、クライアントに送信します。 そのため、SPA より SEO に強くなることや個別に OGP の設定が可能になります。 ただし、SSR のリリースは、Node.js が利用できるサーバーでなければいけません。

SSR としてビルドするには、nuxt.config.jsのssrとtargetを以下のように設定します。

export default {
  ssr: true,
  target: 'server',
}

ビルドは以下のコマンドで実行します。

$ npm run build

また以下のコマンドで本番用のサーバーを起動します。

$ npm run start

SSG（Static Site Generator）

SSG は、ビルド時にページの構成に必要なデータを取得し、レンダリング済みの完全な静的ファイルを作成します。 そのため、SPA の問題であった SEO や OGP の問題を解決できますし、Netlify などの静的ホスティングサービスで簡単にリリースもできます。 ただし、ページ作成以外の目的で外部との通信は行いません。 主にブログなどの目的で使用します。

SSG としてビルドするには、nuxt.config.jsのssrとtargetを以下のように設定します。

export default {
  ssr: true,
  target: 'static',
}

ビルドコマンドは SPA と同じです。

単一ファイルコンポーネント

NuxtJS は、拡張子が.vueの単一ファイルコンポーネントと呼ばれるファイルで構成します。

単一ファイルコンポーネントは、HTML、JavaScript、CSSを 1 つのファイルで表現します。

<template>
  <!-- HTML部分 -->
</template>

<script>
export default {
  //JavaScript部分
}
</script>

<style scoped>
/* CSS部分 */
</style>

詳細については別の記事で説明します。

フォルダ構成

NuxtJS は以下のフォルダで構成されます。

わからないフォルダもあると思いますが、まずは/pages、/layouts、/components、/assets、nuxt.config.jsを覚えましょう。