DEV Community

Mathieu Marteau
Mathieu Marteau

Posted on

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:


yarn add @hammerbot/nuxt-fetch
Enter fullscreen mode Exit fullscreen mode


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

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

      <template #fetching>
        Fetching for the first time

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


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

export default {
  components: {
  methods: {
    async fetchFn () {
      const { data } = await this.$api.get('/foo')
      return data
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (0)