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

1. Nuxt.js

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

Nuxt.js – ユニバーサル Vue.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>」のように中身が存在し、サーバからレンダリング済みで渡されていることがわかります。

関連記事:

Nuxt.js 入門 (2) – プロジェクト作成 簡単な例で始めるVue3でTypeScript入門 Nuxt.js、Vue.jsによるToDoのサンプル マークダウンを表示するサンプル ダッシュボード(ADMIN) Nuxt.js テクニック Nuxt.jsの特徴やメリット Nuxt.js -jsonからEXCELファイル作成  Nuxt.js(Vue.js)の「v-for」でコンポーネントをループさせる方法 v-forを指定回数でループさせ、なおかつ配列へアクセスする(Nuxt.js/Vue.js) Nuxt.js初心者がハンバーガーメニューを実装しながらv-onとかv-ifを学ぶ Nuxt-HEADタグ操作 Nuxt.js Excelファイルを読み込む Vue3でTypeScript実践 ECサイト構築例 Nuxt.js + Vue.js LP構築例 Nuxt.js + Vue.js