ローカルでNuxt.jsをさわってみた

LiSMOtechの小谷です。前回に引き続きNuxt.jsについてみていきます。今回使用したNuxt.jsのバージョンは2.15.7です。

今回は少し画面の方をいじった所感をVue.jsと比較もいれつつ見ていけたらなと思います。ちなみに、今更ですが、読み方はナクストジェイエスです。

Vuterをインストール

VS Codeを使用している方はそのままで見づらいので、まずVS Codeの拡張機能のVuterをインストールしましょう。Vuterをいれると拡張子が.vueのファイルも見やすくハイライトやコード補完などしてくれますので。

ページの追加

ページを追加してみます。

pages /index.vueから<Tutorial/>を削除して、Tutorial.vueをpagesフォルダの直下にfunフォルダを作成し、その中にindex.vueを作成します。中身は仮で以下のように適当なものを書きました。

<template>
  <div>
    <h1>fun.vue</h1>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({})
</script>

<NuxtLink to="/fun">to fun page</NuxtLink>

ここまでの編集して、コンパイル後に.nuxt/routes.jsonなどruter関連のファイルを見てみると、勝手に 編集してくれていますね。
Vue.jsのRouterの場合はパスやそのパスに対するコンポーネントの指定など色々と自分で書いていた覚えがありますが、Nuxt.jsの場合はこのあたりを勝手に書いてくれて楽でした。

ですが、試しに先ほど作成したfunフォルダごと削除してから保存して再びruter関連のファイルを見てみますと、funのページに関する記述は残ったままになっています。。。なので、このあたりは注意しなくてはならないのかもしれませんね。

コンポーネントの追加

次はコンポーネントを追加してみます。まずはもともとあったNuxtLogoでも追加してみましょう。

と言ってもNuxt.jsではコンポーネントの自動インポート機能があるらしく簡単にコンポーネントを追加できるみたいです。

自動インポートの設定が済んでいるなら、追加したいファイルの追加したい箇所に<NuxtLogo/>といれるだけです！

この設定はnuxt.config.jsに以下のように書いてあります。

export default {

  components: true

}

また、bootstrap-vueやVuetifyなどのUIライブラリから提供されるコンポーネントも自動インポートで可能のようです。試しにbootstrapを以下のコマンドでインストールして試してみます。

npm install --save bootstrap-vue

その後、nuxt.config.jsで以下のように書きます。

modules: [
  'bootstrap-vue/nuxt',
]

あとは上に書いたような感じでコンポーネントを呼びたい箇所で呼ぶだけです。

このコンポーネントの自動インポートは楽で良いですね！

Vue.jsなどの場合でのコンポーネントの呼び出しは、使用するファイルで都度コンポーネント呼び出し文を書いてあげる必要がありましたので。

ストアの作成と使用

ひとまずでストアを作成してみましたが、ストアのあたりは特にVue.jsと変わらずでした。ストアのあたりはVue.jsでもNuxt.jsでもVuexを使っていますので。

実装した時の方法だけ記載しておきます。今回作成したのは、トップページにテキストフィールドを置きにその入力された値を別コンポーネントに受け取って表示させてみます。

以下のようなフォルダの構成で試してみました。

nuxt-test-project
├─.nuxt
├─ components
│
│
├─ components
│ ├ Header.vue
│
├pages
│ ├ index.vue
│
├ store
│ ├ index.js
│ ├ mutations.js
│ ├ state.js
│
├─nuxt.config.js

※簡単に書いて、関係ないファイルなどは省略しました。

components/Header.vueにテキストフィールドの値を表示させ、テキストフィールドは先ほども使用したbootstrap-vueのコンポーネントを使用します。

以下のように編集して、テキストフィールドの値はuserNameという名前でstoreに保存するようにしました。

・components/Header.vue

<template>
  <header class="header">
  <span>
    こんにちは
  </span>
  <span v-if="this.$store.state.userName">
    {{ `${this.$store.state.userName} さん` }}
  </span>
  </header>
</template>

<script>
export default {
  props: ['userName']
}
</script>

<style>
.header {
  width: 100%;
  height: 40px;
  background-color: greenyellow;
}
</style>

<template>
  <div>
    <Header :userName="nameInput" />
    <h1 class="text-lg font-bold">index.vue</h1>
    <b-form-input
      :value="nameInput"
      placeholder="Enter your name"
      @input="nameInputChange($event)"
    ></b-form-input>
    <NuxtLink to="/fun">to fun page</NuxtLink>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { mapMutations } from 'vuex'

export default Vue.extend({
  computed: {
    nameInput: {
      get: function () {
        return this.$store.state.userName
      },
      set: function (newVal) {
        this.nameInputChange(newVal)
      }
    }
  },
  methods: {
    ...mapMutations({
      nameInputChange: 'nameInputChange'
    })
  }
})
</script>

export const state = () => ({
  userName: ''
})

export const mutations = {
  nameInputChange(state, val) {
    state.userName = val
  }
}

export default {
  nameInputChange(state, value) {
    state.userName = value
  }
}

export default () => ({
  userName: ''
})

まとめ

少し画面をいじりながらNuxt.jsがVue.jsと異なる点を見ていきました。

今回確認した違いはページ遷移とコンポーネントの呼び出しについてです。勿論、その他にも色々細かな違いがあると思いますので、公式のドキュメントなども引き続き読んでいきたいですね。

あとは、よくあげられるVue.jsとの違いとしてSSRができることやSEOが強かったりがあると思います。

SSRなどのレンダリングの用語についてはこちらも参考にして頂けたらと思います。