CoreUI vue.js template in Laravel not working correctly

Question

My problem is, that coreui in laravel does render the components, but none of them are interactive. For example when I use Tabs (CTabs), then it gets displayed correctly, but I cannot switch the tabs.

This is how I load coreui and the components:

import CoreuiVue from '@coreui/vue';
Vue.use(CoreuiVue);

// Registering a single component
import { CSwitch, CButton, CTabs, CTab, CCarousel, CCarouselItem } from '@coreui/vue';

Vue.component('CTabs', CTabs)
Vue.component('CTab', CTab)
Vue.component('CCarousel', CCarousel)
Vue.component('CCarouselItem', CCarouselItem)




// globally
Vue.directive('c-emit-root-event', CEmitRootEvent)

export default {

        components: {
            CTabs, CTab, CCarousel, CCarouselItem
},
    directives: {
        'c-tooltip': CTooltip
    },

}

Vue.component(
    'example-component',
    require('./components/ExampleComponent.vue').default
);

const app = new Vue({
        el: '#my-app',
        data(){
        }
    });

Then the ExampleComponent.vue

<template>

    <div>
        <CTabs variant="pills" :active-tab="0">
            <CTab title="Home">
                1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
                dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
                officia deserunt mollit anim id est laborum.
            </CTab>
            <CTab title="Profile">
                2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
                dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
                officia deserunt mollit anim id est laborum.
            </CTab>
            <CTab title="Disabled" >
                Text will not be shown.
            </CTab>

        </CTabs>

        <CCarousel
                arrows
                indicators
                animate
                height="450px"
        >
            <CCarouselItem
                    captionHeader="First Slide"
                    image="https://picsum.photos/1024/480/?image=52"
                    captionText="Nulla vitae elit libero, a pharetra augue mollis interdum."
            />
            <CCarouselItem
                    captionHeader="Blank page"
                    :image="{ placeholderColor: 'grey' }"
                    captionText="Nulla vitae elit libero, a pharetra augue mollis interdum."
            />
            <CCarouselItem
                    image="https://picsum.photos/1024/480/?image=54"
            />
        </CCarousel>



    </div>


</template>



<script>

    module.exports = {

        data: function () {
            return {
                message : 'Hello Vue!!'
            }
        },
        name: 'example-component'

    }
</script>

and the view file

    <div id="my-app">
        <example-component></example-component>
    </div>

Any ideas?

Answer 1

I simply had to wrap the Vue Object into DOMContentLoaded to make sure that the DOM is ready before attaching vue.js.

document.addEventListener("DOMContentLoaded", function(event) {
    const app = new Vue({
        el: '#my-app',
        data(){
        }
    });
})