martijnvreeken
9 months ago
675
2
Mix

Ziggy trough webpack

Posted 9 months ago by martijnvreeken

Hi, I'm not an experienced JS dev. I know my way around the basics. We use TightenCo Ziggy on a project with a lot or named routes. This results in @routes blade directive to output a big chunk of inline JS to our HTML. I want to prevent this. So I dug a little into the code of the component and tried to include the needed 'stuff' into app.js like so:

require('./ziggy');
import route from '../../../vendor/tightenco/ziggy/src/js/route.js';

window.Vue = require('vue');

Vue.mixin({
    methods: {
        route: route
    }
});

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

But this results in the error: [Vue warn]: Error in mounted hook: "ReferenceError: route is not defined"

Now I think I need to use webpack.mix.js to reach my goal, but I have no clue how to and Google didn't help me at all with this. :)

Any suggestions would be much appreciated.

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