Buenas estoy trabajando en un proyecto mio el cual estoy elaborando un componente de forma global con props junto con vuetify y el problema que se me presenta es que al compilar me sale componente no definido, o sino me sale problema de error de componente es decir esto:
Unknown custom element did you register the component correctly? For recursive components, make sure to provide the "name" option.
Componente AlertSnackBar
<template>
<div class="container">
<v-snackbar :v-show="showAlert" :top="top" :color="color">
<v-icon>mdi-{{icon}}</v-icon>
{{message}}
<v-btn color="accent" @click.native="false">
<v-icon>close</v-icon>
</v-btn>
</v-snackbar>
</div>
</template>
<script>
export default {
name: 'AlertSnackBar',
props:{
color:{
type: String,
},
showAlert:{
type: Boolean,
},
message:{
type: String,
},
icon:{
type: String,
},
top:{
type: String,
}
},
data(){
return{
}
}
}
</script>
Main.js
import Vue from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import vuetify from './plugins/vuetify';
import VueCountryCode from "vue-country-code";
import store from './store'
import axios from "axios";
import IconCrypto from "vue-cryptocurrency-icons";
Vue.config.productionTip = false
Vue.prototype.$http = axios
axios.defaults.withCredentials = true
axios.defaults.baseURL = 'http://localhost:8000/'
Vue.use(VueCountryCode);
Vue.use(IconCrypto);
Vue.component('AlertSnackBar', () => import('./components/AlertSnackBar'));
router.beforeEach((to, from, next)=>{
if (to.matched.some(record => record.meta.requiresAuth)) {
if (store.state.auth) {
next();
} else {
next({
path: '/session/login',
query: { redirect: to.fullPath }
})
}
} else {
next();
}
})
new Vue({
router,
vuetify,
store,
render: h => h(App)
}).$mount('#app')
Componente donde quiero Registrar el AlertSnackBar en Announcement.vue
<template>
<v-row>
<AlertSnackBar color="'red'" :showAlert="alertShow" :message="'Por favor, Complete su perfil para crear un anuncio.'" top="top" icon="cash" />
</v-row>
<template>
<script>
export default{
name: "Announcement.vue",
components:{
AlertSnackBar
},
data(){
return {
rule: {
number: value => {
const val = (value / 1).toFixed(2).replace('.', ',')
return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".")
}
},
select: ['Sell', 'Buy'],
minimum:'',
maximum:'',
bank:'',
money:{
decimal: ',',
thousands: '.',
prefix: '',
suffix: '',
precision: 2,
masked: true /* doesn't work with directive */
},
alertShow: false,
}
},
}
</script>