How can I access HEAD data in component with nuxt?

this.$metaInfo will be accessible just in the page component. If you want to have the title of the current page anywhere, I think the best way is using the store to save the current title then retrieve this information easily in any component.

In store/index.js

export const state = {  title: 'Default Title'}export const mutations = {  SET_TITLE (state, title) {    state.title= title  }}

Then use this on the pages components

<template>  <div></div></template><script>export default {  head () {    return {      title: this.title    }  },  mounted () {    this.$store.commit('SET_TITLE', this.$metaInfo.title)  }}</script>

Now, you can access the current title in any component you are retrieving it from the store state.

<template>  <div></div></template><script>import { mapState } from 'vuex'export default {  computed: {    ...mapState({      title: state => state.title    })  }}</script>

you can walk up the component tree until you reach the page-component

metaInfoTitle() {  let curr = this  let title = null  do {    title = curr?.$metaInfo?.title    curr = curr.$parent  } while (!title && curr)  return title},