Tag: vuejs

How To Build Vue Wordpress Rest API Websites

wpgridsome

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.

Screenshot

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 component that outputs an optimized progressive image – resizes and crops in real-time when developing.

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.

bulma1

Example

Code (Bulma CSS)

bulma2

Example

Code (Bulma CSS)

milli1

Example

Code (Milligram CSS)

Here’s a blank one with just a nav bar and no CSS or JS

Example

Code (No CSS)

And also my Avivo Bootstrap Vue Wordpress theme using Bootstrap & SASS/SCSS

screenshot1

Example

Code (Bootstrap 4)

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.

Uikit

Uikit

Uikit

Example

Code (Vue CLI – UIKit)

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

Filed under: Vue JS, WordpressTagged with: , , , , , , ,

Progressive Web Apps For WordPress

pwa

The Nuts and Bolts of Progressive Web Apps for Wordpress

In a nutshell, a ‘Progressive Web App’ (PWA) is software that utilizes the most current web technologies available. Therefore, as technology advances, current PWAs will be superseded by other solutions.

A good example of a PWA usually offers push notifications using JavaScript, is always up to date, and doesn’t require any complex installation. In addition, they should work for every user regardless of browser type, and be considered safe (usually due to delivery via secure HTTPS).

In this post, we’ll discuss the web application development process, then look at how to build web apps in WordPress. Finally, we’ll round up some themes and plugins that may help you along the way. Let’s get started!

WordPress Web Application Development

WordPress can be a foundation for developing applications. However, this requires an understanding of User Experience (UX), HTML, CSS, PHP, and JavaScript. Even basic plugin creation can take time to learn.

As for PWAs, there are many benefits, but one key advantage is the time saved reproducing a completed app on multiple production sites. For this, you’ll likely want to turn to ‘Service Workers’.

WordPress Service Workers

A ‘Service Worker’ is essentially a script that enables your PWA to integrate the best aspects of traditional and native web apps. It’s usually written in JavaScript, and much like a client-side proxy, enables you to determine how to respond to resource requests. A precache reduces the need for a persistent internet connection, creating a reliable user experience.

Service Workers are capable of handling push notifications easily, and can also synchronize data in the background. What’s more, they will usually receive centralized updates, so you’ll always be working with the latest version.

How to Build Web Apps with WordPress

Depending on the type of PWA you’re developing, the process can be very involved. For example, you’ll need to identify the specifics of jQuery requests, test snippets and develop segmented database returns, integrate variables for different platform variations (as well as style elements), then wrap it all into a framework of code that looks good and functions well.

You’ll also need to choose both a back end and front end framework. Of course, WordPress is going to be your back end Content Management System (CMS), but you’ll also want to choose a suitable server stack

Your choice on the front end will be more refined when working with WordPress – many choose either Bootstrap or AngularJS, although Facebook’s ReactJS and VueJS are also popular:

Bootstrap for web apps with wordpress
Bootstrap also includes a number of stylish themes to help you customize your framework.You can also use UIKit which is a modular component based CSS and Javascript framework.

WordPress Web App Themes

‘Web app themes’ enable WordPress to act as a PWA, without the need to code from scratch. They’re often full-featured, and offer the most power and flexibility for your PWA.

Good free solutions are thin on the ground – understandable given their intended application. With that in mind, you’ll have to open your wallet to find a suitable theme. For starters, Ubold is one of the most popular options, built on top of Bootstrap:

Ubold web app theme for wordpress

It provides a number of menu styles, along with thousands of FontAwesome icons to choose from. In addition, Ubold also includes sample Customer Relationship Management (CRM) and eCommerce applications, to show what the theme’s capable of.

Alternatively, you could opt for OneUI:

OneUI as a web app for wordpress

This theme (based on Bootstrap and AngularJS) enables you to build your front and back end within one framework, and includes four versions to help kickstart your development. In addition, it’s designed to be as lightweight as possible, and is completely modular, meaning it’s as flexible as you need it to be.

WordPress Web App Plugins

There are also WordPress plugins to help you create a PWA, but these operate on a smaller scale. They usually only let you implement one or two features, which can still make a dramatic change to how a WordPress website behaves.

Wordpress plugins for web apps

For example, WordPress Mobile Soft enables you to set up a PWA without it affecting your primary theme, and also makes sure it’s ready for mobile devices. What’s more, you’ll also be able to use an search engine optimized URL, enabling visitors to navigate easily to your PWA.

wordpress mobile pack for web apps

Similarly, WordPress Mobile Pack lets you create a PWA from your existing WordPress website, and also comes with several mobile app themes, making this a potential all-in-one solution. WordPress Mobile Pack is supported on iOS and Android devices, and is also compatible with most popular browsers, including Safari, Google Chrome, and Android’s native browser.

In a nutshell, the tools that make development and deployment easier and more accessible will be the ones that attract the most users. However, the overall performance of your PWA often comes down to the hosting provider you choose.

We provide best-in-class customer service for building PWA or Wordpress Mobile Apps. What’s more, our hosting offers versatility for mobile sites and PWAs, due to the wide range of available features. If you enjoyed this post, why not check out this article on Vue JS Rest API websites.

Post by Xhostcom Wordpress & Digital Services, subscribe to newsletter for more!

Filed under: WordpressTagged with: , , ,