Want to build a Vue JS/Wordpress Rest API backend hybrid, with superfast loading times? Here we take a look at Gridsome static site generator for Vue JS, which is a similar tool to React’s Gatsby generator, and build a site using the Vue Wordpress Rest API.
The use of Jamstack (Javascript, API’s and Markup) technologies is on the rise nowadays, as they provide a simpler developer experience, better performance and greater scaleability. Most React developers are familiar with the Gatsby site generator, however with Vue JS there are a number of different options. Here we take a look at the Gridsome cli for Vue JS, which has some cool features out of the box, and a lot more that can be added with the use of plugins.
Gridsome for Vue Wordpress
With Gridsome, you get the following out of the box, in a quick two minute install.
Local development with hot-reloading – See code changes in real-time.
Data source plugins – Connect to any popular Headless CMSs, APIs or Markdown-files.
File-based page routing – Quickly create and manage routes with files.
Centralized data management – Pull data into a local, unified GraphQL data layer.
Vue.js for frontend – A lightweight and approachable front-end framework.
Auto-optimized code – Get code-splitting and asset optimization out-of-the-box.
Static files generation – Deploy securely to any CDN or static web host.
Built-in
Everything Lives in Github
With a JAMstack project, anyone should be able to do a git clone, install any needed dependencies with a standard procedure (like npm install), and be ready to run the full project locally. No databases to clone, no complex installs. This reduces contributor friction, and also simplifies staging and testing workflows.
Modern Build Tools
Take advantage of the world of modern build tools. It can be a jungle to get oriented in and it’s a fast-moving space, but you’ll want to be able to use tomorrow’s web standards today without waiting for tomorrow’s browsers. And that currently means Babel, PostCSS, Webpack, and friends.
Automated Builds
Because JAMstack markup is prebuilt, content changes won’t go live until you run another build. Automating this process will save you lots of frustration. You can do this yourself with webhooks, or use a publishing platform that includes the service automatically.
Wordpress Rest API
Since the introduction of the Wordpress Rest API , it has opened up a whole new world of possibilities for Viue JS/Wordpress hybrids, utilizing the features above and combining them with the vast infrastructure and support available with Wordpress. Whilst this may not be suitable for many requirements, there are certainly some which will benefit from this approach.
Wordpress Vue Starter Templates
The Gridsome Wordpress setup (there are others) has the features you need to connect to a Wordpress back end to pull in data to display at the Vue front end, typically loading faster than normal and with a lot of other benefits.
For anyone interested in building a Vue JS front end and using the Wordpess Rest API Ive created some starter templates using Gridsome which have been enhanced from the standard Gridsome Wordpress starter with some extra bits, to get you up and running fast. Please note I haven’t used the g-image here, so remember to change those when inserting your own images.
The Wordpress API is https://vuewp.xhostcom.com/ and we use the endpoints from that to test some data. These are already in the config files, but if you have your own Wordpress setup you can obviously use that, just change the url in gridsome.config.js and netlify.toml
You will first need NodeJS and NPM installed, and Gridsome using the command
npm install –global @gridsome/cli
And then clone from Github any of the following starters, which will get you up and running quickly.
Here’s a blank one with just a nav bar and no CSS or JS
And also my Avivo Bootstrap Vue Wordpress theme using Bootstrap & SASS/SCSS
Once cloned, just run Yarn to grab the dependencies, and gridsome develop command to run the test server. You can of course change the CSS and add your own Javascript as required, but these get you up and running ready to go with the Wordpress Rest API data as is.
You can just clear the markup in all the page templates back to the <Layout> tags and put in your own markup. Creation of extra pages, once added to the menu in /components/header.vue will be routed accordingly with the superfast router, one of the best features I’ve found, and a breeze compared to others such as Nuxt.
So these are just basic starter templates, there’s a lot more that can be done using the GraphQL data bindings and other functionality in Gridsome and Wordpress to create your site.
Feel free to contribute on Github.
Vue CLI 3 & UIKit
Finally, for those who prefer the official Vue JS CLI, here’s one using that, and UIKit CSS/JS Framework, with an awesome mobile nav bar! Its NOT configured for the Wordpress Rest API but can be with a little application, or you may want to port the styles using the Gridsome starter above.
So, there we have a few Gridsome Vue Wordpess Starters to have a look at, and also a Vue CLI with UIKit starter to play around with and get a feel for the Vue JS Wordpress API setup, although it can get a lot more interesting if we delve deeper in to Gridsomes GraphQL, extra functions and post template features.
Feel free to check them all out on Github at Xhostcomweb. If you enjoyed this post, why not check out this article on Wordpress Dynamic Content!
Post by Xhostcom Wordpress & Digital Services, subscribe to newsletter for more
