How to create global mixin and directive in my plugin?

[evald24]

How to create global mixin and directive in custom plugin, so that inside template there was auto-completion, Is it possible?

const VueSanitizeHtmlPlugin = {}

export default VueSanitizeHtmlPlugin.install = function (Vue, options) {
  var defaultOptions = options
  var sanitizeHtml = require('sanitize-html')

  Vue.directive('sanitaize', {
    update
  })

  Vue.mixin({
    methods: {
      sanitize (dirty, opts = null) {
        return sanitizeHtml(dirty, opts || defaultOptions)
      }
    }
  })

  function update (el, binding, vnode) {
    var dirty = vnode.elm.innerHTML
    var opts = binding.value || defaultOptions
    vnode.elm.innerHTML = sanitizeHtml(dirty, opts)
  }
}

<template>
  <div v-sanitaize v-html="html"></div>
</template>

Plugin: vue-sanitize-html-plugin

[kevinmarrec]

@evald24 If you want to declare your directive in TypeScript, here is an example (extracted from one of my projects):

// Styles
import './styles.scss'

import { DirectiveFunction, DirectiveOptions } from 'vue'
import twemoji from 'twemoji'

const parseEmojis: DirectiveFunction = function (el) {
  el.innerHTML = twemoji.parse(el.innerHTML.replace(/(?:<img class="emoji")(?:.+?)(?:alt=")(.+?)(?:".+?>)/g, '$1'))
}

const emojiDirective: DirectiveOptions = {
  inserted: parseEmojis,
  update: parseEmojis
}

export default emojiDirective

For local mixins, I'd say you can copy https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/mixins.ts in your project and then use it this way :

import mixins from '~/utils/mixins'
import myMixin from './myMixin'

export default mixins(myMixin).extend({
  ...
})

For global mixins I don't really know exactly.

Overall your question doesn't seem related to Nuxt, you should be able to have better help asking on Vue official discord :)

[kevinmarrec]

Overall your question doesn't seem related to Nuxt, you should be able to have better help asking on Vue official discord :)