nuxt-data-state

Simple state class helper

Online Demo

Quick Setup

Install the module to your Nuxt application with one command:

npx nuxi module add nuxt-data-state

or

yarn add nuxt-data-state

// nuxt.config.ts
// Nuxt 3

import { defineNuxtConfig } from 'nuxt';

export default defineNuxtConfig({
    // This will also enable auto-imports of magic-regexp helpers
    modules: ['nuxt-data-state']
});

How to use

<template>
    <div>
        <DataStateProvider :state="user">
            <template #empty>
                <div>Empty Content</div>
            </template>
            <template #loading>
                <div>Loading...</div>
            </template>
            <template #error="{ error }">
                <div>Error: {{ error }}</div>
            </template>
            <template #success="{ data }">
                <div>User: {{ data.name }}</div>
            </template>
        </DataStateProvider>
    </div>
</template>

<script setup lang="ts">
    // import { DataState } from '#imports';

    type User = {
        name: string;
    };

    const user = useDataStateLoading<User>();

    // or
    // const user = ref<DataState<User>>(DataState.loading());

    onMounted(() => {
        setTimeout(function () {
            user.value = DataState.success({
                name: 'User ' + Date.now()
            });
        }, 2000);
    });
</script>