Nuxt3 Notifications Module

https://github.com/windx-foobar/nuxt3-notifications
Admin
A Nuxt3 module that integrates the `@kyvg/vue3-notification` library, providing a way to display...
Tokens:3,455
Snippets:14
Trust Score:6.4
License:MIT
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install nuxt3-notifications using package managers

Source: https://github.com/windx-foobar/nuxt3-notifications/blob/master/docs/content/1.docs/1.introduction/1.getting-started.md

Installs the nuxt3-notifications package as a development dependency using different package managers.

```bash
npm install --save-dev nuxt3-notifications
```

```bash
yarn add -D nuxt3-notifications
```

```bash
pnpm add -D nuxt3-notifications
```

--------------------------------

### Development setup for nuxt3-notifications

Source: https://github.com/windx-foobar/nuxt3-notifications/blob/master/README.md

Outlines the steps for setting up the development environment for the nuxt3-notifications module, including dependency installation and running the playground.

```bash
# Fork and clone windx-foobar/nuxt3-notifications
# Enable corepack using corepack enable (use npm i -g corepack for Node.js < 16.10)
# Install dependencies using pnpm install
# Run pnpm dev:prepare to generate type stubs.
# Use pnpm dev to start playground in development mode.
```

--------------------------------

### Configure nuxt3-notifications in nuxt.config

Source: https://github.com/windx-foobar/nuxt3-notifications/blob/master/docs/content/1.docs/1.introduction/1.getting-started.md

Adds the nuxt3-notifications module to the Nuxt configuration file. Supports both empty and custom configurations, such as setting a custom component name.

```typescript
export default defineNuxtConfig({
  modules: ['nuxt3-notifications'],
  nuxtNotifications: {}
})
```

```typescript
export default defineNuxtConfig({
  modules: ['nuxt3-notifications'],
  nuxtNotifications: {
    componentName: 'AppNotifications'
  }
})
```

--------------------------------

### Register NuxtNotifications component in app.vue

Source: https://github.com/windx-foobar/nuxt3-notifications/blob/master/docs/content/1.docs/1.introduction/1.getting-started.md

Registers the notification component in the root `app.vue` file. Shows how to use the default component name or a custom name with specified position and speed.

```vue
<!-- your script code -->

<template>
  <!-- your code -->

  <NuxtNotifications position="bottom left" :speed="500" />
</template>
```

```vue
<!-- your script code -->

<template>
  <!-- your code -->

  <AppNotifications position="bottom left" :speed="500" />
</template>
```

--------------------------------

### Install nuxt3-notifications with npm, yarn, or pnpm

Source: https://github.com/windx-foobar/nuxt3-notifications/blob/master/README.md

Installs the nuxt3-notifications package as a development dependency using different package managers.

```bash
npm install --save-dev nuxt3-notifications
```

```bash
yarn add -D nuxt3-notifications
```

```bash
pnpm i -D nuxt3-notifications
```

--------------------------------

### Trigger a notification using useNotification hook

Source: https://github.com/windx-foobar/nuxt3-notifications/blob/master/README.md

Demonstrates how to use the useNotification composable to trigger a notification with a title and text from a button click.

```vue
<script setup>
  const { notify } = useNotification();

  function onClick() {
    notify({
      title: "Title",
      text: "Hello notify!",
    });
  }
</script>

<template>
  <button @click="onClick">Show notify</button>
</template>
```

--------------------------------

### SCSS Styling for Notification Buttons and Components

Source: https://github.com/windx-foobar/nuxt3-notifications/blob/master/docs/content/2.demo/0.index.md

Defines the visual appearance of buttons and notification elements using SCSS. Includes styles for different button states, notification themes (light, custom-template), and transition effects for notification animations.

```scss
#demo {
      button {
        display: inline-block;
        box-sizing: border-box;
        border: 0;
        border-radius: 3px;
        color: white;
        vertical-align: top;
        text-decoration: none;
        font-size: 12px;
        font-family: inherit;
        cursor: pointer;
        outline: none;
        transition: all 500ms;
        padding: 12px;
        box-shadow: none;
        background: #02ccba;
        font-weight: 600;
        width: 100%;
        letter-spacing: 1px;
        box-shadow: 0 5px 15px 0px rgba(46, 61, 73, 0.1);

        &.success {
          background: #68cd86;
        }

        &.warn {
          background: #ffb648;
        }

        &.error {
          background: #e54d42;
        }

        &.info {
          background: #02ccba;
        }

        &:active {
          opacity: 0.8;
        }
      }

      .sub-button {
        display: inline-block;
        float: right;
        background: #e54d42;
        padding: 4px;
        box-shadow: 0 5px 15px 0px rgba(46, 61, 73, 0.1);
      }

      /*
        EXAMPLES
      */
      :deep(.vue-notification-template.n-light) {
        margin: 10px;
        margin-bottom: 0;
        border-radius: 3px;
        font-size: 13px;
        padding: 10px 20px;
        color: #495061;
        background: #eaf4fe;
        border: 1px solid #d4e8fd;

        .notification-title {
          letter-spacing: 1px;
          text-transform: uppercase;
          font-size: 10px;
          color: #2589f3;
        }
      }

      .custom-template {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        text-align: left;
        font-size: 13px;
        margin: 5px;
        margin-bottom: 0;
        align-items: center;
        justify-content: center;

        &,
        & > div {
          box-sizing: border-box;
        }

        background: #e8f9f0;
        border: 2px solid #d0f2e1;

        .custom-template-icon {
          flex: 0 1 auto;
          color: #15c371;
          font-size: 32px;
          padding: 0 10px;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .custom-template-close {
          flex: 0 1 auto;
          padding: 0 20px;
          font-size: 16px;
          opacity: 0.2;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          color: black;

          &:hover {
            opacity: 0.8;
          }
        }

        .custom-template-content {
          padding: 10px;
          flex: 1 0 auto;
          color: black;

          .custom-template-title {
            letter-spacing: 1px;
            text-transform: uppercase;
            font-size: 10px;
            font-weight: 600;
          }
        }
      }

      .block {
        display: flex;

        > *:not(:last-child) {
          margin-right: 30px;
        }
      }

      p {
        margin-bottom: 1rem;
      }

      :deep(.v-fade-left-enter-active),
      :deep(.v-fade-left-leave-active),
      :deep(.v-fade-left-move) {
        transition: all .5s;
      }

      :deep(.v-fade-left-enter),
      :deep(.v-fade-left-leave-to) {
        opacity: 0;
        transform: translateX(-500px) scale(0.2);
      }
    }
```

--------------------------------

### Integrate NuxtNotifications component in app.vue

Source: https://github.com/windx-foobar/nuxt3-notifications/blob/master/README.md

Renders the NuxtNotifications component in the main application template, specifying its position and transition speed.

```html
<template>
  <NuxtNotifications position="bottom left" :speed="500" />
</template>
```

--------------------------------

### Vue Template for Notification Controls

Source: https://github.com/windx-foobar/nuxt3-notifications/blob/master/docs/content/2.demo/0.index.md

Provides buttons within a Vue template to trigger notification display and cleanup functions. It also demonstrates how to bind click events to methods like 'show' and 'clean'.

```html
<button @click="show('custom-template')">show top left</button>
          <p />
          <button @click="clean('custom-template')"><u>clean all</u> top left</button>
          <p />
          <button @click="show('full-width')">show bottom (full width)</button>
```

--------------------------------

### Configure nuxt3-notifications component name

Source: https://github.com/windx-foobar/nuxt3-notifications/blob/master/README.md

Customizes the component name used for notifications within the Nuxt config, allowing for alternative naming conventions like 'FooBar'.

```typescript
export default defineNuxtConfig({
  modules: ['nuxt3-notifications'],
  nuxtNotifications: {
    componentName: 'Foo' // 'foo-bar' or 'FooBar' for components of two or more words
  },
});
```

--------------------------------

### Add nuxt3-notifications to Nuxt config

Source: https://github.com/windx-foobar/nuxt3-notifications/blob/master/README.md

Configures the Nuxt 3 application to use the nuxt3-notifications module by adding it to the modules array in nuxt.config.

```typescript
export default defineNuxtConfig({
  modules: ['nuxt3-notifications'],
});
```

--------------------------------

### Nuxt 3 Notifications Vue Component with Custom Template

Source: https://github.com/windx-foobar/nuxt3-notifications/blob/master/docs/content/2.demo/0.index.md

This Vue script and template demonstrates how to use the Nuxt 3 Notifications component with a custom template. It defines functions to show and clean notifications, and configures the NuxtNotifications component with a custom slot for the notification body, allowing for rich HTML content and interactive elements.

```vue
<script lang="ts" setup>
const { notify } = useNotification();

const id = useState('id', () => 0);

function show(group: string, type = '') {
  const text = `
    This is notification text!
    <br>
    Date: ${new Date()}
  `;

  notify({
    group,
    title: `Test ${type} notification #${id.value++}`,
    text,
    type,
    data: {
      randomNumber: Math.random()
    }
  });
}

function clean(group: string) {
  notify({ group, clean: true });
}
</script>

<template>
  <div id="demo">
    <!-- CSS animation example -->
    <NuxtNotifications
      group="foo-css"
      position="bottom left"
      dangerously-set-inner-html
      :speed="500"
    />

    <!-- Custom style example -->
    <NuxtNotifications
      group="custom-style"
      position="top center"
      classes="n-light"
      :max="3"
      :width="400"
      :duration="-1"
      dangerously-set-inner-html
    />

    <!-- Custom template example -->
    <NuxtNotifications
      group="custom-template"
      :duration="5000"
      :width="650"
      animation-name="v-fade-left"
      position="top left"
      dangerously-set-inner-html
    >
      <template #body="{ item, close }">
        <div class="custom-template">
          <div class="custom-template-icon">
            <svg width="32" height="32" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg">
              <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                <g id="Icon-Set" transform="translate(-100.000000, -1139.000000)" fill="currentColor">
                  <path d="
                      M122.027,1148.07 C121.548,1147.79 120.937,1147.96 120.661,1148.43 
                      L114.266,1159.51 L110.688,1156.21 C110.31,1155.81 109.677,1155.79 109.274,1156.17 
                      C108.871,1156.54 108.85,1157.18 109.228,1157.58 L113.8,1161.8 C114.177,1162.2 
                      114.81,1162.22 115.213,1161.84 C115.335,1161.73 122.393,1149.43 122.393,1149.43 C122.669,1148.96 
                      122.505,1148.34 122.027,1148.07 L122.027,1148.07 Z M116,1169 
                      C108.268,1169 102,1162.73 102,1155 C102,1147.27 
                      108.268,1141 116,1141 C123.732,1141 130,1147.27 130,1155 C130,1162.73 123.732,1169 
                      116,1169 L116,1169 Z M116,1139 C107.164,1139 100,1146.16 100,1155 
                      C100,1163.84 107.164,1171 116,1171 C124.836,1171 132,1163.84 132,1155 
                      C132,1146.16 124.836,1139 116,1139 L116,1139 Z
                    "
                  />
                </g>
              </g>
            </svg>
          </div>
          <div class="custom-template-content">
            <div class="custom-template-title">
              {{ item.title }}

              <p>
                Random number: {{ item.data.randomNumber }}
              </p>
            </div>
            <div
              class="custom-template-text"
              v-html="item.text"
            />
          </div>
          <div
            class="custom-template-close"
            @click="close"
          >
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M7 17L16.8995 7.10051" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
              <path d="M7 7.00001L16.8995 16.8995" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
          </div>
        </div>
      </template>
    </NuxtNotifications>

    <!-- Full width example -->
    <NuxtNotifications
      group="full-width"
      width="100%"
      position="bottom left"
      dangerously-set-inner-html
    />

    <div class="content">
      <p>CSS animation:</p>
      <div class="block">
        <button class="success" @click="show('foo-css', 'success')">
          <i class="icon ion-information-circled" />
          SUCCESS
        </button>
        <button class="warn" @click="show('foo-css', 'warn')">
          <i class="icon ion-alert-circled" />
          WARNING
        </button>
        <button class="error" @click="show('foo-css', 'error')">
          <i class="icon ion-close-circled" />
          ERROR
        </button>
        <button class="info" @click="show('foo-css', 'info')">
          <i class="icon ion-close-circled" />
          INFO
        </button>
      </div>
      <div>
        <p></p>
        <p>Custom style:</p>
        <button @click="show('custom-style')">top center (max=3, duration=infinity)</button>
        <p></p>
        <p>Custom template:</p>

```

--------------------------------

### Configure Nuxt Notifications Component Name (Nuxt.js)

Source: https://github.com/windx-foobar/nuxt3-notifications/blob/master/docs/content/1.docs/1.introduction/2.configuration.md

This snippet shows how to configure the Nuxt 3 Notifications module by setting the component name in the nuxt.config.ts file. It defines the name used for the notification component within the Nuxt application.

```typescript
export default defineAppConfig({
  nuxtNotifications: {
    componentName: 'NuxtNotifications'
  }
})
```
Tokens:
Raw