1

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?

enter image description here

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

6
  • Could you please include your code as text? Also please include Root.vue Commented Jul 15, 2018 at 14:04
  • Hello, @Sumurai8 I updated my question with code. I don't understand Root.vue Commented Jul 15, 2018 at 14:16
  • github.com/amirehman/autozmart you can check the repo Commented Jul 15, 2018 at 14:19
  • 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. Commented Jul 15, 2018 at 14:29
  • make sure you are loading app.js before your homepage script Commented Jul 15, 2018 at 14:40

1 Answer 1

1

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.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.