![](https://lismotech.co.jp/wp-content/uploads/2021/08/nuxtアイキャッチ_ローカル開発.png)
LiSMOtechの小谷です。前回に引き続きNuxt.jsについてみていきます。今回使用したNuxt.jsのバージョンは2.15.7です。
今回は少し画面の方をいじった所感をVue.jsと比較もいれつつ見ていけたらなと思います。ちなみに、今更ですが、読み方はナクストジェイエスです。
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>
pages /index.vueの方のHTML部分には
<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>
・store/index.js
export const state = () => ({
userName: ''
})
export const mutations = {
nameInputChange(state, val) {
state.userName = val
}
}
・store/mutations.js
export default {
nameInputChange(state, value) {
state.userName = value
}
}
・store/state.js
export default () => ({
userName: ''
})
編集完了後、以下のような画面になってテキストフィールドに入力した値が上のヘッダーに入ってくると思います!
少し画面をいじりながらNuxt.jsがVue.jsと異なる点を見ていきました。
今回確認した違いはページ遷移とコンポーネントの呼び出しについてです。勿論、その他にも色々細かな違いがあると思いますので、公式のドキュメントなども引き続き読んでいきたいですね。
あとは、よくあげられるVue.jsとの違いとしてSSRができることやSEOが強かったりがあると思います。
SSRなどのレンダリングの用語についてはこちらも参考にして頂けたらと思います。
NEXTGATE LiSMOtechでは中小企業を中心にブランディング・WEBマーケティングを活用したWEB戦略を提供しています。
企業課題・問題に関するご相談、WEBサイト制作やグラフィックデザイン制作のクリエイティブに関するご相談やご質問、お見積りなどお気軽にお問い合わせください。
平日10:00〜19:00
© NEXTGATE LiSMOtech All rights reserved