Интеграция в Vue.js

Интеграция библиотеки Noty в приложение на Vue.js начинается с установки через пакетный менеджер:

npm install noty

Далее необходимо импортировать библиотеку и стили в проект:

import Noty from 'noty';
import 'noty/lib/noty.css';
import 'noty/lib/themes/mint.css';

Стили темы можно заменить на любую доступную (relax, metroui, sunset и др.).

Создание глобального уведомляющего сервиса

В Vue-приложениях удобно вынести работу с уведомлениями в отдельный модуль. Это избавляет от дублирования кода и упрощает управление уведомлениями.

// services/noty.js
import Noty from 'noty';

export function notify(options) {
  return new Noty({
    type: 'success',
    layout: 'topRight',
    timeout: 3000,
    theme: 'mint',
    ...options
  }).show();
}

Использование:

import { notify } from '@/services/noty';

notify({ text: 'Данные успешно сохранены' });

Интеграция через глобальные свойства Vue

Для удобного доступа к Noty из любого компонента можно добавить его в глобальные свойства приложения.

Vue 3

import { createApp } from 'vue';
import App from './App.vue';
import Noty from 'noty';

const app = createApp(App);

app.config.globalProperties.$noty = (options) => {
  return new Noty({
    layout: 'topRight',
    timeout: 3000,
    theme: 'mint',
    ...options
  }).show();
};

app.mount('#app');

Использование в компоненте:

this.$noty({ text: 'Уведомление из компонента', type: 'info' });

Vue 2

Vue.prototype.$noty = function(options) {
  return new Noty({
    layout: 'topRight',
    timeout: 3000,
    theme: 'mint',
    ...options
  }).show();
};

Использование Composition API

В проектах на Vue 3 с Composition API удобно создавать composable-функцию:

// composables/useNoty.js
import Noty from 'noty';

export function useNoty() {
  const show = (options) => {
    return new Noty({
      layout: 'topRight',
      timeout: 3000,
      theme: 'mint',
      ...options
    }).show();
  };

  return { show };
}

Использование:

import { useNoty } from '@/composables/useNoty';

export default {
  setup() {
    const { show } = useNoty();

    show({ text: 'Сообщение через Composition API', type: 'success' });
  }
};

Реакция на события приложения

Noty часто используется для отображения уведомлений при изменении состояния приложения — успешные операции, ошибки, предупреждения.

Пример с обработкой API-запроса:

import axios from 'axios';
import { notify } from '@/services/noty';

async function saveData(data) {
  try {
    await axios.post('/api/save', data);
    notify({ text: 'Сохранение выполнено', type: 'success' });
  } catch (e) {
    notify({ text: 'Ошибка при сохранении', type: 'error' });
  }
}

Интеграция с Vuex / Pinia

При использовании централизованного хранилища удобно вызывать уведомления внутри действий.

Vuex:

actions: {
  async fetchData({ commit }) {
    try {
      const data = await fetch('/api/data').then(r => r.json());
      commit('setData', data);

      notify({ text: 'Данные загружены', type: 'success' });
    } catch {
      notify({ text: 'Ошибка загрузки', type: 'error' });
    }
  }
}

Pinia:

import { defineStore } from 'pinia';
import { notify } from '@/services/noty';

export const useStore = defineStore('main', {
  actions: {
    async load() {
      try {
        // загрузка данных
        notify({ text: 'Успешно', type: 'success' });
      } catch {
        notify({ text: 'Ошибка', type: 'error' });
      }
    }
  }
});

Кастомизация уведомлений

Noty предоставляет широкие возможности настройки:

notify({
  text: 'Подтвердите действие',
  type: 'warning',
  timeout: false,
  buttons: [
    Noty.button('Да', 'btn btn-success', function () {
      console.log('Подтверждено');
      this.close();
    }),
    Noty.button('Нет', 'btn btn-danger', function () {
      this.close();
    })
  ]
});

Управление очередью уведомлений

Для предотвращения перегрузки интерфейса можно ограничить количество одновременно отображаемых уведомлений:

Noty.setMaxVisible(3);

Или использовать очередь:

new Noty({
  text: 'Сообщение в очереди',
  queue: 'customQueue'
}).show();

Очистка уведомлений при смене маршрута

В SPA-приложениях важно очищать уведомления при переходе между страницами:

import Noty from 'noty';
import router from './router';

router.afterEach(() => {
  Noty.closeAll();
});

Работа с анимациями

Noty поддерживает кастомные CSS-анимации:

new Noty({
  text: 'Анимированное уведомление',
  animation: {
    open: 'animated bounceInRight',
    close: 'animated bounceOutRight'
  }
}).show();

Требуется подключение библиотеки анимаций, например animate.css.

Типовые паттерны использования

1. Уведомления об ошибках формы

if (!email) {
  notify({ text: 'Email обязателен', type: 'error' });
}

2. Глобальный обработчик ошибок

window.addEventListener('error', () => {
  notify({ text: 'Произошла ошибка', type: 'error' });
});

3. Уведомления после маршрутизации

router.afterEach((to) => {
  if (to.meta.successMessage) {
    notify({ text: to.meta.successMessage, type: 'success' });
  }
});

SSR и ограничения

При использовании серверного рендеринга (например, Nuxt) необходимо учитывать, что Noty работает только в браузере:

if (typeof window !== 'undefined') {
  notify({ text: 'Клиентское уведомление' });
}

Оптимизация и best practices

  • централизовать конфигурацию уведомлений
  • избегать создания уведомлений в циклах
  • использовать разные типы (success, error, warning, info) для UX
  • контролировать количество уведомлений
  • очищать уведомления при смене контекста

Расширение через плагины

Noty можно обернуть в полноценный Vue-плагин:

export default {
  install(app) {
    app.config.globalProperties.$notify = (options) => {
      return new Noty({
        layout: 'topRight',
        timeout: 3000,
        theme: 'mint',
        ...options
      }).show();
    };
  }
};

Подключение:

import NotyPlugin from './plugins/noty';

app.use(NotyPlugin);

Отладка и диагностика

Распространённые проблемы:

  • отсутствуют стили → уведомления не отображаются корректно
  • вызов в SSR → ошибка window is undefined
  • конфликт CSS с UI-фреймворками
  • слишком короткий timeout → пользователь не успевает прочитать сообщение

Для диагностики полезно временно отключать timeout:

notify({ text: 'Отладка', timeout: false });
Оглавление