Nuxt.jsの始め方

Nuxt.jsを始めたい方に向けて、導入の仕方をまとめます。
ライフサイクルなど細かい内容は公式ドキュメントをご確認ください。

前提条件

• npmの5.2.0以降のバージョンがインストールされていること

インストール

プロジェクトディレクトリの作成

$ mkdir test && cd $_

Nuxt.jsフレームワークのインストール

$ npx create-nuxt-app

開発

開発サーバーを起動

$ npm run dev

デプロイ

SSRモードでサーバーを起動

$ npm run build && npm run start

静的HTML生成

$ npm run generate

その他

pug/stylusの導入

pug

pugのモジュールをインストール

$ npm i --save pug pug-loader pug-plain-loader

全*.vueファイルのtemplateタグにlang="pug"を追加する

*.vue

<!-- <template> -->

<template lang="pug">

stylus

stylusのモジュールをインストール

$ npm i --save stylus stylus-loader

全*.vueファイルのstyleタグにlang="stylus"を追加する
ここの内容を他のスタイルに影響させたくない場合はscopedも追加する

*.vue

<!-- <style> -->

<style lang="stylus" scoped>

グローバルCSS（stylus）の導入

リソース用モジュールをインストール

$ npm i --save stylus stylus-loader @nuxtjs/style-resources

stylファイルの作成

$ mkdir assets/style && touch assets/style/reset.styl assets/style/variables.styl

nuxt.config.jsでモジュールの読み込み、stylファイルの読み込みを記述

nuxt.config.js

module.exports = {
  modules: [
    '@nuxtjs/style-resources'
  ],
  css: ['~/assets/style/reset.styl'],
  styleResources: {
    stylus: ['~/assets/style/variables.styl']
  }
}

リセットスタイルを定義

reset.styl

*
*:before
*:after
  box-sizing border-box
  margin 0

変数を定義

variables.styl

textColor = #f00

*vueファイルで変数を使用する

*.vue

<style lang="stylus">
div
  color textColor
</style>

storeの導入

データ定義

store用のファイルを作成

$ touch store/index.js

保持しておきたいデータをstate内にcounterという名前で定義
state内のcounterの数値を1ずつ増やすincrementメソッドを定義

store/index.js

export const state = () => ({
  counter: 0
})

export const mutations = {
  increment (state) {
    state.counter++
  }
}

データへのアクセス

state内のcounterの値を取得

this.$store.state.counter

出力結果

0

データの変更

mutations内のincrementメソッドを実行

this.$store.commit('increment')

transitionタグ

html（pug）の定義

transitionタグを追加して、子要素はv-ifなどで存在確認をさせる

transition
  p(v-if="show") Hello world!

css（stylus）の定義

v-enterとv-leave-toで最初（出現時）と最後（消失時）のstyleを定義
そのスタイルにどういうtransitionをかけるかv-enter-activeとv-leave-activeで定義

.v-enter-active
.v-leave-active
  transition opacity .5s

.v-enter
.v-leave-to
  opacity 0

ページ遷移transition

html（pug）の定義

nuxt-linkタグを追加する

nuxt-link(to="/test/") go to test!

css（stylus）の定義

page-enterとpage-leave-toで最初（出現時）と最後（消失時）のstyleを定義
そのスタイルにどういうtransitionをかけるかpage-enter-activeとpage-leave-activeで定義

.page-enter-active
.page-leave-active
  transition opacity .5s

.page-enter
.page-leave-to
  opacity 0

ページ読み込み時のLoading表示

Loading用のファイルを作成

$ mkdir components/Loading && touch components/Loading/index.vue

components/Loading/index.vue

<template lang="pug">
.loading-page(v-if="loading")
  p Loading...
</template>

<script>
export default {
  data: () => ({
    loading: false
  }),
  methods: {
    start () {
      this.loading = true
    },
    finish () {
      setTimeout(() => {
        this.loading = false
      }, 3000)
    }
  }
}
</script>

<style lang="stylus" scoped></style>

nuxt.config.js

module.exports = {
  loading: '~/components/Loading/index.vue' // 追記
}

テンプレートレイアウト変更

テンプレート用のファイルを作成

$ touch layouts/another.vue

layouts/another.vue

<template lang="pug">
.l-another
  nuxt
</template>

<script>
export default {}
</script>

<style lang="stylus" scoped></style>

*.vue

export default {
  layout: 'another', // 追記
}

エラーページ

エラー用のファイルを作成

$ touch layouts/error.vue

layouts/error.vue

<template lang="pug">
.container
  h1(v-if="error.statusCode === 404") ページが見つかりません
  h1(v-else) エラーが発生しました
  nuxt-link(to="/") ホーム
</template>

<script>
export default {
  props: {
    error: {
      type: Object,
      default: null
    }
  }
}
</script>

<style lang="stylus" scoped></style>

コンソールの削除

build内にdrop_consoleの記述を追加

nuxt.config.js

module.exports = {
  build: {
    terser: {
      terserOptions: {
        compress: { drop_console: true }
      }
    }
  }
}

作業ディレクトリをまとめる

作業ディレクトリの作成、移動

$ mkdir src && mv assets components layouts pages plugins static store middleware src/

nuxt.config.js

module.exports = {
  srcDir: 'src/', // 追記
}

参考文献

この記事は以下の情報を参考にして執筆しました。

• Nuxt.js