親バカエンジニアのナレッジ帳

webのエンジニアをやっており、日頃の開発で詰まったことや書き残しておきたいことを載せています。

Nuxt.jsでプロジェクトを作成してみた

Nuxt.jsとは?

Nuxt.jsとは、Vueアプリケーションを作成するフレームワークです。
通常のVue.jsの開発で頻繁に使用する以下の機能を最初から含んでいます。

・Vue 2
・Vue Router
・Vuex
・Vue Server Renderer
・vue-meta

なんと言っても「Vue Server Renderer」がありがたい機能ですね。
SEOを意識したい場合に、必要な要素がDOM構築後にレンダリングされ、Googleで検知されにくいことがあります。
Google以外でもOGタグなどは、SPAでレンダリングしてしまうとSNSでクロールしてもらえないなど悲しい目にも遭います。
ページ生成後にJavascriptで生成されたタグは色々不都合なことがあるんですね。。。

Nuxt.jsでは初回表示のDOM生成をサーバサイド側で行うサーバーサイドレンダリングが自動的に機能します。
個別記事などで、ページ生成前に動的にAPIから値を取得したい場合に有効です。
その場合はasyncData()やfetch()といった関数を使うことになります。
むしろasyncDataやfetchをを使わないのであれば、通常のVue.jsでもできることばかりなのでNuxt.js使う意味ないのでは?という感じですね。

Nuxt.jsプロジェクトの作成

今回はnpmのvue-cliを使い、スターターテンプレート(starter-template)でNuxt.jsプロジェクトを作成しましょう。
npmコマンドを使うことが前提のため、まだ使えない方はNode.jsとnpmのインストールを先にしてください。
以下のページが参考になりました。(大変わかりやすいです!)
qiita.com

npmの準備ができたら、まずはvue-cliのインストールです。
※すでにインストールされている場合は不要です。

npm install -g vue-cli

次にプロジェクトを作成するディレクトリに移動してスターターテンプレートを使い、プロジェクトを作成しましょう。
※test_projectの値は各プロジェクトに合わせてください。

vue init nuxt-community/starter-template test_project

以下を入力するとプロジェクトが作成されますが、デフォルトのままで良い場合はそのまま全部エンターで進んでください。

  • Project name (プロジェクト名)
  • Project description (プロジェクトの説明)
  • Author (作成者)

ではプロジェクトの中に移りましょう。

cd test_project

ここでpackage.jsonの中身を見ると、Nuxt.jsの様々なライブラリが書かれています。

{
  "name": "test_project",
  "version": "1.0.0",
  "description": "Nuxt.js project",
  "author": "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "precommit": "npm run lint"
  },
  "dependencies": {
    "nuxt": "^2.0.0"
  },
  "devDependencies": {
    "babel-eslint": "^10.0.1",
    "eslint": "^4.19.1",
    "eslint-friendly-formatter": "^4.0.1",
    "eslint-loader": "^2.1.1",
    "eslint-plugin-vue": "^4.0.0"
  }
}

上記をインストールするために「npm install」しましょう。

npm install

インストール後にこんな感じのものが出て来ますね。

                      :-:
                     .==-+:
                    .==. :+- .-=-
                   .==.   :==++-+=.
                  :==.     -**: :+=.
                 :+-      :*+++. .++.
                :+-      -*= .++: .=+.
               -+:      =*-   .+*: .=+:
              -+:     .=*-     .=*-  =+:
            .==:     .+*:        -*-  -+-
           .=+:.....:+*-.........:=*=..=*-
           .-=------=++============++====:

           Thanks for installing nuxtjs 🙏
   Please consider donating to our open collective
          to help us maintain this package.

さあ、後は開発サーバの起動です。

npm run dev

これでいつものサンプル画面が表示されればOKです!