[Nuxt3] unable to run on client

[madebyfabian]

Hi there, thank you for providing this plugin. Though it seems that the underlying sanitize-html is generally not made for client-code. I get these errors while trying to use the plugin within nuxt3:

Did everyone experience this? I am running this code on the client-side of nuxt, since I have ssr off for this route.

[andrzejkupczyk]

@madebyfabian yes I have this problem too. I think the cause is the htmlparser2 package because I've already tried several other packages that use htmlparser2 and they all fail. The vue-sanitize-directive works for me.

[madebyfabian]

@andrzejkupczyk The only thing I was getting to work was https://github.com/kkomelin/isomorphic-dompurify and without any vue/nuxt wrappers, just installed directly. Works fine on both client and server-side.

Here is an example to get it up and running as a directive:

import DOMPurify from 'isomorphic-dompurify'

export default defineNuxtPlugin(nuxtApp => {
    nuxtApp.vueApp.directive('sanitize-html', {
        mounted(el, binding) {
            try {
                el.innerHTML = binding.value ? DOMPurify.sanitize(binding.value) : ''
            } catch (error) {}
        },
    })
})

[andrzejkupczyk]

Even better, thanks!