Vue, Mix and jQuery modules when $(document).ready()

Posted 2 years ago by gstoa

I am new to Spark, View and now Mix and am just trying to understand the correct approach to pulling all of these things together in my build process. The problem I am having is, I believe, in the assembly of the core Vue resources into app.js and when/how I am subsequently calling supporting jQuery modules using Vue. For example,


    mix.js('resources/assets/js/app.js', 'public/js/app.js');
        resolve: {
            modules: [
                path.resolve(__dirname, 'vendor/laravel/spark/resources/assets/js'),
            alias: {
                'vue$': 'vue/dist/vue.js'



Vue.component('home', {
    props: ['user'],

    mounted: function() {

                centerMode: true,
                centerPadding: '60px',
                slidesToShow: 3,
                arrows: true



Once I npm run dev, the app.js and ux-core.js files are created and available in the public/js directory as expected. I can see that the Vue component that was specified in home.js is correctly compiled into app.js.

So now it's time to call these freshly compiled assets! In my home.blade.php, I am loading these resources in the following order:

    <script src="/js/app.js"></script>
    <script src="/js/ux-core.js"></script>

The problem I am having is that the call to $('#tour-guide').slick() is happening before jQuery is loaded within app.js. I am sure that I have done something wrong in the Vue mounted area, as I was thinking that the $(document).ready() function would be called after jQuery was loaded.

Any help is greatly appreciated!

Please sign in or create an account to participate in this conversation.