I’ve been working with Vue for the past little while and it has very much struck a chord with me and how I like to work. I think if you’ve been sticking with modern JavaScript development in any way you’ve got similar feelings about your latest workflow.
Because I work with WordPress-related projects so much, I always find it interesting to observe and toy around with the various ways to integrate what are usually SPA-focused guides/tools and manipulate them to work in the context of building WordPress plugins or themes.
Parcel has received a lot of fanfare since its debut and as it goes with many of the new projects on the block, I like to wait a little while before devoting time to it simply because it’s impossible to keep up with otherwise.
As I was starting work on a new Extension for SearchWP I wanted to revisit my build process (again!) in an effort to simplify things, because that’s always the goal right? With zero configuration as a founding principle for Parcel, it was time to give it a shot!
What’s wrong with vue-cli?
Absolutely nothing is wrong with vue-cli nothing at all. In fact I’ve made use of it on multiple projects and love what it does. Version 3 is amazing and does everything under the sun, but when your end goal is putting together a build process to bundle assets for your WordPress plugin (as opposed to something that more-so aligns with an SPA) the full scaffold doesn’t fully align. There are certain WordPress conventions plugin authors need to adhere to, and in my opinion there’s no way vue-cli needs to accommodate that.
That said, this is a fully personal opinion/experiment posted in hopes of helping someone else who may be in the same boat.
Parcel powered Vue bundling for WordPress plugins
Getting Parcel up and running is straightforward by following their Getting Started docs. Execute the following at your command prompt:
npm install -g parcel-bundler
That command will install Parcel globally, so you can use it everywhere. Once it’s installed you’re good to go. They weren’t kidding about being zero config.
To save some time I’ve put together a starter plugin repository we can reference going forward:
https://github.com/jchristopher/parcel-vue-bundler
I’m not going to cover the details of the WordPress-specifics of the starter plugin, it just adds a menu entry to the Settings menu in the WordPress Dashboard titled Parcel Vue Bundle. When you view that Settings page, the bundled Vue application is shown.
The build process
Once you’ve cloned the starter plugin linked above, you’ll need to run npm install to pull down all of the packages necessary to get Vue and Parcel up and running.
Taking a closer look at the plugins package.json we can see that there are a few scripts to cover:
watch- This is the script we’ll be running most often, it triggers the other two scripts concurrently.
dev- This script builds the development version of our Vue application. It leaves your JavaScript and CSS expanded, and also allows for integration with
vue-devtools. build- This script builds the production version of our Vue application. Parcel will optimize your JavaScript and CSS and Vue’s production-ready version will be utilized as well.
To trigger the build of our application bundle we’ll need to run the following command:
npm run watch
This will spin up both the development and production builds of our scripts. The plugin is set up to respect the SCRIPT_DEBUG constant in WordPress. With script debugging enabled, the development version of our Vue application will be loaded. When disabled, the production version will be loaded.
With the command running inside your terminal, you can navigate to the Parcel Vue Bundle page in the Settings menu of the WordPress Dashboard and you’ll see your bundled Vue application ready to go!
The command will watch for any edits you make and rebuild both the development and production versions of your Vue application each time you save. I set it up this way to avoid forgetting to run the build command prior to deploying a plugin update.
Room for improvement
There’s definitely room for improvement here, this setup is super basic by design. The Vue ecosystem supports fancy features like hot module reloading and more that could be integrated, there’s room for vuex too. I haven’t had a reason to integrate Vue Router yet but I imagine that’d work too.
There’s also features in Parcel that you can take advantage of such as utilizing Babel, PostCSS, and more! I found Parcel just about as frictionless as you can get when it comes to putting together a build system, it’s a really great package.
Overall I hope if you were looking for a somewhat straightforward way to utilize Vue in your WordPress plugins that Parcel helps you get there quickly!
Comments
Hello, Jon,
Just to say thanks for your plugin. It is really nice working solution for every Vue.js enthusiast who tries to integrate Vue.js in their plugin. I was struggling to make all this working with vue-cli and to be honest I really lost my way as I was trying to make this work also with VVV. But your solution really solved my problem. Actually this was a way simpler approach and the same time – all one would need.
Thanks again and cheers,
Alex