Meta data keeps showing as "## Build Setup" for every page in Vuejs/Nuxt?

Question

I've added individual meta to every page following the Nuxt documentation but whenever I share my links on social media, the meta just show this '## build setup'. Another issue is the same metadata is showing for every page. I read you need to put "hids" to have individual page meta but nothing seems to be working?

Index Meta:

<script>
export default {
  head: {
    title: 'Animal Crossing Portal | The Best Tier Lists for Animal Crossing',
    meta: [
      { property: 'og:description', hid: 'og:description', name: 'og:description', content: 'Vote monthly in Animal Crossing Tier Lists for New Horizons & Pocket Camp! Including Villager Tier Lists, Sanrio, Gyroids & more at Animal Crossing Portal!' },
      { name: 'twitter:title', hid: 'twitter:title', content: 'Animal Crossing Portal | The Best Tier Lists for Animal Crossing' },
      { name: 'twitter:description', hid: 'twitter:description', content: 'Vote monthly in Animal Crossing Tier Lists for New Horizons & Pocket Camp! Including Villager Tier Lists, Sanrio, Gyroids & more at Animal Crossing Portal!' },
      { name: 'twitter:card', hid: 'twitter:card', content: 'summary_large_image' },
      { name: 'twitter:image:src', hid: 'twitter:image:src', content: 'https://www.animalcrossingportal.com/images/meta.jpg' },
      { property: 'og:title', hid: 'og:title', name: 'og:title', content: 'Animal Crossing Portal | The Best Tier Lists for Animal Crossing' },
      { property: 'og:type', hid: 'og:type', content: 'website' },
      { property: 'og:site_name', hid: 'og:site_name', content: 'Animal Crossing Portal' },
      { property: 'og:url', hid: 'og:url', content: 'https://www.animalcrossingportal.com/' },
      { property: 'og:image', hid: 'og:image', content: 'https://www.animalcrossingportal.com/images/meta.jpg' }
    ],
    link: [
      {
        rel: 'canonical',
        href: 'https://www.animalcrossingportal.com/'
      }
    ]
  }
}
</script>

My nuxt.config.js file has:

head: {
    meta: [
      { name: 'viewport', content: 'width=device-width, initial-scale=1' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  }

Answer 1

I thought it was the readme file, but after a few hours of digging (issue resurfaced), turns out it was actually an empty build tag in the nuxt config file which was making Nuxt try SSR. Removing the empty tag 100% fixed it.