VueJS SPA for WP admin menu page not working VueJS SPA for WP admin menu page not working wordpress wordpress

VueJS SPA for WP admin menu page not working


I've gotten similar Vue.js widgets to work with WP, but only using browserify, instead of webpack.

I didn't use the browserify template of vue-cli, although it could work with that. Instead I used my own package.json. Here's the gist: https://gist.github.com/maurop123/eb0c8e884fefe3e40c110b33beff48db

That will make a single file dist/bundle.js for the whole vue app. I then dropped that file into wherever the static js files are for my wp theme.

Next, I added a wp_enqueue_script line in functions.php like this...

wp_enqueue_script( MD_THEME_NAME.'-bundle', MD_THEME_URI.'/assets/js/bundle.js', array('jquery'), NULL, true );

The particular pattern of arguments may depend on your theme. You should try to make your wp_enqueue_script look like existing one.

Finally, I added the html element needed ,like <div id="vueApp"></div> for example, anywhere in the currently rendered template.

Hope that helps!