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!
Top comments (0)