Nuxt.js を試用する (クイックスタート)

このページは、Nuxt.js を簡単に試すための手順をまとめる予定のページです。

目次

注意

この手順で前提としているライブラリとバージョンは下記のとおりです。

手順

1. プロジェクトを作成したい場所で npx create-nuxt-app コマンドを実行する

npx create-nuxt-app project-name

※ project-name の部分は好きなプロジェクト名にしてください

2. プロジェクトの設定を決める

※ すぐに試す場合はすべて Enter で進めてよいです。

? Project name (プロジェクトの名前)

? Project description (プロジェクトの概要)

? Author name (プロジェクトの作者名)

? Choose the package manager (使用するパッケージマネージャー)
> Yarn
  Npm

? Choose UI framework (使用する UI フレームワーク)
> None
  Ant Design Vue
  Bootstrap Vue
  Buefy
  Bulma
  Element
  Framevuerk
  iView
  Tachyons
  Tailwind CSS
  Vuetify.js

? Choose custom server framework (使用するサーバーフレームワーク)
> None
  AdonisJs
  Express
  Fastify
  Feathers
  hapi
  Koa
  Micro

? Choose Nuxt.js modules (使用するモジュール)
 ( ) Axios
 ( ) Progressive Web App (PWA) Support

? Choose linting tools (使用する Lint ツール)
 ( ) ESLint
 ( ) Prettier
 ( ) Lint staged files

? Choose test framework None (使用するテストフレームワーク)
> None
  Jest
  AVA

? Choose rendering mode Universal (SSR) (レンダリングモード)
> Universal (SSR)
  Single Page App

3. プロジェクトディレクトリに移動して起動確認する

下記の起動コマンドを実行します。

cd project-name
yarn dev

cd project-name
npm run dev

cd project-name
nuxt

※ project-name の部分は1で決めたプロジェクト名にしてください。
※ プロジェクトディレクトリに移動していないと error Couldn't find a package.json file in "フォルダパス" のようなエラーになります。

正常起動した場合、下記のような表示になります。表示内に記載されている URL に移動して画面が表示されていることを確認します。

   ╭─────────────────────────────────────────────╮
   │                                             │
   │   Nuxt.js v2.8.1                            │
   │   Running in development mode (universal)   │
   │                                             │
   │   Listening on: http://localhost:3000/      │
   │                                             │
   ╰─────────────────────────────────────────────╯

project-name
│  .editorconfig
│  .gitignore
│  nuxt.config.js
│  package.json
│  README.md
│  yarn.lock
│  
├─.nuxt
│          
├─assets (アセット用ディレクトリ)
│      README.md
│          
├─components (コンポーネント用ディレクトリ)
│      Logo.vue
│      README.md
│      
├─layouts (レイアウト用ディレクトリ)
│      default.vue
│      README.md
│      
├─middleware (ミドルウェア用ディレクトリ)
│      README.md
│      
├─node_modules
│      
├─pages (ページ用ディレクトリ)
│      index.vue
│      README.md
│      
├─plugins (プラグイン用ディレクトリ)
│      README.md
│      
├─static (静的ファイル用ディレクトリ)
│      favicon.ico
│      README.md
│      
└─store
       README.md

4. ページの編集の確認

pages/index.vue の内容 (<template> 内など) を書き換えて、ページに内容が反映されるか確認します。

(yarn dev や npm run dev, nuxt を実行していない場合は実行します)

5. ページの追加

pages ディレクトリ内に新しいファイル (about.vue など) を追加します。

<template>
  <nuxt-link to="/">{{ name }}</nuxt-link>
</template>

<script>
export default {
  data() {
    return { name: "リンク" }
  }
}
</script>

<style>
a { color: red }
</style>

(yarn dev や npm run dev, nuxt を実行していない場合は実行します)

6. ビルド

下記のようなコマンドを実行します。

yarn build

npm run build

nuxt build

• プロジェクト作成時の「Choose rendering mode Universal (SSR)」で「Single Page App」を選んだ場合は dist ディレクトリにファイルがビルドされます。
• nuxt.config.js の mode を変更するとビルドの動作を変更できます。(universal = SSR, spa = SPA)
• nuxt build --spa などのコマンドを実行すると、SSR を選んでいても SPA モードでビルドされます。

[任意] ファイルの静的生成

下記のようなコマンドを実行します。

yarn generate

npm run generate

nuxt generate

実行すると、プロジェクトディレクトリ直下に dist ディレクトリが生成されます。

dist
│  .nojekyll
│  200.html
│  favicon.ico
│  index.html
│  README.md
│  
├─about
│      index.html (上記の例で作成した about.vue)
│      
└─_nuxt
        ********************.js
        LICENSES
        

[任意] 共通 SCSS を追加する

1. プロジェクトに node-sass, sass-loader を追加する

プロジェクトディレクトリ上で下記のコマンドを実行します。

yarn add --dev node-sass sass-loader

npm install --save-dev node-sass sass-loader

2. SCSS ファイルを作成する

プロジェクト内に SCSS ファイルを作成します。

body {
    background-color: black;
}

3. nuxt.config.js ファイルに SCSS ファイルの設定を追加する

プロジェクトディレクトリ直下にある nuxt.config.js に、作成した SCSS ファイルを指定します。

  /*
  ** Global CSS
  */
  css: [
    '@/assets/css/common.scss'
  ],

4. 確認

yarn dev や npm run dev, nuxt でスタイルが適用されているか確認します。