How to use Ably with Nuxt.js

img

Hello, I am Rohit. I work as an undisciplined professional. I labor at the intersection of disciplines like engineering, design, strategy, art, and entrepreneurship. Some days I am an interaction designer, other days I work on product strategy, and when it rains, I do engineering.

Due to the nature of things I do, I have to mix several tools to create stuff. Sometimes, these combinations are not conventional i.e there is no documentation.

These posts are my attempts to leave breadcrumbs behind. In the future, I can come back to them. Alternatively, ‘citizens of the internet’ can save time when doing similar things.

I hope this post helps!

What are Nuxtjs and Ably?

Nuxtjs is a popular web framework for Vuejs. It provides all the fun of Vue with pre-configured features like a store, router, and SSR. It is my framework of choice when building things on the web. It is like Nextjs if you come from the Reactjs.

Ably is a platform that provides real-time services to your web app. I think of it as a pub-sub system. If you are into IoT, it is like MQTT for the web. Ably can be used with Arduinos and ESP8266/32 as well. This makes it useful for prototyping IoT or other real-time projects.

Why use Ably?

I use Ably when I need to prototype a web app that talks to an IoT device or several web app instances talking together (like a collaborative real-time game). Ably’s APIs are easy to work with and are well documented. I love their dev console for debugging messages. All these points make Ably a great tool to have in my toolbox.

How to use Ably with Nuxtjs

I make use of Nuxt plugins to achieve that. We make a plugin that injects our ably instance across our app. Then we register the plugin in our nuxt.config.js. This is an efficient way as it creates a single connection to Ably’s services per instance. Ably charges you based on the number of connections. The detailed steps are below.

  1. Make a plugin.
    Install Ably by running npm install ably inside your project. Next, create a file in the plugins folder. I call it ably.js. Paste this in ably.js with your access key. This injects ably in our global scope.

    import Vue from 'vue';
    import Ably from 'ably';
    export default ({}, inject) => {
        let ably = new Ably.Realtime({
        key :   process.env.ABLY,
        clientId : 'nuxt-app', //optional
    });
    inject('ably', ably)
    }
    

    Then include the plugin in nuxt.config.js

    plugins: [
    {
      src: "~/plugins/ably.js",
      ssr: false,
    },
    ]
    
  2. If you get fs related issues/warnings, Extend webpack by adding this to the build object of your nuxt.config.js.
    extend(config, ctx) { config.node = { fs: "empty" }; },
  3. Use it anywhere
    For example, to send data on a channel :
     this.$ably.channels.get("myChannel").publish("answer","true");
    

    or subscribe to get messages and do something based on them.

    var channel = this.$ably.channels.get("myChannel")
    channel.subscribe(message=>
    {
    console.log(message.name);
    console.log(message.data);
    }
    
    

That is it. Now you can use Ably with Nuxt and create compelling real-time web and IoT applications.

Hope this helps. My name is Rohit and I hope you get time to chill a bit today. Walk in the woods and smell some flowers. Rejuvenate!

Breathe in…. Breathe out… Breathe in…. Breathe out… Breathe in…. Breathe out…

Cheers!


Recent posts

Experiments with getting to like a humble Salad for a meal
Material consciousness of what we eat and where it comes from
Accepting Alipay payments using deta serverless functions