gstoa
2699
4
Vue

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,

webpack.mix.js:


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

    mix.combine([
        'resources/assets/vendor/slick-1.6.0/slick/slick.js',
        'resources/assets/js/custom.js'
    ],'public/js/ux-core.js')


home.js


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

    mounted: function() {
       $(document).ready(function(){

            $('#tour-guide').slick({
                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.