0
287
VisualizaçõesHow to add miultiple components in a single template in Nuxt Vue?
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
2 Respostas
Responde à pergunta0
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/
0
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>