[Vuejs]-How to use Vue JS with WordPress using NPM?

I have created themes which uses VueJS with build process. I use a starter theme called sage which has been created by roots.io team.

Sage is introduced as "WordPress starter theme with a modern development workflow" and it is rightly does so. They have a setup "JavaScript DOM-Based routing" which essentially enables you to run specific scripts on specific pages.

This comes very handy when using vueJS. You can go through this particular post where they have discussed on how to add vuejs as a dependency.

It has browsersync and hot-module-reload which updates your chnages without reloading. You can develop using yarn start and once you want to build the production version of your theme you simply run yarn build:production.

In my theme I had to create multiple components which werent directly connected to each other but I added vuex to manage my state and update the components using mapAction and mapGetter.

You won’t be able to achive this with CDN. Though it comes with its hassel of using NPM but its a workflow which also gives you the ability to use VueJS to its full potential.

I have also written a blog which explains how I used Github Actions to push my updated code to production or staging server. You can read it here – https://bhanusingh.in/deploying-sagewordpress-starter-theme-to-your-host-using-github-actions