4

I'm relatively new to Vue.js, but not to Javascript/jQuery, and I've been doing pretty deep work with WordPress for about 8 years. I've spent way too many hours trying to configure a WordPress plugin built with vue-cli to hot reload components in the /wp-admin section. Has anyone successfully setup the proxy table or used another middleware solution to do this? Are there workarounds to this development workflow that I'm not aware of?

I really want to use Vue.js in my plugins but development is a real pain without the support of the Vue devtools and JS injection/hot reloading.

Thanks!

slowFooMovement
  • 425
  • 4
  • 12

1 Answers1

1

Check my GitHub repo:

https://github.com/Tech-Nomad/wordpress-php-vue-webpack-hot-module-replacement-hmr-starter-setup

You will find there a full perfectly working webpack starter setup for a WordPress theme. Just change the path "wp-content/themes/your-fancy-theme/app" to "wp-content/plugins/your-fancy-plugin/app" and you are good to go

I needed months of work to get it done. I've tried a lot of stuff which didn't work, like vue-cli (web socket proxy errors). Apache proxying as I thought it's an issue with Apache. I've even learned Nginx and Docker to try out all the possible suggestions I've found on Github and Stackoverflow I've almost even gave up, but for any reason I'v just tried pure Webpack setup without vue-cli and voilá HMR web socket errors gone

Tech Nomad
  • 1,113
  • 10
  • 18
  • I think you should show how to set it up at the very least. [Link-only answers are subject to deletion](https://meta.stackexchange.com/questions/225370/your-answer-is-in-another-castle-when-is-an-answer-not-an-answer) and all you do is describe your library – Machavity May 11 '19 at 04:06
  • I'm glad you were able to solve your problem, but my question was for how to do this in the /wp-admin section via plugins, not for theme development. Starting to move away from WordPress anyway, so not sure I really care anymore lol – slowFooMovement May 20 '19 at 16:20
  • Hey, it doesn't matter for Webpack whether you want to include the bundle files in Admin or on the Frontend. It's just a matter of enqueueing the bundles on the right hook: [admin_enqueue_scripts](https://developer.wordpress.org/reference/hooks/admin_enqueue_scripts/) Also my Webpack setup can help you with any other PHP project to get Vue.js development up and running quickly. – Tech Nomad May 21 '19 at 09:43