Have you ever wondered how to turn your plain old WooCommerce website to a new single page app that, surprisingly runs fast and with much better user experience? What if I tell you that you can achieved that goal in less than five minutes? Okay, I know, it sounds ridiculous. Let me show you how.

Turning your WooCommerce Wordpress site to a single page application with Vue.js

Before we begin, I assumed you already know how to install a Wordpress site and set up WooCommerce plugin. If yes, you can proceed to second part of the tutorial and if not, please continue as follows.

1st Part

In this part, we will basically just install Wordpress and WooCommerce and set up our site.

Step 1: Install Laragon

Laragon is a portable, isolated and fast development environment. Think about it as an alternative to XAMPP and WAMP but way better. Go ahead and download the file here.

Step 2: Create a Wordpress Site.

Run Laragon, start all the components and create a Wordpress site from the notification panel (see the pictures attached below)

Laragon will automatically create a database for you based on the name of the project.

Step 3: Install WooCommerce plugin

After creating and setting up a Wordpress site, go ahead and go the dashboard > plugins and install the WooCommerce plugin. Activate the plugin and finish the installation. You now have the working ecommerce wordpress site. This is what your ecommerce WooCommerce wordpress looks like. Now that we finished setting up your WooCommerce site, let's proceed to the second part of the tutorial. We will turn this simple ecommerce to an amazing single page app using Vue.js.

2nd Part

Now this is the fun part of the tutorial. We are going to use this amazing project called VueFront. VueFront is a Vue powered CMS agnostic front-end framework that allows owners and developers of an old-fashioned blog or e-commerce site to quickly switch to a SPA progressive web app. Yes. You read it right. Quickly, as in, really fast. VueFront has 2 important components, first, the CMS Connect app, a plugin which acts as a binder for your WooCommerce site and VueFront app that returns a GraphQL endpoint; you need this endpoint to access all the data from your WooCommerce site and the second one, the VueFront CLI (command line interface) which scaffolds Vuefront app for you. To know more about this amazing project, please proceed here.

Step 1: Install Node.js

We need Node.js and npm (yarn in my case) to install the dependencies for our Vue app and to run our project. So go ahead and go to Node.js official website and download the latest version. If you have outdated version of Node.js installed, please update your version to latest one.

Step 2: Install CMS Connect App as a Wordpress plugin

In order for VueFront to access your WooCommerce data, you need to use and install CMS Connect App. This CMS Connect app will act as a binder for your WooCommerce website and your VueFront app. Go ahead and download the CMS Connect app here. Once you download the plugin, install it in your WooCommerce site and activate. Once you activate the plugin, it will look like this. It will return an endpoint which you need to copy before proceeding to the next step.

Step 3: Using VueFront

Create a new folder on your desktop or wherever you want your project to install VueFront. I am going to use yarn instead of npm for better experience.

yarn create vuefront-app <project-name>
cd to <project-name>
yarn dev

The code above will create a new Vue.js project for you. project-name is the name of the project you choose. It will automatically install all the dependencies to run the project. This will also prompt you to put the endpoint you copy from the CMS Connect App plugin from your WooCommerce site. Once you successfully create and run the project, visit http://localhost:3000. Your new SPA progressive web app will look something like this:

Voila! You have a new single page app, progressive, fast and has way better experience than your typical WooCommerce site. Of course you can edit the UI and the look and feel of your website. For more customization, read the VueFront official documentation. Take note: VueFront is still in beta version, expect changes in the future release of the project.

That's it for now. On the future blog post, I will show you how to customize the components of your new SPA WooCommerce site. So stay tuned. 😃 Thank you for reading this post!

Happy Coding!