Estoy iniciando en Vue Js
y me gustaría algo de orientación si es posible, quiero saber si es posible importar un componente dentro de otro, hasta donde eh visto si es posible, pero no logro hacerlo.
Los pasos de instalación de Vue Js
que realicé son los siguientes:
# install vue-cli
$ npm install --global vue-cli
# create a new project using the "webpack" template
$ vue init webpack my-project
# install dependencies and go!
$ cd my-project
$ npm install
$ npm run dev
Estoy trabajando con Webpack
siguiendo los pasos de la documentación.
Agregue el repositorio en GitHub para que lo puedan ver y mirar que estoy haciendo mal, de igual forma dejo el código a continuación:
HelloWorld.vue:
<template>
<div class="row">
<div class="col-md-12">
<h1>{{ msg }}</h1>
<hr/>
</div>
<my-component></my-component>
</div>
</template>
<script>
import Paises from '@/components/Paises'
export default {
name: 'HelloWorld',
component:{
'my-component': Paises
},
data () {
return {
msg: 'Example of components with Vue.js App'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
Paises.vue:
<template>
<div class="row">
<div class="col-md-12">
<h1>{{ msg_paises }}</h1>
<hr/>
Test
</div>
</div>
</template>
<script>
export default {
name: 'Paises',
data () {
return {
msg_paises: 'Component #1'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
El error que me marca la consola dice:
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> at src\components\HelloWorld.vue at src\App.vue
El mensaje de error considero que es claro pero sigo sin identificar que tendria que hacer entonces.
Revise la Documentación de componentes y también este ejemplo pero no doy para lograrlo.
components
en vez decomponent
. vuejs.org/v2/guide/components.html#Local-Registrationprops
.