0
277
Vistas¿Cómo agregar múltiples componentes en una sola plantilla en Nuxt Vue?
veraniego
He intentado crear una muestra de Vue Nuxt SPA.
Dentro de un componente, agregué otros dos componentes.
Resulta que no se muestra nada en el navegador.
Quiero saber cómo solucionarlo y mostrar la función de entrada correctamente.
lo que he intentado
aquí está la estructura del directorio.
project ├ pages │ └ index.vue ├ components │ ├ home │ │ └ index.vue │ ├ input │ │ └ index.vue │ └ list │ └ index.vue . . En components/home/index.vue agregué dos componentes: Input y 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> Como resultado, no se muestra nada en el navegador.
mostrar algunos códigos
Aquí está el repositorio de Github, verifíquelo. https://github.com/jpskgc/vue-nuxt-spa-sample/tree/multiple-components
2 Respuestas
Responde la pregunta0
Vaya a nuxt.config.js , configúrelo como se muestra aquí .
export default { components: [ { path: '~/components', // will get any components nested in let's say /components/test too pathPrefix: false, }, ] } De esa manera, obtendrá componentes de importación automática. Luego, podrá cambiar el nombre de sus componentes directamente a Home.vue , Input.vue y List.vue y usarlos directamente en su plantilla.
Puede consultar este repositorio para obtener detalles adicionales sobre la función de componentes de importación automática: https://github.com/nuxt/components
Y lea este artículo que explica un poco mejor de qué se trata la importación automática: https://nuxtjs.org/tutorials/improve-your-developer-experience-with-nuxt-components
Si necesita algunas pautas sobre cómo nombrar y organizar sus componentes, puede consultar este: https://vueschool.io/articles/vuejs-tutorials/how-to-structure-a-large-scale-vue-js -solicitud/
0
Descubrí que es causado por la falta de anotación @component.
entrada/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>lista/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>