martijnvreeken's avatar

Ziggy trough webpack

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.

0 likes
2 replies
Reached's avatar

Hi there,

Why don't you want the routes in the HTML ? That is kinda the whole point with Ziggy :) - if you want to hide some routes you can blacklist them in the config!

martijnvreeken's avatar

Hi,

Thanks for the reply. I don't think they belong in HTML, they belong in JS, because that's where we use them. We try to avoid inline JS code altogether. In the documentation there is a hint to use the array with routes as a webpack asset. I'm looking for the right way to do this.

Cheers, Martijn

Please or to participate in this conversation.