Vue export default not working in Laravel template

Question

I am using VueJS with Laravel, when I create Vue component and export it, it works perfect, but when I use export default in my Laravel blade in script @section it's not working.

App.js

require('./bootstrap');

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('featured-slider', require('./components/frontend/FeaturedSlider.vue'));
Vue.component('vehicle-offers-block', require('./components/frontend/vehicles/VehicleOffersBlock.vue'));
Vue.component('latest-news-block', require('./components/frontend/news/LatestNewsBlock.vue'));
Vue.component('finance-calculator', require('./components/frontend/FinanceCalculator.vue'));
Vue.component('latest-offers-block', require('./components/frontend/offers/LatestOffersBlock.vue'));
Vue.component('all-companies-block', require('./components/frontend/companies/AllCompaniesBlock.vue'));
Vue.component('search-vehicles-block', require('./components/frontend/SearchVehiclesBlock.vue'));
Vue.component('brand-vehicles', require('./components/frontend/offers/BrandVehicles.vue'));
Vue.component('model-topCarusel', require('./components/frontend/vehicles/ModelTopCarusel.vue'));
Vue.component('model-insideImages', require('./components/frontend/vehicles/ModelInsideImages.vue'));
Vue.component('trim-specifications', require('./components/frontend/vehicles/TrimSpecifications.vue'));
Vue.component('all-offers', require('./components/frontend/offers/AllOffers.vue'));
Vue.component('main-footer', require('./components/frontend/MainFooter.vue'));
Vue.component('featured-slider', require('./components/frontend/FeaturedSlider.vue'));


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


const app = new Vue({
  el: '#app'
});

App.blade.php Here I created by scripts section

<body>

    <!-- START NAV -->
    @include ('admin.layouts.topnav')
    <!-- END NAV -->
    <div class="container">
        <div class="columns">
            <div class="column is-3">
                @include ('admin.layouts.sidenav')
            </div>
            <div class="column is-9">
            <div id="app">
              @yield('content')
            </div>
        </div>
    </div>


    <script src="{{ asset('js/app.js') }}"></script>
    @yield('scripts')
  </div>
</body>

Larave Blade File Here i am exporting vue js in laravel blade

@section('scripts')

<script>

    export default {
        data() {
            return {
                companyid: "",
                offers: {},
                SigleOfferCoverSwiper: {
                slidesPerView: 1,
                spaceBetween: 30,
                loop: true,
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true
                },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev'
                }
                }
            }
        },
        mounted () {
            this.getOffers();
        },
        methods: {
            getOffers () {
                axios.get(`/api/brands/${this.companyid}/offers`).then(response => {
                this.offers = response.data.offers
                })
            }
        }

    };
</script>
@endsection

Please guy help me with this.

Thanks

Get rid of @scripts and put that code into a .js file. It needs to be compiled by npm run watch. — Polaris
@Polaris I am new to Laravel and Vue, Can you help me with this. should i make a new js file beside app.js and import it to app.js? — Amir Ur Rehman
Put everything within the <script> tags into app.js after el: '#app', — Polaris

hunty hunty · Accepted Answer · 2019-04-08T21:58:12

Seems you need to setup default for your require declaration:

Vue.component('featured-slider', require('./components/frontend/FeaturedSlider.vue').default);

Because in some cases you can face some problems with ES6 export. Also you can use module.exports = {}.

Vue export default not working in Laravel template

1 Answers