やりたいこと
Nuxt.js で HTML要素 <html> に lang 属性をつけて <html lang="ja"> にする
実現方法
Nuxtコンフィグで全体適用する場合と、ページ単体に適用する方法を紹介します。 head の中に書くのがポイントです。
nuxt.config.js
const pkg = require('./package')
module.exports = {
mode: 'spa',
/*
** Headers of the page
*/
head: {
title: pkg.name,
htmlAttrs: {
lang: 'ja'
},
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: pkg.description }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
// ...
}
pages/sample.vue
<template>
</template>
<script>
export default {
head() {
return {
htmlAttrs: {
lang: 'ja'
},
}
}
}
</script>