Телеграмм чат группы nuxtjs

14:07пожаловаться #1

image_2021-05-09_14-15-44.png

(17.03 Кб)

Привет!
Хочу добавить свой кастомный плагин для нотификаций, но не совсем понимаю как я могу встроить в dom сам компонент нотификации при вызове плагина.

Видел пока только варианты с работой внутри плагина через стор и встраиванием в глобальный лэйаут этого компонента. Но такой подход мне не очень нравится. Есть ли какой вариант сделать так как я хочу?

14:15пожаловаться #2

Maxim Kostenko in Nuxt.js | Vue SSR

vue-portal

14:51пожаловаться #3

А как тогда portal-target прописать в самом плагине?

A Vue component to render your component's template anywhere in the DOM.

15:08пожаловаться #4

Maxim Kostenko in Nuxt.js | Vue SSR

Можно вообще не делать из этого плагин а вставлять через v-if где нужно

Второй вариант
https://portal-vue.linusb.org/api/wormhole.html#methods

portal-vue.linusb.org

Wormhole Object | Portal-Vue

15:11пожаловаться #5

Aquinary in Nuxt.js | Vue SSR

Так и сделал
Но всё равно бомбит
Ерунда какая-то выходит, спрашиваю у них в дискорде уже и в ответ тишина
Дико раздражает, хер поймёшь что не так и что конкретно надо сделать чтобы заработало
Хотя казалось бы вроде как офф. дискорд нукста и канал им отдельный выделили

15:15пожаловаться #6

Никто не кому не должен

15:18пожаловаться #7

через v-if не хочется
придется дублировать компонент нотификации каждый раз
хочется более универсально сделать как в либах некоторых

15:21пожаловаться #8

чтобы просто обратиться раз где нибудь this.$notification(...) и все работает

15:21пожаловаться #9

Вставь в лейаут компонент, через $notification вызывай

15:22пожаловаться #10

это да...
но у меня несколько лэйаутов

15:22пожаловаться #11

придется опять же в каждый вставлять

15:22пожаловаться #12

это не то чтобы прям большая боль, но просто самому интересно как сделать более правильно

15:23пожаловаться #13

https://github.com/euvl/vue-notification

GitHub

euvl/vue-notification

:icecream: Vue.js 2 library for showing notifications - euvl/vue-notification

15:23пожаловаться #14

Глянь пример

15:23пожаловаться #15

Ну вставь во все лейауты, не 20 же их

15:23пожаловаться #16

ладно, может и правда просто залезть в какую-нибудь либу и посмотреть как там сделано
спасибо

15:24пожаловаться #17

Если не хочется так то при инциализации генери свой wrapper и крепи к body

15:25пожаловаться #18

Maxim Kostenko in Nuxt.js | Vue SSR

openNotification(notificationText) {

const VueInstance = new

Vue();

const notificationVNode = VueInstance.$createElement

(
        notificationComponent, {

props

: {

text

: notificationText
        }
    });
    Wormhole.

open

({

: 'notification-host-target',

from

: 'notification-source',

passengers

: [notificationVNode]
    });
}

15:26пожаловаться #19

о, спасибо
выглядит именно так как я хотел