Overview
Nuxt のアプリケーションにおいて HTML の head タグを編集する方法を記載します。
config ファイルで head タグを編集する
nuxt.config.js の head property を更新します。
デフォルトで生成される設定ファイルは以下です。
{
head: {
title: process.env.npm_package_name || '',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
],
},
}
Bootstrap-Vue のレスポンシブ設定をしてみる
レスポンシブ設定をするために Bootstrap-Vue の Responsive meta tag に記載されてる内容に更新します。
diff --git a/nuxt.config.js b/nuxt.config.js index 53fe780..fe3be60 100644 --- a/nuxt.config.js +++ b/nuxt.config.js @@ -8,7 +8,7 @@ module.exports = { title: process.env.npm_package_name || '', meta: [ { charset: 'utf-8' }, - { name: 'viewport', content: 'width=device-width, initial-scale=1' }, + { name: 'viewport', content: 'width=device-width, initial-scale=1, shrink-to-fit=no' }, { hid: 'description', name: 'description', content: process.env.npm_package_description || '' } ], link: [
