[Vuejs]-Nuxt property or method is not defined on the instance but referenced during render

by

2👍

✅

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>
👤Laurens

Leave a comment