Nuxt Snackbar

A highly customizable module to create snackbars for the Nuxt framework

Features

• Built using Tailwind CSS and Nuxt Icon
• Highly customizable (shape, position, color...)
• Easy to integrate and use

Installation

Add the @luxorus/nuxt-snackbar dependency to your project

# Using npm
npm install @luxorus/nuxt-snackbar

# Using pnpm
pnpm add @luxorus/nuxt-snackbar

Then, add the module to the modules array in nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@luxorus/nuxt-snackbar'],
})

And that's it! No further configuration is needed to run the module

Usage

1. Add the <SnackbarContainer /> tag to the app.vue file or to your layout file

<template>
  <div>
    <div>
      <h1>My amazing app</h1>
    </div>
    <SnackbarContainer />
  </div>
</template>

2. Use the provided useSnackbars composable to add snackbars

useSnackbars().push({ type: 'error', content: 'My error message', duration: 5000 })

Documentation

Visual Customization

These are props passed to the <SnackbarContainer /> tag to personalize the appearance of the snackbars

position

• Type: "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right"
• Default: "bottom-center"

shape

• Type: "rounded" | "oval" | "sharp"
• Default: "oval"

color

• Type: String
• Default: "#fff"

background

• Type: String
• Default: "#2f2f2f"

API

This module comes with a useSnackbars composable to directly manipulate the snackbars

// Access all the snackbars
useSnackbars().snackbars

// Add a snackbar
// Types: "error" | "success" | "warning" | "info"
useSnackbars().push({type: "info", content:"My snackbar info", duration: 10000})

// Remove a snackbar with a specific id
useSnackbar().remove(2)

Credits

• nuxt/nuxt
• nuxt-modules/tailwindcss
• tailwindlabs/tailwindcss
• nuxt-modules/icon

License

This project is licensed under the MIT License