ERP Blocks for Nuxt 4

A collection of ready-to-use UI layouts and components designed as ERP system elements for Nuxt 4 applications.

Features

• 🏗️ Dashboard Layout - Responsive dashboard layout with collapsible sidebar
• 🔄 Data Fetching - Enhanced useCountFetch composable for handling paginated data
• 🎨 Pre-styled Components - Common ERP components with consistent styling
• 🧩 Modular Design - Easy to customize and extend for your needs
• 🚀 Nuxt 4 Ready - Built with Nuxt 4 and Vue 3 Composition API

Installation

1. Add erp-blocks dependency to your project:

npm install erp-blocks
# or
yarn add erp-blocks
# or
pnpm add erp-blocks

2. Add erp-blocks to the modules section of nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['erp-blocks']
})

Usage

Dashboard Layout

Use the provided dashboard layout in your pages:

<template>
  <div>
    <!-- Your page content -->
  </div>
</template>

<script setup>
definePageMeta({
  layout: 'dashboard'
})
</script>

useCountFetch Composable

The useCountFetch composable extends Nuxt's useFetch with count tracking capabilities, useful for paginated data:

const { data, pending, error, count } = useCountFetch('/api/items', {
  count: {
    source: 'header', // or 'key' for JSON response
    name: 'X-Total-Count' // header name or object key
  },
  // Standard useFetch options
  query: {
    page: 1,
    limit: 10
  }
})

Available Components

• CollapsibleSidebar - A responsive, collapsible sidebar component
• NavigationHeader - Top navigation bar component