Vue.js Server-Side Rendering With Vue Router: Step-By-Step Guide

Vue.js Server-Side Rendering With Vue Router: Step-By-Step Guide

When I started collecting information about SSR (server-side rendering) with Vue, I had to get pieces from different articles as well as the official documentation to get a complete understanding of the subject.

Here are some problems I found in these sources:

  • A lot of assumptions about information that you should have, like Webpack configuration, the proper way to hook up Vue Router etc.
  • Lacking certain important information and leaving some gaps for the reader to fill in.
  • In the examples given, most don’t follow the standards and best practices provided by the official documentation.

The objective of this article is to provide all the information you may need to get SSR working with Vue Router, making an extra effort to avoid any gaps that may give you a headache later. I also try to respect all the Vue team’s recommendations.

Approach

Before jumping into the actual implementation, there are some main concepts that you need to understand:

  • SSR involves creating a fully-loaded version of the app for the requested route on the server. Once that page is rendered on the client side, the client-side code takes ownership.
  • You are going to need two entry building points for your app, one for the server and one for the client.

With that in mind, here’s what we will accomplish in this article:

  1. Install the needed dependencies
  2. Webpack configuration
  3. NPM build scripts
  4. Folder structure
  5. App configuration
  6. Setting up Vue Router
  7. Client entry point
  8. Server entry point
  9. Server configuration

Let’s hope this example brings some clarity to the subject!

Dependencies

Let’s go through the dependencies that we are going to have to install:

read more

Jargon-Free Webpack Intro For VueJS Users

Jargon-Free Webpack Intro For VueJS Users

For many developers, Vue.js is the first front-end JavaScript framework they’ve learnt. If that’s true for you, you probably haven’t had a reason to learn Webpack yet. But as you continue with Vue, you’ll see Webpack popping up over and over again in the documentation, example projects and in relation to tools like Vue CLI.

Webpack promises great things for Vue users:

  • An automated development process that makes coding a breeze
  • A world of handy development features like Vue’s beloved Single-File Components
  • Optimizations for your code to make it fast and lean

But the range of possibilities of Webpack is also why it’s so intimidating at first. It appears to do so many things that it’s hard to grasp what it really is.

The Webpack guides have become increasingly better at explaining Webpack, but a certain amount of background knowledge is still assumed. In this article, I’ll attempt to give you that background without the jargon that may otherwise leave you confused.

Example project

Webpack helps you develop JavaScript applications, so to discuss it we should have a simple example project in mind. The following is what I’ll be referring to throughout this article:

app.js

const app = new Vue({
  el: '#app',
  data: {
    message: 'Hello World'
  }  
});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Vue.js Project</title>
</head>
<body>
  <div id="app"></div>
  <script type="text/javascript" src="vue.js"></script>
  <script type="text/javascript" src="app.js"></script>
</body>
</html>

Dependencies

read more

Advanced Server-Side Rendering With Laravel & Vue: Multi-Page App

Advanced Server-Side Rendering With Laravel & Vue: Multi-Page App

A few weeks ago I wrote a tutorial on the new Vue server-side rendering capabilities for Laravel. That tutorial mostly focused on the set up of SSR in a Laravel environment and so I only had time to demonstrate a simple “Hello World” app with no significant features.

Now I want to build on that previous tutorial and demonstrate how to server render a Vue app that includes multiple pages with Vue Router, since most of your Laravel projects will have more than one page.

Multi-page SSR with Laravel

You can get the completed code for this tutorial here on Github.

Installation

This tutorial will extend the app I built in the previous article, Server-Side Rendering With Laravel & Vue.js 2.5. Make sure you’re familiar with how it works and have a suitable development environment set up i.e. with the php-v8js extension installed.

If you don’t have that code, clone it and set it up:

$ git clone https://github.com/anthonygore/vue-js-laravel-ssr
$ cd vue-js-laravel-ssr
$ cp .env.example .env
$ composer install
$ npm i

Then install Vue Router:

$ npm i --save-dev vue-router

Router module

We’ll begin by creating a file for our router configuration that exports an instance of the router for use in the app.

read more

Vuebnb: A Full-Stack Vue.js and Laravel App

Vuebnb: A Full-Stack Vue.js and Laravel App

This year I’ve been writing a new book called Full-Stack Vue Web Development: Vue.js, Vuex and Laravel. It’ll be published in early 2018 by Packt Publishing.

The book is centred around a case study project, Vuebnb, a simple clone of Airbnb. In this post, I’ll give a high-level overview of how it works so you get a sense of what’s involved in building a full-stack Vue/Laravel app from scratch.

Here’s a live demo if you’d like to check it out: https://vuebnb.vuejsdevelopers.com

Overview

As a full-stack app, Vuebnb consists of two distinct parts:

  1. The front-end application, built with Vue.js. I also used Vue Router to create the pages and Vuex for managing global state. The code was initially written in a browser script file, but as the complexity increased a Webpack build-step was required to allow for single-file components and ES+ features.

  2. The back-end application, built with Laravel. Its main job is to serve the front-end app and its assets and also to provide a web service for the listing data. In combination with Vue Router, the web service allows Vuebnb to act like a single-page app. I also used Laravel Passport for authenticating API calls, which is needed for users to be able to save their favorite room listings.

Features

The main features of this project include the UI widgets as well as the general architecture of the app. Let’s do a brief overview:

read more

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.

plugin.js

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

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

app.js

import VuexUndoRedo from './plugin.js';
Vue.use(VuexUndoRedo);

read more