npx nuxi@latest module add snackbar
```

2. Add `nuxt-snackbar` to the `modules` section of `nuxt.config.ts`

```js
export default defineNuxtConfig({
  modules: ['nuxt-snackbar'],
  snackbar: {
    bottom: true,
    right: true,
    duration: 5000
  }
})
```

3. Add the Snackbar Component to `app.vue`

```xml
<template>
  <div>
    <main>
      Main Content
    </main>
    <NuxtSnackbar />
  </div>
</template>
```

If you are using layouts and pages in your application, your `app.vue` should look something like this.

```xml
<template>
  <NuxtLayout>
    <NuxtPage />
    <NuxtSnackbar />
  </NuxtLayout>
</template>

<template>
  <div>
    <slot />
    <NuxtSnackbar />
  </div>
</template>
```

5. Call `useSnackbar()` to use snackbar methods and features.

Composition API
```js
const snackbar = useSnackbar();

snackbar.add({
    type: 'success',
    text: 'This is a snackbar message'
})
```

Options API
```js
export default {
    methods: {
        successMessage() {
            this.$snackbar.add({
                type: 'success',
                text: 'This is a snackbar message'
            })
        }
    }
}
```

That's it! You can now use Nuxt Snackbar in your Nuxt app ✨

## Development

```bash
# Install dependencies
yarn install

# Generate type stubs
yarn dev:prepare

# Develop with the playground
yarn dev

# Build the playground
yarn dev:build

# Run ESLint
yarn lint

# Run Vitest
yarn test
yarn test:watch

# Release new version
yarn release