I am using Nuxt.js to build my project.

I have set the head in nuxt.config.js and want to get the settings in the page.

// nuxt.config.js
export default {
    ...
    head: {
        title: 'SITE NAME',
        titleTemplate: '%s | SITE NAME',
        meta: [
            { charset: 'utf-8' },
            { 'http-equiv': 'X-UA-Compatible', content: 'IE=edge' },

            { name: 'viewport', content: 'width=device-width, initial-scale=1' },
            { hid: 'description', name: 'description', content: 'SITE DESCRIPTION' },

            { hid: 'itemprop-name', itemprop: 'name', content: 'SITE NAME' },
            { hid: 'itemprop-description', itemprop: 'description', content: 'SITE DESCRIPTION' },
            { hid: 'itemprop-image', itemprop: 'image', content: process.env.BASE_URL   '/assets/img/og_img.png' },

            { hid: 'og:site_name', property: 'og:site_name', content: 'SITE NAME' },
            { hid: 'og:title', property: 'og:title', content: 'SITE NAME' },
            { hid: 'og:description', property: 'og:description', content: 'SITE DESCRIPTION' },
            { hid: 'og:url', property: 'og:url', content: process.env.BASE_URL },
            { hid: 'og:image', property: 'og:image', content: process.env.BASE_URL   '/assets/img/og_img.png' },
            { hid: 'og:image:width', property: 'og:image:width', content: '1200' },
            { hid: 'og:image:height', property: 'og:image:height', content: '630' },
            { hid: 'og:type', property: 'og:type', content: 'website' },

            { hid: 'twitter:card', name: 'twitter:card', content: 'summary_large_image' },
            { hid: 'twitter:title', name: 'twitter:title', content: 'SITE NAME' },
            { hid: 'twitter:description', name: 'twitter:description', content: 'SITE DESCRIPTION' },
            { hid: 'twitter:image', name: 'twitter:image', content: process.env.BASE_URL   '/assets/img/og_img.png' }
        ],
    },
}

// about.vue (page.vue)
export default {
    data () {
        return {
            pageTitle: 'PAGE TITLE',
            description: 'PAGE DESCRIPTION',
        }
    },
    head () {
        return {
            title: this.pageTitle,
            meta: [
                { hid: 'description', name: 'description', content: this.description },

                { hid: 'itemprop-name', itemprop: 'name', content: `${this.pageTitle} | SITE NAME` },
                { hid: 'itemprop-description', itemprop: 'description', content: this.description },

                { hid: 'og:title', property: 'og:title', content: `${this.pageTitle} | SITE NAME` },
                { hid: 'og:description', property: 'og:description', content: this.description },

                { hid: 'twitter:title', name: 'twitter:title', content: `${this.pageTitle} | SITE NAME` },
                { hid: 'twitter:description', name: 'twitter:description', content: this.description }
            ]
        }
    }
}

I try to use this.title, this.$config, this.$route.meta, all of them are wrong.

How can I get the nuxt.config.js settings in the page?

Nuxt version: 2.14.5

Node version: 14.16.1

CodePudding user response：

There is no declarative way to get all Nuxt configs that exist in the nuxt.config.js file.

head property in the nuxt.config.js is for adding general head elements to all your pages.

If you want to store a global configuration throughout the project for example the SITE NAME, you need to use publicRuntimeConfig

   publicRuntimeConfig: {
    siteName: 'SITE NAME'
  }

Then you can use it in any component by this.$config.siteName

For more resources.

https://nuxtjs.org/docs/directory-structure/nuxt-config/#publicruntimeconfig