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
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:
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:
- This is the script we’ll be running most often, it triggers the other two scripts concurrently.
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!