Making a Hybrid Single Web page App in WordPress with VueJS

Energy your WordPress utility with Vue.js – the progressive JavaScript framework that now shares the stage with the likes of React and Angular.

On this article, I’ll present you tips on how to combine a Single Web page Search App inside your present WordPress utility with Vue.js – a particularly in style JavaScript framework for creating wealthy person interfaces. I’ll stroll you thru your entire means of constructing a Vue app from the bottom up, interacting with the WordPress REST API and making a search app with Vue’s reusable parts.

Proceed studying, or soar forward utilizing these hyperlinks:

Overview of the Vue SPA in WordPress
Anatomy of the Vue Single Web page Search App
Utilizing Vue-CLI to Set Up a Native Improvement Workflow
Scaffolding a Vue app with Vue-CLI
Integrating the Vue SPA with WordPress
Constructing the Single Web page Search App in WordPress
Constructing the Search App with Vue Single-File Elements

If you happen to’ve by no means labored with Vue or different trendy JavaScript frameworks/libraries, it’s a good time to leap in. Whereas the sheer variety of frameworks urging you to up your JavaScript recreation could be fairly overwhelming, Vue makes the journey nothing lower than gratifying.

Observe: This text is meant for intermediate-advanced WordPress builders and assumes that you’ve got a working data of PHP, JavaScript, Vue.js and the WordPress REST API. If you happen to’d like a refresher, I like to recommend that you simply learn via the next:

JavaScript for WordPress Builders
A Fast Begin Information To The WordPress REST API
JavaScript and the WordPress REST API: Understanding the Jargon

Familiarity with Vue.js (2.x) can also be important. The Single Web page App (SPA) makes use of a lot of Vue’s options similar to single-file parts, customized occasions, computed properties, lifecycle hooks, in addition to Axios to work together with the WordPress REST API. If you happen to’re new to Vue, it’s very easy to choose up, and you may get began in simply a few hours with these tutorials:

Vue.js 2 – Getting Began by Academind
Introduction to Vue.js by Vue Mastery

Though Vue apps could be written in pure ES5 syntax, I might be utilizing some new options of JavaScript launched in variations ES6 and ES7. If you should stand up to hurry with ES6, check out the next:

ES6 JavaScript – The Fundamentals
The WordPress Developer’s Information To ES2015 (ES6)

Whether or not you should use trendy JavaScript or Vue.js will utterly rely in your necessities and preferences. My purpose is that will help you discover the chances of integrating Single Web page Functions in WordPress with a sensible Search app. So let’s get began!

Overview of the Vue SPA in WordPress

For this text, I’ve constructed a Single Web page Search app in WordPress with Vue.js utilizing a toddler theme of the Twenty Seventeen WordPress theme. You’ll be able to obtain the kid theme from right here to observe together with the article.

The Search app could be rendered on any WordPress web page utilizing Customized Web page Templates. The Web page Template principally gives the Vue occasion with an present DOM component to mount on.

The app thus adopts a hybrid or a blended method, the place a server-side utility (WordPress) additionally serves the frontend, however parts of it are rendered with a client-side utility like Vue. That is totally different from a pure SPA that will use a headless or a decoupled CMS, the place the server-side engine is barely liable for offering the content material (via an API) and doesn’t generate the HTML for rendering it.

Enhancing Search Expertise with Vue.js

In a conventional search situation, every request to the server causes the web page to reload. Nonetheless, with Vue.js or an SPA method, the web page is dynamically up to date because the person interacts with the search however with out the fixed reloads. This makes for a really pleasing person expertise. In actual fact, you possibly can strive it out proper right here on this pen that I’ve created:

My Vue Search app builds on the instance from the pen above. So, let’s get a way of the inside workings of the Search app earlier than diving into the code.

Anatomy of the Vue Single Web page Search App

The next infographic explains how the Search App consists utilizing a number of reusable parts that work together with one another.

At a high-level, right here’s what the varied parts do:

AppNavigation gives the router hyperlinks for Vue Router to render the AppQuickSearch and AppCustomSearch parts.
AppQuickSearch and AppCustomSearch work as mum or dad parts to AppFilterSwitches and AppGetPosts. Nonetheless, they lead to two utterly unbiased Search functions, every outfitted with its personal of information, strategies and properties.
AppFilterSwitches renders enter toggle switches that will both be checkboxes or radio buttons relying on the parameters handed to it.
AppGetPosts fetches knowledge from the WordPress REST API and filters it utilizing the search key and toggle inputs. It then calls the AppDisplayPost element for every submit within the filtered outcome.
AppDisplayPost renders the markup for a person submit merchandise and shows it within the search outcomes.

All of this takes place inside a Customized Web page Template assigned to a particular web page(s) in WordPress.

Utilizing Vue Single-File Elements

You could have seen many examples of Vue parts created with the Vue.element syntax that use in-DOM templates or JavaScript template strings. Nonetheless, to construct the Search app in WordPress, I’ve made use of Vue’s highly effective single-file parts as an alternative.

Single-file parts have many inherent benefits – the flexibility to supply pre-compiled JavaScript (render capabilities) to the browser, syntax highlighting, case-insensitive element selectors, and component-scoped CSS to call a couple of. Additionally they enable me to put in writing modular and manageable code by splitting the codebase into a number of (.Vue) recordsdata.

Now that you’ve got a good concept of how issues work, let’s begin constructing the app.

Utilizing Vue-CLI to Set Up a Native Improvement Workflow

Splitting the code into a number of (.Vue) recordsdata with single-file parts would require using growth instruments like Vue Loader, Webpack, Babel and so on. Nonetheless, don’t let this throw you off as I’m going to maintain issues quite simple and never take care of configuration recordsdata.

With the Vue-CLI you possibly can shortly scaffold a Vue app that’s pre-configured with one of the best construct instruments for a contemporary frontend workflow. So, let’s arrange the CLI first.

Step 1: Set up Node.js

To make use of the Vue-CLI, you’ll require Node.js ( 8.x most well-liked, npm model 3+) put in in your system. You’ll be able to obtain the installer to your platform from the Node.js downloads web page right here. When you’ve set that up, take a look at that the next instructions work:

node –version and npm –version

Step 2: Set up Vue-CLI

Subsequent, open your system’s terminal (PowerShell in my case), and set up the Vue-CLI (2.x) globally by working the npm set up -g vue-cli command. As soon as full, take a look at that it really works by working the vue –version command.

Within the picture above, you’ll discover that I’ve additionally put in ESLint globally with npm set up -g eslint. It’s because I take advantage of the Visible Studio Code editor and its plugins to format and lint my JavaScript. You should use any code editor of your selection however configuring one with a JavaScript linter is extremely advisable.

With the fundamental setup carried out, let’s create an app in WordPress with the Vue-CLI.

Scaffolding a Vue app with Vue-CLI

To create the Vue app, I’ve used the official webpack-simple vuejs-template. Nonetheless, you might wish to use a extra refined template primarily based in your necessities.

The template units up a Vue mission with Webpack and configures it with a growth server and different trendy construct instruments. This gives us with an elaborate growth workflow. Amongst different issues, it permits us to put in writing code utilizing NextGen (ES6/ES7) JavaScript throughout growth, however ship the compiled JavaScript bundle in ES5 for higher browser compatibility.

Step 1: Arrange the Vue app inside WordPress

To arrange the Vue mission, navigate to your WordPress theme or little one theme utilizing your system’s terminal. Right here, I’m utilizing PowerShell (in Home windows 10) built-in with the Visible Studio Code editor.

Step 2: Create a Vue app with the Webpack-Easy template

Subsequent, run the command vue init webpack-simple project-name, substituting project-name with the identify of your mission (spa in my instance), and observe the on-screen directions.

Observe: Skip this step if you happen to’re following together with my vuetwentyseventeen little one theme. It already accommodates the app within the spa mission folder.

This creates the Vue mission contained in the <project-name> listing with configurations for contemporary construct instruments.

Step 3: Set up Improvement Dependencies

If you happen to head over to your WordPress theme utilizing your code editor, and look contained in the newly created mission folder, among the many many new recordsdata, you’ll discover a file known as bundle.json. It principally lists all the event instruments that the app would require. These instruments nonetheless should be put in although, and to take action, run the next:

cd project-name(substitue project-name along with your project-folder)
npm set up

NPM will then obtain and set up all of the required dependencies in a folder known as node_modules

Observe that we gained’t be deploying any of those downloaded recordsdata in WordPress. They’re solely required throughout the growth section.

Step 4: Run the Webpack Dev Server alongside WordPress

The ultimate step entails working the Webpack growth server that was put in within the earlier step. It might appear unusual at first, however it’s important to run the event server (put in within the earlier step), and hold it working alongside along with your native WordPress server (XAMP, WAMP, VVV and so on.).

Although the Vue SPA is a client-side utility, it initially must be served by a server, and the Webpack server will do that for us. Solely when growth is full, will we serve the ultimate JavaScript bundle via WordPress.

To begin the event server, run the command npm run dev from the Vue mission folder. You’ll then see the starter Vue app mechanically open at localhost:8080 in your browser.

The Vue Bundle (construct.js)

If you happen to have a look at the web page supply of the starter app in your browser, you’ll discover that the web page accommodates solely a single script file – construct.js. It’s because while you ran the event server, Webpack mechanically compiled the Vue app and bundled it with the Vue library, and another dependencies right into a single JavaScript file.

Nonetheless, do observe that the file doesn’t bodily exist in your system, and is dynamically generated by Node and Webpack at runtime.

To generate a bodily construct file you can ship along with your app, it’s important to run npm run construct, which we’ll see at a later stage.

At this stage, we’ve a totally useful Vue app served by a growth server from contained in the WordPress theme folder. Nonetheless, it has nothing to do with WordPress but. So, let’s have a look at how one can combine the Vue app along with your WordPress theme.

Integrating the Vue SPA with WordPress

Integrating the Vue app with WordPress primarily requires three issues:

A DOM component in WordPress for the Vue app to mount on
Enqueueing the Vue bundle in WordPress
Informing Vue in regards to the DOM mount level in WordPress

Offering the DOM Factor in WordPress for Vue

You might wish to hook the Vue app on a single WordPress web page or a number of pages, or conditionally. All Vue wants is a DOM component that exists in your WordPress web page of selection.

For this, you can also make use of the WordPress Template Hierarchy to resolve the required template file that must be edited. In my instance, I would like the Search app to look on any WordPress web page that makes use of a particular Customized Web page Template. You might as an alternative wish to use common Web page Templates to focus on particular pages primarily based in your necessities.

The Customized Web page Template templates/vue-search-app-template.php of my instance little one theme gives the DOM component, #wp-vue-app for Vue.

Registering the Vue App in WordPress

To let WordPress know in regards to the Vue app, it’s important to register/enqueue the Vue bundle in WordPress. Nonetheless, it’s not possible to generate a construct file after each modification throughout growth. For this, we are able to benefit from the dynamic construct that you simply noticed earlier.

For so long as the Webpack growth server is working, we are able to use the dynamic construct path http://localhost:8080/dist/construct.js to register the Vue script in WordPress.

The Webpack server may also mechanically re-compile the Vue bundle and replace the web page because the app is modified.

That is the explanation it’s important to run each the native WordPress server and the Webpack server throughout your growth. When growth is full, you’ll have to modify the trail to replicate the bodily file that’s generated by working npm run construct.

Additionally observe, aside from the ultimate Vue bundle, not one of the recordsdata within the Vue mission folder must be shipped along with your WordPress theme. They’re required solely throughout growth, and when it’s important to make modifications to regenerate the Vue bundle.

In my theme instance, I’ve registered the Vue bundle within the consists of/enqueue-scripts.php

Informing Vue Concerning the Mount Level in WordPress

Lastly, to load the Vue app in WordPress, all that’s required is to inform Vue the place to mount itself. That is carried out by specifying the WordPress DOM component with the el choice in foremost.js of your Vue mission. Alternatively, you can even use the $mount methodology as an alternative.

In my instance, I mount the app on the #wp-vue-app DIV container of my Customized Web page Template.

And similar to that, the starter Vue app might be rendered in WordPress.

Nice, with the Vue starter app efficiently injected into WordPress, now you can construct just about something with Vue. So, let’s get into the main points of my Vue Search app.

Constructing the Single Web page Search App in WordPress

If you happen to have a look at the flowchart to start with of the article, you’ll be capable to relate to the ultimate Search app proven beneath:

The Venture Folder Construction

To construct this, I merely used the Vue starter app as a base. I removed spa/index.html and src/belongings from the Vue mission, and arrived on the following folder construction:

If you happen to’re questioning in regards to the consists of folder within the little one theme, it’s as a result of I take advantage of capabilities.php solely to specify the WordPress Hooks, and outline the respective callbacks in particular person PHP recordsdata beneath consists of/. I favor this method to dumping the whole lot in a single capabilities.php file.

Including Further Dependencies for ESLint and ECMAScriptNext Options (Non-compulsory)

If you happen to intend to make use of ESLint (which I extremely suggest) or ESNext options like Async/Await, you’ll have so as to add some extra growth packages to your mission.

Configuring ESLint for WordPress and Vue

To configure ESLint, I’ve put in the eslint-plugin-vue plugin and the eslint-config-wordpress configuration. To do that, cease the event server (Ctrl+C), and run the next from inside your Vue mission folder:
npm set up –save-dev eslint eslint-plugin-vue
npm set up –save-dev eslint-config-wordpress

Subsequent, add the next to your .eslintrc.json file:
“extends”: [“eslint:recommended”, “wordpress”, “plugin:vue/recommended”]

It will setup the JavaScript Coding Requirements for WordPress, and the vue/strongly-recommended pre-defined linting guidelines for Vue. With trendy editors like VS Code, this immensely helps me to catch and repair errors on the fly:

Including Babel Presets for Async/Await

Babel presets are out of the scope of this text, however the next will principally help you use ES7 Async/Await in your Vue app. For this, it’s important to add babel-preset-vue-app by working:
npm set up –save-dev babel-preset-vue-app

Then, add the preset vue-app to the .babelrc file in your Vue mission folder:
“presets”: [[“env”, { “modules”: false }], “stage-3”, “vue-app”]

If you’re carried out, don’t neglect to begin the event server with npm run dev. My instance Vue little one theme has all of this already configured for you, so that you solely want to put in the packages by working npm set up from throughout the spa listing.

Making Native WordPress Information Obtainable to Vue

Vue is finally JavaScript that runs in your browser, and so, it gained’t have entry to any knowledge in WordPress. To make native WordPress knowledge obtainable to the Vue app, you’ll have to make use of the great outdated wp_localize_script WordPress operate.

I’ve carried out this within the consists of/enqueue-scripts.php of my vuetwentyseventeen little one theme.

The gist above ought to be fairly self-explanatory with all my feedback, so I’ll as an alternative deal with the information that I’ve made obtainable to my Vue app:

wpData.template_directory_uri – to construct the file path for static belongings (like photos) within the theme folder
wpData.rest_url – URL to retrieve posts from the WP REST API
wpData.app_path – the SPA WordPress web page to construct relative hyperlinks
wpData.post_categories – to render checkboxes for filtering posts

With this out of the way in which, let’s lastly discover the single-file parts of the Search app.

Constructing the Search App with Vue Single-File Elements

With the Search app construction chalked out, the primary element that I really constructed was the AppDisplayComponent. I began off with a really fundamental element to show solely submit titles utilizing the JavaScript Fetch APIand the WordPress Posts useful resource – /wp/v2/posts.

A Fundamental Model of the AppDisplayPost Element

And to render it on the WordPress web page, I deleted the entire starter content material in App.vue, and invoked the AppDisplayPost element as proven beneath:

Nonetheless, not the whole lot labored on the primary strive (or perhaps a few after that), which is when the Chrome extension of the Vue DevTools got here to my rescue. I’d counsel you could have it put in as properly, as it’ll help you debug and examine your Vue utility with a extra user-friendly interface moderately than simply logging the whole lot to the console.

I’d additionally suggest that you simply use a instrument like Postman to work together with the WP REST API. It’ll prevent lots of time understanding the API response, and gives the information in a format that’s a lot simpler to view. That is what I imply:

Rendering posts from WordPress within the Vue app did take me some time to arrange initially, however after a couple of rounds between the Vue DevTools and Postman, I used to be good to go. At this level, I additionally determined to increase the API response so as to add customized content material.

Extending the WordPress REST API for Customized Content material

The default response from the REST API is fairly complete; nevertheless, it’s doubtless that it might not fulfill all of your necessities.

For instance, you might wish to show info such because the writer identify, feedback and the featured picture of a submit. If you happen to make a GET request to the posts route in Postman (or your most well-liked REST shopper), you’ll discover that these should not straight obtainable within the default response. Whereas extending the API is an choice right here, you can even retrieve these by merely including the _embed=true parameter to the useful resource – wp/v2/posts?_embed=true. With _embed, the API will collate all metadata marked with embeddable: true within the submit response.

For my Vue Search app, I made a decision to increase the API as an alternative, and added the next customized content material:

If you happen to have a look at the ultimate model of the AppDisplayPost element in my little one theme, you’ll discover that I’ve used a discipline vue_meta which isn’t a part of the default response. It was added with the register_rest_field operate in consists of/extend-api.php of the kid theme. The code in there may be pretty fundamental, and to know extra about extending the API, check out the Modifying Reponses part of the REST API Handbook.

With this, I then moved the logic for retrieving posts to the AppGetPosts element, and solely used AppDisplayPost for rendering the required content material of particular person submit objects.

The AppGetPosts Element to Devour Information from the REST API

Separating the logic for knowledge retrieval additionally meant passing the Posts array to AppDisplayPosts by way of props.

Then, in AppGetPosts I invoked AppDisplayPost for every submit within the posts array.

I additionally determined to make use of Axios as an alternative of the native Fetch API to retrieve posts from the WordPress REST API. I’m extra snug utilizing Axios to eat knowledge from APIs however you can even select to make use of jQuery (which is already included in WordPress) to make AJAX calls.

Observe: To make use of Axios, you’ll need to set up it as a manufacturing dependency by working npm set up axios in your Vue mission folder.

Retrieving solely Particular Fields from the WordPress REST API

I not too long ago found that you need to use the _fields parameter to retrieve solely the required fields from the API response. This considerably reduces the payload measurement, particularly while you don’t need the submit content material within the JSON response. To do that, merely add the _fields parameter with a comma-separated record of field-names as values – wp/v2/posts?_fields=id,title,excerpt

The _fields parameter nonetheless wants to seek out its means into the REST API Handbook, so that you may wish to control it.

Retrieving All Posts from the WordPress REST API

Presently, there isn’t a option to retrieve all posts from the WordPress REST API. To do that, you’ll need to run a loop and make a number of requests to the API till the required knowledge has been fetched.

To calculate the variety of API requests, I made use of the Pagination Parameter per_page=100 and the X-WP-Complete header discipline, which gives the full variety of information within the assortment. The per_page parameter is at the moment capped at at 100 information, which is why we have to make a number of requests to the API when there are greater than 100 posts. You’ll see this in motion within the get_posts methodology of the AppGetPosts element within the gist beneath:

Within the gist above, get_posts is mechanically invoked when the element is mounted. I’ve made use of the ES7 Async/Await function to mark the tactic as an aynchronous operate that accommodates await expressions.

You’ll discover that the very first Axios request is marked with await –
const response = await axios( … ) . This prevents the next traces of code from executing till the request is resolved. I did this to retrieve the x-wp-total header to calculate the required variety of API requests.

The second utilization of await is on the finish, the place it waits for all Guarantees to resolve with Promise.all earlier than rendering the information on the web page. Nonetheless, you can even render knowledge as quickly because it’s obtainable like this:

With the required knowledge obtainable, I then added the search enter field and filter logic in a computed property. Within the gist beneath, discover how FilteredResults changed wpPosts to invoke the AppDisplayPost element.

The AppQuickSearch and AppFilterSwitches Elements

With AppGetPosts properly taking good care of the information retrieval and filtering, I then moved the person enter to the mum or dad element AppQuickSearch and used props to go the information down the chain.

I created a brand new element AppFilterSwitches to render class filters utilizing the localized WordPress wpData object. The element emits a customized occasion onFilterToggle that the mum or dad element AppQuickSearch should take heed to.

Lastly, all of the parts had been amalgamated in AppQuickSearch

In the long run, I merely enqueued the ultimate construct generated by working npm run construct.

If you happen to’ve come this far, it’s best to really feel snug exploring the remainder of the app by yourself. The ultimate variations of the parts do have much more however they’re constructed on all that you simply simply noticed.

Exploring Routing and Hold-Alive Elements

Whereas I may have ended the app with simply the fast search, I’ve added one other element AppCustomSearch so that you can discover Vue routing, and the way the varied parts could be reused simply with the assistance of props.

The Vue Router is past the scope of this text, however you’ll find the performance for routing in spa/src/app-routes.js. It gives the mapping between the AppQuickSearch, AppCustomSearch and the navigation hyperlinks. If you happen to do find yourself utilizing the Vue router on a WordPress web page, simply keep in mind that Vue will use the URL ‘#’ to simulate a web page, in order that it doesn’t reload while you change between the router hyperlinks. If you happen to attempt to exclude the hash (see my feedback in app-routes.js), the WordPress Rewrite API will take over, and also you’ll find yourself with a 404 not discovered.

The App.vue element hosts the AppNavigation and router-view parts. You’ll additionally discover that the router-view is wrapped with keep-alive to protect the element states and avoids re-rendering of the AppQuickSearch and AppCustomSearch while you change between them.

That’s it!

Summing Up

I hope you’ve discovered this text helpful. Be at liberty to mess around with my Vue Search app which you’ll be able to obtain as a part of the twenty-seventeen little one theme right here. You should use it as a playground to apply and develop your abilities in WordPress and trendy JavaScript.