render function or template not defined in component: pages/index.vue

Question

render function or template not defined in component: pages/index.vue

I'm unsure of what this error is trying to tell me, I tried to follow the stack and couldn't make a clear determination as to what the problem is.

While following the Contentful tutorial on creating a blog with NuxtJS and Contentful, I've encountered this error. I've verified that Contentful is installed with npm install --save contentful.

Index.vue

<div class="container">
   <div class="columns">
      <div class="column is-offset-2 is-8">
         <h1 class="title is-2">Latest Posts</h1>
         <hr>
         <h2 class="title is-4" v-for="(post, index) in posts" :key="index">
            <nuxt-link :to="{name : 'blogPost',params: { post : post.fields.slug}}">{{ post.fields.title }}</nuxt-link>
         </h2>
      </div>
   </div>
</div>
<script>
  import {createClient} from '~/plugins/contentful.js'

  const client = createClient()
  export default {
    // `env` is available in the context object
    asyncData ({env}) {
      return Promise.all([
        // fetch the owner of the blog
        client.getEntries({
          'sys.id': env.CTF_PERSON_ID
        }),
        // fetch all blog posts sorted by creation date
        client.getEntries({
          'content_type': env.CTF_BLOG_POST_TYPE_ID,
          order: '-sys.createdAt'
        })
      ]).then(([entries, posts]) => {
        // return data that should be available
        // in the template
        return {
          posts: posts.items
        }
      }).catch()
    }
  }
</script>

nuxt.config.js

const config = require('./.contentful.json')

module.exports = {
env: {
    CTF_SPACE_ID: config.CTF_SPACE_ID,
    CTF_CDA_ACCESS_TOKEN: config.CTF_CDA_ACCESS_TOKEN,
    CTF_PERSON_ID: config.CTF_PERSON_ID,
    CTF_BLOG_POST_TYPE_ID: config.CTF_BLOG_POST_TYPE_ID
  },
  /*
  ** Headers of the page
  */
  head: {
    title: 'cometthon',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'Nuxt.js project' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  /*
  ** Customize the progress bar color
  */
  loading: { color: '#3B8070' },
  /*
  ** Build configuration
  */
  build: {
    /*
    ** Run ESLint on save
    */
    extend (config, { isDev, isClient }) {
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  }
}

contentful.js

const contentful = require('contentful')

// use default environment config for convenience
// these will be set via 'env' property in nuxt.config.js

const config = {
  space: process.env.CTF_SPACE_ID,
  accessToken: process.env.CTF_CDA_ACCESS_TOKEN
}

// export 'createClient' to use it in page components

module.exports = {
  createClient () {
    return contentful.createClient(config)
  }
}

Expected: Site runs, retrieves content from Contentful server, and renders on the page. Actual: Site runs, error presents itself on index page

Answer 1

Try putting all your code inside a <template> element