Maennche Utils - Nuxt 4 Module

Utils for Maennche Software Services - Now as a Nuxt 4 module with components and composables!

Installation

npm install maennche-utils

Setup

Add the module to your nuxt.config.ts:

export default defineNuxtConfig({
  modules: [
    'maennche-utils'
  ],
  // Optional configuration
  maenncheUtils: {
    prefix: 'Maennche',
    componentsPrefix: true
  }
})

Components

MaenncheButton

A versatile button component with loading states and variants.

<template>
  <MaenncheButton 
    variant="primary" 
    size="md" 
    :loading="isLoading"
    @click="handleClick"
  >
    Click me
  </MaenncheButton>
</template>

Props:

• variant: 'primary' | 'secondary' | 'success' | 'danger'
• size: 'sm' | 'md' | 'lg'
• disabled: boolean
• loading: boolean

Composables

useMaenncheUtils

Main composable providing utility functions and reactive state.

<script setup>
const { 
  loading, 
  error, 
  makeRequest, 
  setLocalStorage, 
  getLocalStorage,
  formatDate,
  helloNpm,
  formatCurrency,
  slugify 
} = useMaenncheUtils()

// Make API request
const data = await makeRequest('/api/users')

// Format currency
const price = formatCurrency(29.99, 'EUR')

// Use your original function
const message = helloNpm()
</script>

Auto-imported Utils

These functions are automatically available in your Nuxt app:

<script setup>
// No imports needed - auto-imported!
const message = helloNpm()
const slug = slugify('Hello World')
const price = formatCurrency(99.99)

const debouncedFn = debounce(() => {
  console.log('Debounced!')
}, 300)
</script>

Migration from v1.0.x

If you were importing the old CommonJS version:

// Old way
const { helloNpm } = require('maennche-utils')

// New way - auto-imported in Nuxt
const message = helloNpm() // No import needed!

// Or use in composable
const { helloNpm } = useMaenncheUtils()

License

MIT