How to use Deta with Nuxt.js

Hello, I am Rohit.
I work as an undisciplined professional. I labour 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 so I can comeback to them or someone else can save time when doing similar things.

I hope this post helps!

What are Nuxtjs and deta?

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

Deta is a prototyping platform that provides services like databases, file storage, and micro-services. It is free to use. The team is solid and very helpful in their slack group.

Why use Deta?

Many of my projects start as prototypes. These prototypes need databases to store ‘meh’ data. Uff! Databases, Databases, Databases! Often times, the prototypes are not big enough to use dedicated databases (like mongo) and I need something without an extensive setup. Deta solves these pain-points for me. It is simple and easy to work with. This allows me to prototype things quickly and effectively. It is like Marie Kondo of Databases for JAMStack apps.

How to use Deta with Nuxtjs

I make use of Nuxt plugins to achieve that. We make a plugin, the plugin injects deta across our app. Then we register the plugin and remove webpack related warnings. The detailed steps are below.

1. Make a plugin.
   Install deta by running npm install deta inside your project. Then create a file in the plugins folder. I call it deta.js. Paste this there with your access key and database name. This injects deta in the global scope of your nuxt app.

    import Vue from 'vue';
    import {Deta} from 'deta'
    export default ({}, inject) => {
        const deta = Deta(process.env.DETA_KEY)
        const db =deta.Base('you-database-name')
        inject('deta',db)
    }
   

   Then include the plugin in nuxt.config.js .

    plugins: [
    {
      src: "~/plugins/deta.js",
      ssr: false,
    },
     ]
   

2. Extend webpack by adding this to build object of your nuxt.config.js. This removes fs related issues/warnings.

    extend(config, ctx) {
   config.node = {
   fs: "empty"
    };
   }
   

3. Use it anywhere
   For example, to push data you can do this :

   this.$deta.put({
            name: 'Rohit',
            location: 'Madrid',
          })
          .then((res) => {
            this.$store.commit("setKey", res.key);
          });
   

That is it. Now you can use Deta with Nuxt and create cool web applications.

Hope this helps. My name is Rohit and I hope you go out and take a walk. Walking and being outside is a healthy thing to do like web development.

Cheers!