How to add miultiple components in a single template in Nuxt Vue?

Question

summery

I've tried to create some sample Vue Nuxt SPA.
Within a component, I added other two components.
It results that nothing displayed on the browser.

I want to know how to fix it and display input function correctly.

what I've tried

here is directory structure.

project
  ├ pages
  │  └ index.vue
  ├ components
  │  ├ home
  │  │  └ index.vue
  │  ├ input
  │  │  └ index.vue
  │  └ list
  │     └ index.vue
  .
  .

In components/home/index.vue I added two components: Input and List.

<template>
  <div>
    <Input/>
    <List/>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator';
import Input from '~/components/input/index.vue';
import List from '~/components/list/index.vue';

@Component({
  layout: 'default',
  components: {
    Input,
    List,
  },
})
export default class Home extends Vue {}
</script>

As the result, Nothing is displayed on the browser.

show some codes

Here is the Github repository, please check. https://github.com/jpskgc/vue-nuxt-spa-sample/tree/multiple-components

Answer 1

Go to nuxt.config.js, setup it as shown here.

export default {
  components: [
    {
      path: '~/components', // will get any components nested in let's say /components/test too
      pathPrefix: false,
    },
  ]
}

That way, you'll get auto-importing components. Then, you'll be able to rename your components directly to Home.vue, Input.vue and List.vue and use them directly into your template.

You can check this repo for additional details on the auto-importing components feature: https://github.com/nuxt/components

And read this article that explain a bit better what the auto-importing is all about: https://nuxtjs.org/tutorials/improve-your-developer-experience-with-nuxt-components

If you need some guidelines as how to name + organize your components, you may refer to this one: https://vueschool.io/articles/vuejs-tutorials/how-to-structure-a-large-scale-vue-js-application/

Answer 2

I found that it is caused by lack of @component annnotation.

input/index.vue

<template>
  <v-text-field label="Main input" :rules="rules" hide-details="auto" />
</template>

<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator';

@Component # <- add it.
export default class Input extends Vue {}
</script>

list/index.vue

<template>
  <div>List</div>
</template>

<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator';

@Component # <- add it
export default class List extends Vue {}
</script>