0

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>

introducir la descripción de la imagen aquí

1 respuesta 1

1

El problema es que estas tratando de registrar el componente AlertSnackBar localmente dentro de tu componente Announcement y este no existe, porque no lo estas importando de ningun lado y a de mas no existe ninguna variable que se llame así, es un problema de JS y no de vue.

...
components:{
  AlertSnackBar // Aqui está el problema
},
...

A de mas no tienes porque hacer esto, si ya registraste un componente globalmente, que está bien registrado tal cual está en tu main.js, no es necesario que lo registres de nuevo en tus componentes hijos, ya que tu componente global está disponible para todos los scopes de tu app con tan solo usarlo en el template.

Si quisieras registrar un componente local y no globalmente tienes que importarlo primero en tu script tag y luego si lo introduces en tu setup:

<script>
import AlertSnackBar from './AlertSnackBar.vue'

export defeault {
...
    components:{
      AlertSnackBar // Ahora si debería funcionar
    },
...
}
</script>
3
  • si necesito es que el componente sea global como hago porque estoy tratando de hacerlo global, no localmente.
    – aisak
    el 24 mar. 2021 a las 16:07
  • Como te comenté en mi respuesta, ya tu componente está bien registrado, en tu main js así que no tienes que hacer más nada sino usarlo en tu template y no tienes que declararlo en tu script de nuevo, solo borra el objeto components de tu componente en donde quieres usarlo y no te saldrá el error. el 24 mar. 2021 a las 21:40
  • thnx listo, gracias
    – aisak
    el 24 mar. 2021 a las 23:01

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.