Nuxt Fetch - A renderless component

Hey, I'm writing my first blog post here to talk about a simple renderless component I wrote for NuxtJS that I use everyday.

It's a renderless component for NuxtJS that allows me to take advantage of VueJS slots to write less logic when fetching remote data.

Here is a basic copy/paste of the README:

Installation

yarn add @hammerbot/nuxt-fetch

Usage

<template>
  <div>
    <nuxt-fetch :fetch-fn="fetchFn">

      <template #default="{ data, fetching, error }">
        <p>
          {{ data }} - {{ fetching }} - {{ error }}
        </p>
      </template>

      <template #fetching>
        Fetching for the first time
      </template>

      <template #error="{ error }">
        Error handling {{ error }}
      </template>

    </nuxt-fetch>
  </div>
</template>

<script >
import NuxtFetch from '@hammerbot/nuxt-fetch' 

export default {
  components: {
    NuxtFetch
  },
  methods: {
    async fetchFn () {
      const { data } = await this.$api.get('/foo')
      return data
    }
  }
}
</script>

As you can see in the example, I don't need to use any v-if statement or anything. I'm just using slots here and I find it much less verbose.

Tell me if you like it! I will write a better documentation if someone in this world uses it.

Cheers and happy new year!

PS: If you like it, leave me a star on Github! If you don't.. Tell me why in the comments!

https://github.com/ElMatella/nuxt-fetch

Blog

Nuxt Fetch - A renderless component

Mathieu Marteau

Installation

Usage

Join Our Newsletter. No Spam, Only the good stuff.

Related