nuxt.js 获取 vue.js 组件中的默认磁头

Question

I am trying to get the head object that is configured by nuxt.config.js in a vue layout. In order to show the same title in an app bar as the page title.

I know that you can alter the page title with the head function in a vue component. But is it also possible to retrieve this information somehow?

<script>
export default {
  data () {
    return {
      title: head.titleTemplate // possible?
    }
  },
  head () {
      // here it is possible to change it but how about getting it?
  }
}
</script>

Another approach could be to get some data out of an page in the nuxt.config.js. But I think this is not how the hierarchy is structured.

Thanks for you help I am just starting to use javascript to code a website:)

Answer 1

(If I understand you correctly) You can use the changed callback to keep track of the latest meta info used (and thus the title).

Example:

head() {
  return {
   changed: (info) => {
     this.title = info.title;
     console.log(info, info.title);
    },
  };
},
data() {
  return {
    title: '',
  };
},

Answer 2

In nuxt.config.js before export I have setted variable with a string of the title. Then added it to the head section and create a new env section: https://nuxtjs.org/api/configuration-env/

const title = `Site title`
export default {
    head: {
        title
    },
    env: {
        title
    }
}

This how I'm getting the title in any Vue component:

export default {
  computed: {
    title () {
      return process.env.title
    }
  },
}

This helps you to keep your original title in process.env.title , even if you will want to change head.title dynamically. Did anyone found a better solution maybe? :)