Как использовать директивы внутри кастомных директив в nuxt 3?

Question

[VladislavFisun]

Подскажите, как внутри кастомной директивы в nuxt 3 накинуть на элемент другую директиву

Answer 1

[Aetae]

Встроенного механизма наследования нет. Директивы - это уже продвинутый механизм, подразумевается, что раз уж вы взялись за директивы - вы глубоко понимаете механизмы Vue. Если вам сильно хочется таки использовать чужую директиву внутри своей, надо будет самостоятельно экспериментировать, навскидку вижу два варианта:
1. "тупой", но точно работающий - пробрасывать все возможные хуки директивы напрямую:

const myDirective = {
  created(el, binding, vnode, prevVnode) {
     otherDirective?.created(el, binding, vnode, prevVnode);
     ...
  },
  beforeMount(el, binding, vnode, prevVnode) {
     otherDirective?.beforeMount(el, binding, vnode, prevVnode);
     ...
  },
  ....
}

2. "умный", но требующий знаний и экспериментов - манипуляции напрямую с vNode.

Однако, возможно, лучше будет сделать просто-компонент-обёртку, который просто навесит все нужные директивы на обёрнутый компонент, примерно так:

import { useSlots, withDirectives, resolveDirective } from 'vue'

export default {
  setup() {
    const htmlDirective = {
      mounted(el, html) {
        el.innerHTML = html.value
      }
    }

    const colorDirective = {
      mounted(el, color) {
        el.style.color = color.value
      }
    }
    
    // const someDirective = resolveDirective('some-directive');

    const slots = useSlots();

    return () => withDirectives(slots.default()[0], [
      [htmlDirective, 'some html'],
      [colorDirective, 'red'],
    ])
  }
}

<wrapper><some-compnent /></wrapper>

Comments

[Aetae]

P,S. Зря я сначала ответил на твой второй вопрос, не прочитав первый. Мой ответ верен, но только в рамках обычных, а не встроенных директив типа v-if. Потому что в конечном коде рендер функции - это не директивы вовсе, а реальный код. Т.е. <div v-if="a > b"/> - это, условно: render() { return a > b ? h('div') : null }.