代码之家 › 专栏 › 技术社区 › rocambille

如何使用Nuxt在html元素上设置lang属性?

vue-meta nuxt.js vue.js html javascript

rocambille · 技术社区 · 6 年前

使用文件 nuxt.config.js 文件 head 可以自定义内容以添加一些元或其他内容:

module.exports = {
  /*
  ** Headers of the page
  */
  head: {
    title: 'awesome title',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'Nuxt.js project' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  ...
}

但是我在文档中找不到任何可以设置 html 元素--我想设置 lang 属性有没有办法做到这一点?

2 回复 | 直到 6 年前

yuriy636 6 年前

资料来源: Declaring language in HTML tag Â· Issue #388 Â· nuxt/nuxt.js

head 支持a htmlAttrs 所有物它将映射每个 关键字:值 对象的 属性:值

module.exports = {
  head: {
    htmlAttrs: {
      lang: 'en'
    },
    title: 'awesome title',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'Nuxt.js project' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  ...
}

Daniel 2 年前

在Nuxt 3中键入组件

<script setup>
useHead({
  htmlAttrs: {
    lang: 'en',
    style: 'font-size: 13px'
  }
})
</script>

https://v3.nuxtjs.org/guide/features/head-management/

推荐文章

Coderama · 在v-for指令中使用:key属性时,TS应出现类型错误

2 年前

zh-mskl9 · 为Nuxt+Php应用程序定义Procfile的正确方法

6 年前

pirmax · VueJS-VueX和flash消息

6 年前

Chris · 如何在使用Nuxt时在前端执行异步请求。js?

6 年前

asanas · 我们如何在Nuxt中只包含lodash所需的模块?Vuejs项目?

6 年前

Yakalent · Asyncdata与Fetch之间的差异

6 年前

dotnetCarpenter · 将webpack worker loader与nuxt一起使用。js公司

6 年前

KitKit · 在NuxtJS-VueJS中通过身份验证全局配置Axios

6 年前

rocambille · 如何使用Nuxt在html元素上设置lang属性?

6 年前

ataboy · 为什么在nuxt的服务器和浏览器中执行数据配置

6 年前