Nuxt 页面作为组件？

Question

I am new to Nuxt but not to Vue. My understanding is that Nuxt pages are components. And after setting up a site with the Nuxt scaffolding, things like asyncData and computed properties work fine on the default index.vue file. But either this doesn't apply to pages in subdirectories, or I am missing how to do it. If on a page /session/books.vue, if I do something like:

<template>{{ name }}, {{allBooks }}</template>

<script>export default {

   asyncData (context) {
    return {name: 'world'}
   },

   computed: {
    allBooks () {
      return this.$store.state.books.all
      // or even just return 'hello'
    }
  }
 }
</script>

I get "Uncaught SyntaxError: Unexpected token 'export'", plus a warning 'Property or method is not defined on the instance but referenced during render' for both 'name' and 'allBooks'. Am I coding the script element incorrectly, or are there rules governing how the page components behave that I'm unaware of? Surely I don't need to register every page as a component? These all seem like very basic things, but I've googled both of these all morning, looked over the documentation, and haven't come up with anything helpful.

Answer 1

Your template section is not valid. Template section must be valid html and must contain only 1 root element.