Great walkthrough. What if I want to compile my Vue app using webpack? In the article you say that we need to load the vue library before the DOM loads, and then our vue app after the DOM has loaded. This would mean that we can't bundle vue together with our app code, is that right?
I'm fiddling with it and my vue bundled code is loading, but it's not mounting onto my #app element...
Great walkthrough. What if I want to compile my Vue app using webpack? In the article you say that we need to load the vue library before the DOM loads, and then our vue app after the DOM has loaded. This would mean that we can't bundle vue together with our app code, is that right?
I'm fiddling with it and my vue bundled code is loading, but it's not mounting onto my #app element...
The key is to make sure everything is loaded so it can work.
That means:
Vue is loaded so your app will work.
The Dom element is loaded so your app can attach to it
The app is loaded so it works.
Generally in Wordpress, scripts are loaded in the head, before the Dom.
This is ok for loading Vue, because it doesn't need the Dom.
However, the app should be loaded after the Dom, so it's best to put it in the footer.
That means if you are loading the two together as one package, put that in the footer since it needs the Dom.
Does that make sense?
Yep makes sense, turns out it was my webpack config, I opted to use laravel mix instead and problem solved! Thanks for the article.