I am currently developing a Vue application as a WordPress theme and need to establish communication between WordPress and Vue using PHP. To achieve this, I need to run both the WordPress server and Vue app simultaneously on my localhost. However, I have encountered an issue where the WordPress server does not have live reloading functionality when modifying Vue files. In order to address this problem, I have explored potential solutions and would like to confirm if my approach is correct.
To address the issue of live reloading on the WordPress server while making changes to Vue files, I have implemented the following approach. Firstly, I run separate local servers for both WordPress and Vue. Additionally, I set up another local server using Browsersync, which acts as a proxy for the WordPress server. This Browsersync server monitors the Vue files for any modifications and triggers a reload whenever changes are detected.
While this solution has proven effective in providing live reloading functionality for the Vue app, I would appreciate your professional opinion on whether this approach aligns with best practices or if there are alternative methods that may be more appropriate.
Using a proxy like this does work - but it causes everything to be proxied which is a bit extreme if all you want is live-reloading.
Browsersync has 'snippet mode' + 'localOnly' for this.
For example, you can run
browser-sync start --files 'app/**/*.php' --localOnly
Which will output the following in your terminal
$ browser-sync start --files 'app/**/*.php' --localOnly
[Browsersync] Copy the following snippet into your website, just before the closing </body> tag
<script async id="__bs_script__" src="http://localhost:3000/browser-sync/browser-sync-client.js?v=2.29.2"></script>
So, copy the HTML snippet into any PHP template or HTML file and you'll get live-reloading etc
https://gist.github.com/shakyShane/d2d12070b1c9b6c56e7ef3403e872de7