Nuxt.jsの便利な小ネタ
Nuxt.jsは、Vue.jsベースのフレームワークであり、静的サイトジェネレーターとしても使われています。今回は、Nuxt.jsの便利な小ネタを紹介します。
1. Meta情報の設定
SEO対策のために、HTMLの<meta>タグに情報を埋め込む必要があります。Nuxt.jsでは、headオブジェクトを使って、Head情報を簡単に設定できます。
export default {
head: {
title: 'Nuxt.jsの便利な小ネタ',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: 'Nuxt.jsの便利な小ネタを紹介します' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
}
}
titleやmeta、linkオブジェクトでそれぞれ設定します。hidプロパティを設定すると、同じname属性に対して別の値を持たせることができます。
2. ローディング画面の設定
ページの読み込み中にローディング画面を表示することができます。Nuxt.jsでは、loadingプロパティを使って、簡単に設定できます。
export default {
loading: {
color: 'blue',
height: '5px'
}
}
colorプロパティでは、ローディング画面の色を指定できます。heightプロパティでは、ローディング画面の高さを指定できます。
3. 路由パラメータの設定
動的なページを作る場合、URLの一部をパラメータとして設定する必要があります。Nuxt.jsでは、pagesディレクトリ以下のファイル名を使って、動的なURLを設定できます。
// pages/posts/_id.vue
<template>
<div>
<h1>Post #{{ $route.params.id }}</h1>
<p>{{ post }}</p>
</div>
</template>
<script>
export default {
async asyncData({ params, $axios }) {
const { data } = await $axios.get(`/api/posts/${params.id}`)
return { post: data }
}
}
</script>
_id.vueというファイル名は、idという動的なパラメータを持つページを表します。$route.params.idで、パラメータの値を取得できます。また、asyncDataで、ページがロードされる前にAPIからデータを取得できます。
4. Vuexのストアの設定
Nuxt.jsでは、Vuexを使って、アプリケーション全体の状態を管理できます。Vuexのストアを使うには、storeディレクトリを作成し、index.js内でストアを定義します。
// store/index.js
export const state = () => ({
counter: 0
})
export const mutations = {
increment(state) {
state.counter++
}
}
stateで状態を定義し、mutationsで状態を変更するメソッドを定義します。リアクティブデータのため、直接状態を変更せずにmutationsを呼び出す必要があります。例えば、以下のようにVueコンポーネントで使うことができます。
<script>
import { mapState, mapMutations } from 'vuex'
export default {
computed: {
...mapState(['counter'])
},
methods: {
...mapMutations(['increment'])
}
}
</script>
mapStateで状態を取得し、mapMutationsでメソッドをマッピングします。...によって、オブジェクトを展開して書く必要があります。
5. 静的ファイルの配置
Nuxt.jsでは、静的ファイルを効率的かつ管理しやすく配置できます。staticディレクトリに配置したファイルは、出力時にコピーされます。
<img src="/logo.png">
静的ファイルを参照するには、パスをスラッシュで始めます。これによって、Nuxt.jsが自動的にファイルのパスを解決してくれます。
まとめ
以上、Nuxt.jsの便利な小ネタを紹介しました。Meta情報の設定やローディング画面、動的URL、Vuexのストア、静的ファイルの配置など、簡単に設定できる機能がたくさんあります。これらの小ネタを使って、Nuxt.jsの機能をフル活用してみてください。