asyncData seo Cannot read property '$nuxt' of undefined

[srk4393]

For SEO in Facebook and Google Search trying to place a as shown below

 ERROR  Cannot read property '$nuxt' of undefined                                                                                                                                21:38:00

  at create (.nuxt/Nuxt-Seo.js:159:0)
  at asyncData (_slug.vue:590:0)
  at promisify (.nuxt/utils.js:314:0)
  at server.js:5518:82
  at Array.map (<anonymous>)
  at module.exports../.nuxt/server.js.__webpack_exports__.default (.nuxt/server.js:269:0)

<template>
  <h1>Hello World</h1>
</template>

<script>
  export default {
    asyncData({ $seo }) {
     // some api code to fetch the data 
      $seo({
        title: response.data.title,
        description: response.data.description,
        keywords: response.data.keywords,
      })
    }
  }
</script>

[srk4393]

{
    "author": "shanmukha",
    "private": true,
    "scripts": {
        "dev": "nuxt",
        "build": "nuxt build",
        "start": "nuxt start",
        "generate": "nuxt generate"
    },
    "dependencies": {
        "@nuxtjs/axios": "^5.3.6",
        "@nuxtjs/firebase": "^7.6.1",
        "@nuxtjs/google-analytics": "^2.4.0",
        "@nuxtjs/gtm": "^2.4.0",
        "@nuxtjs/robots": "^2.5.0",
        "@nuxtjs/sitemap": "^2.4.0",
        "@nuxtjs/vercel-builder": "^0.22.1",
        "@nuxtjs/vuetify": "^1.11.2",
        "algoliasearch": "^4.10.3",
        "axios": "^0.21.1",
        "babel-eslint": "^10.0.3",
        "child_process": "^1.0.2",
        "cookie-universal-nuxt": "^2.1.3",
        "cookieparser": "^0.1.0",
        "firebase": "^8.6.5",
        "imagesloaded": "^4.1.4",
        "js-cookie": "^2.2.1",
        "miro-nuxt-seo": "^1.0.3",
        "moment": "^2.26.0",
        "nuxt": "^2.13.3",
        "nuxt-i18n": "^6.3.0",
        "nuxt-jsonld": "^1.5.3",
        "nuxt-seo": "^1.5.2",
        "nuxt-seo-meta": "^2.3.1",
        "prettier": "^1.9.2",
        "realm": "^10.6.0",
        "realm-web": "^1.3.0",
        "sass-loader": "^10.1.1",
        "save-dev": "^0.0.1-security",
        "search-insights": "^2.0.2",
        "vue-apollo": "^3.0.7",
        "vue-awesome-swiper": "^3.1.3",
        "vue-axios": "^3.2.5",
        "vue-images-loaded": "^1.1.2",
        "vue-instantsearch": "^3.7.0",
        "vue-lazyload": "^1.3.3",
        "vue-notification": "^1.3.19",
        "vue-server-renderer": "^2.6.14",
        "vue-slider-component": "^3.2.13",
        "vue-star-rating": "^2.1.0",
        "vuelidate": "^0.7.4",
        "vuex-persistedstate": "^2.5.4"
    },
    "devDependencies": {
        "@nuxt/types": "~0.7.0",
        "@nuxtjs/pwa": "^3.3.5",
        "@nuxtjs/style-resources": "^1.0.0",
        "webpack": "^4.46.0"
    }
}

[nickfrosty]

I have been looking into this issue. It seems like this is only a problem in newer versions of Nuxt. I'll be pushing a new release today that will add better error handling for this issue to make it stop breaking while run in asyncData

[srk4393]

Sure I even check the below code to run in my project. head function is not executing in server side can you please help me out regarding it.

if any page are shared in social media all the meta tags are same as per nuxt.config.js

<template>
  <section>
    <div>Hello Nuxt</div>
  </section>
</template>

<script>
const fetchTheme = () => {
  return new Promise(function (resolve, reject) {
    setTimeout(() => {
      resolve({
        title: "Fetched Title",
      });
    }, 3000);
  });
};

export default {
  async asyncData() {
    const theme = await fetchTheme();
    console.log("theme.title", theme.title);
    return { theme };
  },
  head() {
    console.log("this.theme.title", this.theme.title);
    if (this.theme) {
      return {
        title: this.theme.title,
      };
    } else {
      return {
        title: "Default title",
      };
    }
  },
};
</script>

<style scoped>
</style>

[nickfrosty]

@srk4393 The nuxt head() function should return an object containing the $seo object. If you do not return the $seo object, then your global defaults will not get updated, and will remain the same for each page. Like this:

head({ $seo }) {
    return $seo({
        title: 'new page title',
        // description, keywords, etc
    });
}

I don't think the head() function gets SSR. But, the asyncData function is designed to be SSR

PS: I just published release nuxt-seo@1.5.3 which fixes the error you described in your first comment

[nickfrosty]

@srk4393 You might find the nuxt blog example in the docs helpful. It demonstrates using both the head() and asyncData methods of using the nuxt-seo module

[srk4393]

@nickfrosty Thanks working fine

[nickfrosty]

@srk4393 Wonderful!