Vue.js component Unknown custom element

Question

I am using Vuejs with Laravel, my components are rendering but vuejs continuesly gives me warning Unknown custom element. did you register the component correctly?

I don't know what i am missing here. sometime some components do not work. This isometimes.js.

App.js

require('./bootstrap');
// require('./manage');

window.Vue = require('vue');


// import 'swiper/dist/css/swiper.css'


import Buefy from 'buefy'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import VueMatchHeights from 'vue-match-heights'
import { swiper, swiperSlide } from 'vue-awesome-swiper'


Vue.component('FeaturedSlider', require('./components/frontend/FeaturedSlider.vue'));
Vue.component('VehicleOffersBlock', require('./components/frontend/vehicles/VehicleOffersBlock.vue'));
Vue.component('LatestNewsBlock', require('./components/frontend/news/LatestNewsBlock.vue'));
Vue.component('FinanceCalculator', require('./components/frontend/FinanceCalculator.vue'));
Vue.component('LatestOffersBlock', require('./components/frontend/offers/LatestOffersBlock.vue'));
Vue.component('AllCompaniesBlock', require('./components/frontend/companies/AllCompaniesBlock.vue'));
Vue.component('SearchVehiclesBlock', require('./components/frontend/SearchVehiclesBlock.vue'));
Vue.component('BrandVehicles', require('./components/frontend/offers/BrandVehicles.vue'));
Vue.component('ModelTopCarusel', require('./components/frontend/vehicles/ModelTopCarusel.vue'));
Vue.component('ModelInsideImages', require('./components/frontend/vehicles/ModelInsideImages.vue'));
Vue.component('TrimSpecifications', require('./components/frontend/vehicles/TrimSpecifications.vue'));
Vue.component('AllOffers', require('./components/frontend/offers/AllOffers.vue'));
Vue.component('MainFooter', require('./components/frontend/MainFooter.vue'));



Vue.use(VueAwesomeSwiper)
Vue.use(Buefy)
Vue.use(VueMatchHeights);



export default {
    components: {
      swiper,
      swiperSlide
    }
  }

Home Page

<div class="container">
    <search-vehicles-block></search-vehicles-block>
</div>

<featured-slider></featured-slider>

<script>



    var app = new Vue({


      el: '#app',
        data() {
            return {
                frontCoverSwiperOptions: {
                spaceBetween: 30,
                centeredSlides: true,
                        autoplay: {
                            delay: 6000,
                            disableOnInteraction: false
                        },
                        pagination: {
                            el: '.swiper-pagination',
                            clickable: true,
                            dynamicBullets: true
                        },
                        navigation: {
                            nextEl: '.swiper-button-next',
                            prevEl: '.swiper-button-prev'
                        }
                    }
                }
            }
    });
</script>

Please help me with this.

Thanks

Could you please include your code as text? Also please include Root.vue — Sumurai8
Hello, @Sumurai8 I updated my question with code. I don't understand Root.vue — Amir Ur Rehman
I am going to guess that App.js is just never loaded for that page and that you are instead converting the page to a (nameless) root component on-the-spot. — Sumurai8
make sure you are loading app.js before your homepage script — Abdelaziz Mokhnache

Deepesh Deepesh · Accepted Answer · 2018-07-15T15:07:21

Sometimes even i get this issue, then i add component name with -. Try this: Vue.component('search-vehicles-block', require('./components/frontend/SearchVehiclesBlock.vue'));

please clear the cache.

Vue.js component Unknown custom element

1 Answers