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

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">
  <ul>
    <li>Component 1</li>
    <li>Component 2</li>
    <li>
      <div>Component 3</div>
    </li>
  </ul>
</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