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.

Installation

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

Offline First Masonry Grid Showcase with Vue

Offline First Masonry Grid Showcase with Vue

To keep your product revelant in the market, you should be building Progressive Web Apps (PWA). Consider these testimonies on conversion rates, provided by leading companies, such as Twitter, Forbes, AliExpress, Booking.com and others. This article doesn’t go into background, history or principles surrounding PWA. Instead we want to show a practical approach to building a progressive web app using the Vue.js library.

Here is a breakdown of the project we will be tackling:

  • A masonry grid of images, shown as collections. The collector, and a description, is attributed to each image. This is what a masonry grid looks like:
  • An offline app showing the grid of images. The app will be built with Vue, a fast JavaScript framework for small- and large-scale apps.
  • Because PWA images need to be effectively optimized to enhance smooth user experience, we will store and deliver them via Cloudinary, an end-to-end media management service.
  • Native app-like behavior when launched on supported mobile browsers.

Let’s get right to it!

Setting up Vue with PWA Features

A service worker is a background worker that runs independently in the browser. It doesn’t make use of the main thread during execution. In fact, it’s unaware of the DOM. Just JavaScript.

read more

Getting Your Head Around Vue.js Scoped Slots

Getting Your Head Around Vue.js Scoped Slots

Scoped slots are a useful feature of Vue.js that can make components more versatile and reusable. The only problem is they’re difficult to understand! Trying to get your head around the interweaving of parent and child scopes is like solving a tough math equation.

A good approach when you can’t understand something easily is to try put it to use in solving a problem. In this article, I’ll demonstrate how I used scoped slots to build a reusable list component.

Shape and color list

Note: You can see the finished product in this Codepen.

The basic component

The component we’re going to build is called my-list and it displays lists of things. The special feature is that you can customize how the list items are rendered in every usage of the component.

Let’s tackle the simplest use case first, and get my-list to render just one list of things: an array of geometric shape names and the number of sides they have.

app.js

Vue.component('my-list', {
  template: '#my-list',
  data() {
    return {
      title: 'Shapes',
      shapes: [ 
        { name: 'Square', sides: 4 }, 
        { name: 'Hexagon', sides: 6 }, 
        { name: 'Triangle', sides: 3 }
      ]
    };
  }
});

new Vue({
  el: '#app'
});

index.html

<div id="app">
  <my-list></my-list>
</div>

<script type="text/x-template" id="my-list">
  <div class="my-list">
    <div class="title">{{ title }}</div>
    <div class="list">
      <div class="list-item" v-for="shape in shapes">
        <div>{{ shape.name }} <small>({{ shape.sides }} sides)</small></div>
      </div>
    </div>
  </div>
</script>

read more

Vue.js Single-File JavaScript Components In The Browser

Vue.js Single-File JavaScript Components In The Browser

Browser support for native JavaScript modules is finally happening. The latest versions of Safari and Chrome support them, Firefox and Edge will soon too.

One of the cool things about JavaScript modules for Vue.js users is that they allow you to organize your components into their own files without any kind of build step required.

In this article, I’m going to show you how to write a single-file component as a JavaScript module and use it in a Vue.js app. You can do this all in the browser without any Babel or Webpack!

When I say “single-file component” I’m talking about a single JavaScript file which exports a complete component definition. I’m not talking about the single .vue file you’re used to. Sorry if you’re disappointed. But I still think this is pretty cool, so check it out.

Project setup

Let’s use the vue-cli simple template to do this. That’s right, the one without any Webpack ;)

$ vue init simple sfc-simple

The complete code for this tutorial is in this Github repo if you want to download it.

Change into the directory and create the files we’ll need:

$ cd sfc-simple
$ touch app.js
$ touch SingleFileComponent.js

Remove the inline script from index.html and instead use script tags to link to our modules. Note the type="module" attribute:

read more

Why You Should Avoid Vue.js DOM Templates

Why You Should Avoid Vue.js DOM Templates

It’s a common practice for a Vue app to use the DOM as its template, as it’s the quickest and easiest architecture to set up.

This practice comes with a few catches, however, that make it an undesirable choice for any serious project. For example, the markup you write for a DOM template is not always what you get when your app runs.

In this article, I’ll explain the issues with using the DOM as a template and offer some alternatives.

DOM as a template

The el option is used to mount a Vue instance to an element in the DOM. If no template or render option is present, Vue will use any existing content within the mounting element as the template.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>title</title>
  </head>
  <body>
    <div id="app">
      <!--This markup will be the template of the root instance-->
      <h1>My Vue.js App</h1>
      <p>{{ message }}</p>
    </div>
  </body>
</html>
new Vue({
  el: '#app',
  data: {
    message: 'Hello world'
  }
});

This approach gets you up-and-running quickly, but you should transition away from it because:

  • The markup you write in not always what you get
  • Syntax clashes with templating engines
  • Incompatibility with server-side rendering
  • Runtime template compilation is required

read more