WordPress + Vue.js dev files

vue js logo wordpress in nanaimo

A really quick tip here. Posting it mostly for my own sake.

I am (at the time of this post) developing a WordPress plugin that uses Vue.js and the WordPress Plugin Boilerplate Generator. Combining WordPress + Vue.js dev files blocked me for a bit. I put the Vue files in a directory at the plugin root. You can run npm run serve in that directory get the “Hello World” (or whatever else) up and running no problem on localhost:8080. I wanted to serve the files on my testing domain: events-testing.local.

The solution was simple, but eluded me for an hour. The key for me was in my package.json file in the Vue directory.

The default scripts: { } in package.json looked like this (please note: the // etc... should not be include in your file and only denotes that there are other commands following):

"scripts": {
    "serve": "vue-cli-service serve",
    // etc...

There are two options to put in the serve command:

  • --port which defaults to 8080 I believe
  • --host which defaults to localhost (for me).

You can change the port to whatever by using --post 9876 (where the number is whatever port you choose).

Then you can change the host to whatever you like by using --host yourdomain.tld, but using whatever testing TLD you use. For me it is --host events-testing.local.

Putting this all together:

"scripts": {
    "serve": "vue-cli-service serve --port --host events-testing.local",
    // etc

Leave a Reply

Your email address will not be published. Required fields are marked *