vue -мета отказ от рендеринга на стороне сервера в приложении nuxt

Question

У меня есть {src: '~/plugins/vue-meta.js', ssr: true}, в nuxt.config.js

в index.vue:

  async asyncData({ params, store }) {
    await store.dispatch("articles/getArticle", params.slug);
    return {
      article: store.getters["articles/getArticle"]
    };
  },
  metaInfo() {
    return {
      title: this.article.title,
      meta: [
        {
          vmid: "description",
          hid: "description",
          name: "description",
          content: this.article.meta_tag_content
        },
        {
          property: "og:title",
          hid: "og-title",
          vmid: "og-title",
          content: this.article.title
        },
        {
          property: "og:description",
          hid: "og-description",
          vmid: "og-description",
          content: this.article.meta_tag_content
        },
        {
          property: "og:image",
          hid: "og-image",
          vmid: "og-image",
          content: this.article.small_image_url
        },
        {
          property: "og:type",
          hid: "og-type",
          vmid: "og-type",
          content: "article"
        },
        {
          property: "og:url",
          hid: "og-url",
          vmid: "og-url",
          content: location.origin
        },
        {
          name: "twitter:card",
          hid: "twitter-card",
          vmid: "twitter-card",
          content: this.article.meta_tag_content
        }
      ]
    };
  },

, но ничего из этого не делает на стороне сервера - это только на стороне клиента, что означает Facebook не будет читать метаэлементы OG.

Есть ли что-то еще, что нужно установить для Nuxt для рендеринга на стороне сервера?

В nuxt установлен режим "универсальный". конфигурации. js. Неважно, использую ли я команду generate, run dev или run start, результат одинаков во всех из них.

Answer 1

Nuxt. js уже включает vue-meta по умолчанию. Однако вам нужно использовать head() вместо metaInfo().

Из vue -мета документов :

Примечание

Хотя мы говорим о metaInfo переменная на этой странице, обратите внимание, что keyName настраивается и может отличаться в вашем случае. Например, Nuxt. js использует head как keyName

Так что замените metaInfo на head и удалите {src: '~/plugins/vue-meta.js', ssr: true} (как оно уже включено), тогда оно должно работать ( Я проверил это на проекте fre sh).