Vue.js 2和Laravel

Question

What would be the best method/approach to a large website using Laravel(API) as back-end and Vue.js2 for the front-end. The main question here is how to make the javascript(VUE) split and require only if needed within the given route, since there is alot of javascript in this project.

1 . Is there a tool that can do this? Or any right way to tell though the API where to use certain script files?

2 . How would one split the transpiled app.js(in my case) file, so that it contains seperate functions per file

3 . Is this the best way to approach a project like this?

Answer 1

Well, for Vue to load a component the Vue package would have to be currently loaded otherwise Vue wouldn't be scanning for it's component tag.

One idea would be to split the Vue package from your main JS file using Laravel Mix's Vendor Extraction then only require it on pages you know need it. To require it for only a certain route you could make a Blade template that acts as a wrapper for your other views, but the way I like to do it is in your main parent template have a section at the end of the <body> tag and then in your views just include the vendor file, maybe even just make a mixin or something.

I know it's not the best answer but I hope it helps! :)