Nuxt property or method is not defined on the instance but referenced during render

Question

I have this for a page, paste of a nuxt example code from doc:

<template>
<div>
   {{ posts }}
</div>
</template>

<script>
export default {
  data: () => ({
    posts: []
  }),
  async fetch() {
    this.posts = await this.$http.$get('https://api.nuxtjs.dev/posts')
  }
}

npm run dev shows

 ERROR  [Vue warn]: Property or method "posts" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <Pages/test.vue> at pages/test.vue
       <Nuxt>
         <.nuxt/layouts/default.vue> at .nuxt/layouts/default.vue
           <Root>

and no requests made to the url

Answer 1

The problem is that you don't close your <script> tag. This can cause these kind of weird errors (because you do have posts correctly defined in data. Adding a </script> at the end fixes this.

Also, they are using a $http plugin in their example, so the call will only work if you have that plugin. You can also just use the regular javascript fetch function to make external calls:

<template>
  <div>
    {{ posts }}
  </div>
</template>

<script>
export default {
  data: () => ({
    posts: [],
  }),
  async fetch() {
    const response = await fetch('https://api.nuxtjs.dev/posts');
    this.posts = await response.json();
  },
};
</script>