nuxt-vuetify-error-handler

Nuxt vuetify error handler

This project provides a nuxt plugin with error handler that send errors to a vuetify v-snackbar component.

You are also able to open the v-snackbar by the exported nuxt plugin.

• ✨  Release Notes

Features

• ⛰  Nuxt 3 module
• 🚠  Vuetify 3 is used
• 🌲  Reusable and customizable v-snackbar config

Quick Setup

1. Add nuxt-vuetify-error-handler dependency to your project

# Using pnpm
pnpm add -D nuxt-vuetify-error-handler

# Using yarn
yarn add --dev nuxt-vuetify-error-handler

# Using npm
npm install --save-dev nuxt-vuetify-error-handler

2. Add nuxt-vuetify-error-handler to the modules section of nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    'nuxt-vuetify-error-handler'
  ]
})

Control the v-snackbar state

The snackbar state is controled by a pinia store

1. The v-snackbar will be opened with predefined state when nuxt provides an error
2. You can manual open the v-snackbar via nuxtApp.$snackbar Examples

<template>
  <Snackbar></Snackbar>
</template>
<script setup lang="ts">
  // alternatively, you can also use it here
  const { $snackbar } = useNuxtApp()
  //color can be vuetify theme color, rgb oder and other hex code. For more see vuetify documentation
  $snackbar.showMessage({ timeout: 8000, text: 'notification', color = 'info' })
</script>

<template>
  <Snackbar></Snackbar>
</template>
<script setup lang="ts">
  // alternatively, you can also use it here
  const { $snackbar } = useNuxtApp()
  $snackbar.showFeatureNotImplemented()
</script>

That's it! You can now use Nuxt vuetify error handler in your Nuxt app ✨

Development

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release