【Nuxt.js】Vue.jsでSSR - tapitapi’s blog

以前Vue.jsでプレレンダリングの方法を紹介したので、今回はNuxt.jsを使って、Vue.jsでSSRを簡単に実現する方法を紹介します。

Vue.jsでプレレンダリングの記事はこちら

tapitapi.hatenadiary.com

サーバサイドレンダリング公式リファレンス

ssr.vuejs.org

Nuxtアプリ（簡単バージョン）

1. nuxt_appというフォルダを作成し、移動

mkdir nuxt_app

cd nuxt_app

2. 移動したフォルダ内に、package.jsonを作成

package.json

{
"name":"nuxt_app",
"scripts":{
"dev":"nuxt"
}
}

3. nuxtをインストール

npm install --save nuxt

package-lock.jsonが作成されればOK

4. pages/index.vueを作成

mkdir pages

pages/index.vue

<template>
<div>Hello Vue!</div>
</template>

5. ビルド

npm run dev

.nuxtフォルダが作成されればOK

6. http://localhost:3000/ にアクセスし、下記が表示されれば成功！

f:id:kayo445:20200527190457p:plain

Nuxtアプリ（本格バージョン）

1. アプリ作成

下記コマンドで、nuxt_second_appというアプリを作成

npx create-nuxt-app nuxt_second_app

下記質問に全て答えるーー！

名前：そのままenterを押してOK

? Project name (nuxt_second_app)

アプリの説明：そのままenterを押してOK

? Project description (My fabulous Nuxt.js project)

作成者の名前：赤文字のように、名前を記入

? Author name () tapitapi

プログラミング言語を選択：そのままenter(defaultのJavaScriptが選択される)

?Choose programming language (Use arrow keys)
❯ JavaScript
TypeScript?

パッケージ管理ツール選択：↓キーでNpmを選択してenter（Yarnを選択する場合はそのままenter）

Choose the package manager (Use arrow keys)
❯ Yarn
Npm?

Choose the package manager
Yarn
❯ Npm

UIフレームワークを選択：そのままenter(defaultのNoneが選択される)

? Choose UI framework (Use arrow keys)
❯ None
Ant Design Vue
Bootstrap Vue
Buefy
Bulma
Element
Framevuerk
iView
Tachyons
Tailwind CSS
Vuesax
Vuetify.js

サーバフレームワークを選択：そのままenter(defaultのNoneが選択される)

? Choose custom server framework (Use arrow keys)
❯ None (Recommended)
AdonisJs
Express
Fastify
Feathers
hapi
Koa
Micro

Nuxt.jsのモジュールで使用したいものを選択：そのままenter（何も選ばない）でOK

? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ Axios
◯ Progressive Web App (PWA) Support
◯ DotEnv

※　iを押すと下記のように全てOn（選択）になるが、今回は全て選ばない

? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◉ Axios
◉ Progressive Web App (PWA) Support
◉ DotEnv

Linting ツール（コード検査ツール）で使用したいものを選択：そのままenter（何も選ばない）でOK

? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ ESLint
◯ Prettier
◯ Lint staged files
◯ StyleLint

テストフレームワークで使用したいものを選択：そのままenter（何も選ばない）でOK

? Choose test framework (Use arrow keys)
❯ None
Jest
AVA

レンダリングモードを選択：今回はSSRを実現したいので、そのままenter

? Choose rendering mode (Use arrow keys)
❯ Universal (SSR)
Single Page App

開発ツールで使用したいものを選択：そのままenter（何も選ばない）でOK

? Choose development tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ jsconfig.json (Recommended for VS Code)
◯ Semantic Pull Requests

これで、nuxt_second_appというフォルダが作成され、その中にアプリが作成されます。（ネット環境によっては数分かかる場合あり）

2. nuxt_second_appフォルダ内に移動し、ビルド