Nuxt.js 入門 (1) - 事始め

「Nuxt.js」の使い方をまとめました。

・Nuxt.js 2.15.8

1. Nuxt.js

「Nuxt.js」（ナクスト・ジェイエス）は、「Vue.js」ベースのJavaScriptのフレームワークです。「React.js」ベースのサーバーサイドレンダリング用フレームワークである「Next.js」に触発されて作られました。

Nuxt.js - ユニバーサル Vue.js アプリケーション

主な特徴は、次のとおりです。

・サーバーサイドレンダリング
サーバー側で表示をレンダリングする機能を提供します。

・データ管理
アプリ全体のデータをひとまとめにして、コンポーネントからそのデータを参照して動くように設計できます。

・ルーティング機能
複数のページを自動的にURLに関連付ける機能を提供します。

2.はじめてのNuxt.jsアプリの実行

はじめてのNuxt.jsアプリの実行手順は、次のとおりです。

(1) 「Node.js」と「Vue.js」の開発環境を準備。

(2) 「nuxt_app」フォルダを作成し、「package.json」を生成し、以下のように編集。

{
    "name": "my-app",
    "scripts": {
        "dev": "nuxt"
    }
}

(3) 「nuxt_app」フォルダで、以下のコマンドを実行。
「Nuxt.js」のパッケージがインストールされます。

$ npm install --save nuxt

(4) 「nuxt_app」フォルダ下に「pages」フォルダを生成し、「index.vue」を生成し、以下のように編集。

<template>
  <div>
    Hello Nuxt!
  </div>
</template>

(5) 「nuxt_app」フォルダで、以下のコマンドを実行。

$ npm run dev

(6) ブラウザで「http://localhost:3000/」を開く。

ブラウザの「ページのソースを表示」で確認すると、Vueアプリが「<div id="app"></div>」のようにタグのみだったのに対し、Nuxtアプリは「<div>Hello Nuxt!</div>」のように中身が存在し、サーバからレンダリング済みで渡されていることがわかります。

次回