2018年01月16日

Nuxt.jsでヘッダー情報を設定

nuxt.config.jsには以下のようにheader情報を設定しておき、

module.exports = {
head: {
titleTemplate: '%s - Nuxt.js',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: 'Meta description' }
]
}
}


pagesディレクトリ配下のページコンポーネントで以下のようにtitleを設定することで、

<template>
<h1>Hello world!!!</h1>
</template>
<script>
export default {
head () {
return {
title: 'ok',
}
}
}
</script>


以下のようなtitle要素が出力される

<title data-n-head="true">ok - Nuxt.js</title>


タグ:Nuxt.js
posted by ねこまんま at 17:59 | Comment(0) | vue.js | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。