Nuxt JS SSR 标题未定义

Question

I'm using Nuxt JS/Vue to create an SEO friendly Server Side Rendered JS web app.我正在使用 Nuxt JS/Vue 创建一个 SEO 友好的服务器端渲染 JS web 应用程序。 Nuxt allows setting the head option in each Vue component which it then take and via vue-meta updates the page title. Nuxt 允许在每个 Vue 组件中设置head选项，然后通过vue-meta更新页面标题。 I get a user based on the route and then set the title to the user's name.我根据路线获得一个用户，然后将title设置为用户名。 This works when running a local server.这在运行本地服务器时有效。 But when I push this up to Firebase I get the title as undefined (on refresh).但是当我将它推到 Firebase 时，我得到的title是未定义的（刷新时）。

Vue Component:视图组件：

<template>
  <div class="user">
    <h3>{{ name }}</h3>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data () {
    return {
      title: 'test'
    }
  },
  head () {
    return {
      title: this.name,
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: 'My custom description'
        }
      ]
    }
  },
  async asyncData ({ params, error }) {
    try {
      const { data } = await axios.get(`https://jsonplaceholder.typicode.com/users/${+params.id}`)
      return data
    } catch (e) {
      error({ message: 'User not found', statusCode: 404 })
    }
  },
  mounted () {
    console.log(this.name)
    this.title = this.name
  }
}
</script>

Answer 1

I am having the same issue and I solved using this. 我有同样的问题，我解决了这个问题。 Add the below code in your page in script tag under export default {}. 在页面的默认导出默认{}下的脚本标签中添加以下代码。

head () {
        return {
            title: this.metaTitle,
            meta: [
                { hid: 'description', name: 'description', content: this.metaDescription },
                { name: 'keywords', content: this.metaTags},
            ]
        }
    }

Answer 2

I know that this is an old tread, but I just wanted to give some reasoning on the matter.. You can use both solutions: 我知道这是一个古老的起点，但是我只想对此事提供一些理由。您可以使用两种解决方案：

head: { title : '' }

head() { return { title: '' }

BUT the difference between them is that when you use head as a property you won't be able to access this or any property you set in asyncData or data methods, you will only be limited to text in main lines. 但是它们之间的区别是，当您将head用作属性时，将无法访问this属性或在asyncData或data方法中设置的任何属性，而只能将文本限制在主行中。 The reason is that when you use it as a property it gets populated when the component gets constructed, which is actually before the data is set (on the server) 原因是，当您将其用作属性时，将在构造组件时填充它，而实际上是在设置数据之前（在服务器上）

When you use it as a method head() and return an object with the standart vue-meta properties, you can access data() and asyncData() set properties. 当将它用作方法head()并返回具有标准vue-meta属性的对象时，可以访问data()和asyncData()设置属性。

Answer 3

If you are using nuxt 3 then you can define your title 3 way如果你使用的是 nuxt 3，那么你可以用 3 种方式定义你的标题

Globaly in nuxt.config.ts/js file nuxt.config.ts /js文件中的全局

export default defineNuxtConfig({
   meta: {
       title: "Nuxt 3",
   }
})

Localy into.vue files本地化为.vue文件
a.一种。 Form <script setup> useMeta({ title: 'ROAST - Home' }) </script>表单<script setup> useMeta({ title: 'ROAST - Home' }) </script>
b. b. Into template tag(under 1st div):进入模板标签（在第一个 div 下）：
```
 <template> <div> <Head> <Title>Nuxt 3</Title> </Head> </div> </template>
```

Nuxt JS SSR 标题未定义

问题描述

3 个解决方案

解决方案1
2 2018-07-10 08:29:24

解决方案2
0 2019-08-26 08:18:40

解决方案3
0 2022-10-01 07:59:14

Nuxt JS SSR 标题未定义

问题描述

3 个解决方案

解决方案1 2 2018-07-10 08:29:24

解决方案2 0 2019-08-26 08:18:40

解决方案3 0 2022-10-01 07:59:14

解决方案1
2 2018-07-10 08:29:24

解决方案2
0 2019-08-26 08:18:40

解决方案3
0 2022-10-01 07:59:14