Create A Vuex Undo/Redo Plugin For VueJS

Create A Vuex Undo/Redo Plugin For VueJS

There are many benefits to centralizing your application state in a Vuex store. One benefit is that all transaction are recorded. This allows for handy features like time-travel debugging where you can jump between previous states to isolate problems.

In this article, I’ll demonstrate how to create an undo/redo feature with Vuex, which works in a similar way to time-travel debugging. This feature could be used in a variety of scenarios from complex forms to browser-based games.

You can check out the completed code here on Github, and try a demo in this Codepen:

See the Pen Vuex Undo/Redo by Anthony (@anthonygore) on CodePen.

I’ve also created the plugin as an NPM module called vuex-undo-redo if you’d like to use it in a project.

Setting up a plugin

To make this feature reusable we’ll create it as a Vue plugin. This feature requires us to add some methods and data to the Vue instance, so we’ll structure the plugin as a mixin.


module.exports = {
  install(Vue) {
      // Code goes here

To use it in a project we can simply import the plugin and install it:


import VuexUndoRedo from './plugin.js';

read more

Server-Side Rendering With Laravel & Vue.js 2.5

Server-Side Rendering With Laravel & Vue.js 2.5

Server-side rendering is great way to increase the perception of loading speed in your full-stack app. Users get a complete page with visible content when they load your site, as opposed to an empty page that doesn’t get populated until JavaScript runs.

One of the downsides of using Laravel as a backend for Vue.js was the inability to server render your code. Was. The release of Vue.js 2.5.0 has brought server-side rendering support to non-Node.js environments including PHP, Python, Ruby etc.

In this tutorial, I’ll take you through the set up steps for Laravel and demonstrate a simple server-rendered app. Get the code for this here on Github.

Quick overview of server-side rendering

If you aren’t familiar with server-side rendering (SSR), here’s a simple example: say we have an Vue.js app built with components. If we use the browser dev tools to view the page DOM after the page has loaded, we will see our fully rendered app:

<div id="app">
    <li>Component 1</li>
    <li>Component 2</li>
      <div>Component 3</div>

But if we view the source of the document i.e. index.html as it was when sent by the server, you’ll see it just has our mount element:

<div id="app"></div>

Why the discrepency? Because JavaScript is responsible for building the page, and ipso facto, JavaScript has to run before the page is built. Fresh off the server, the page will have no content.

But with server-side rendering, our page includes the HTML needed for the browser to build a DOM before JavaScript is downloaded and run, i.e. the page source would look like the first example above. This is achieved by running the Vue.js app on the server and capturing the output, then injecting that output into the page before it is sent to the user.

With SSR, your app does not load or run any faster, indeed it may run slightly slower as the server has the added task of rendering the app. But the page content is shown sooner therefore the user can see engage with page sooner.

Why couldn’t Laravel do Vue SSR until now?

read more

Build A Lazy-Load Router With Vue.js And The Latest Browser Features

Build A Lazy-Load Router With Vue.js And The Latest Browser Features

Dynamic module importing is one of the latest JavaScript features to hit the major browsers. The main use case for this feature is lazy-loading modules to allow content to be delivered when it is needed, rather than all at once.

In this article, I’ll demonstrate how you can build a lazy-load router with Vue.js in just a few lines of code. This will work natively in browsers that have implemented dynamic module imports, but I’ll also include a fallback for older browsers.

Grab the finished code here on Github.

Static JavaScript module imports

If you’re using the latest version of any major browser, you can perform static import/export natively now. For Vue.js, this means you can export a component definition from a file like this:


export default {
  name: 'BooksPage',
  template: `
     <h1>Books Page</h1>
  data() {
    return {
      message: 'Oh hai from the books page'

And import it in your app like this:

read more

Build A Collapsible Tree Menu With Vue.js Recursive Components

Build A Collapsible Tree Menu With Vue.js Recursive Components

A recursive component in Vue.js is one which invokes itself e.g.:

Vue.component('recursive-component', {
  template: `<!--Invoking myself!-->

Recursive components are useful for displaying comments on a blog, nested menus, or basically anything where the parent and child are the same, albeit with different content. For example:

To give you a demonstration of how to use recursive components effectively, I’ll go through the steps of building an expandable/contractable tree menu. Here’s the finished product in a Codepen, try it out:

See the Pen Vue.js Expandable Tree Menu (Recursive Components) by Anthony (@anthonygore) on CodePen.

read more

Build A Real-Time Chat App With VueJS, Vuex & Cloud Firestore

Build A Real-Time Chat App With VueJS, Vuex & Cloud Firestore

Last week Google’s Firebase platform released a new product, Cloud Firestore. Much like the Firebase real-time database, it is a NoSQL-based cloud database that can be used to build real-time applications. It addresses some of the problems Firebase has, like writing complex queries. You can read more about its features here.

In this post, I’ll be building a simple real-time chat application called Firechat which uses Vue and Vuex, and the new Cloud Firestore. I’ll look at how to integrate Firestore into a Vue.js application and some best practices with Vuex. You can get the final source code here on Github.


Let’s start by scaffolding a new Vue application using the vue-cli. I’ll use the webpack-simple template.

$ vue init webpack-simple firechat

Before going any further, I want to use the spread operator ... and async/await. We will also be using Vuex for state management, and uuid for generating random ids, so let’s install those. We will also need the Firebase module.

$ npm install babel-plugin-transform-async-to-generator babel-plugin-transform-object-rest-spread Firebase babel-polyfill vuex uuid --save

Next, in the project root directory, edit .babelrc like so:

  "presets": [
    ["env", { "modules": false }]
  "plugins": ["transform-async-to-generator", "transform-object-rest-spread"]  

Now we can use the spread operator ... and await/async.

Before going any further, go to Firebase and sign up if you haven’t got an account. Once you do, click “Add Project” and enter a name.

Then click “Add Firebase to your web app”.

read more