SpiKe.
SpiKe.
PostsComments
NNuxt
Created by SpiKe. on 6/19/2024 in #❓・help
Sanitize HTML on SSR
Hello, im trying to create a directive which sanitze the html code as a replacement for v-html. This is working fine on client side but not on server side. Is it possible to archive this on SSR to prevent layout shifts? 
import DOMPurify from 'isomorphic-dompurify';

import type { DirectiveBinding } from 'vue';

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.vueApp.directive(
    'dompurify-html',
    (el: HTMLElement, binding: DirectiveBinding<string>) => {
      el.innerHTML = DOMPurify.sanitize(binding.value, {
        USE_PROFILES: { html: true },
      });
    }
  );
});
import DOMPurify from 'isomorphic-dompurify';

import type { DirectiveBinding } from 'vue';

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.vueApp.directive(
    'dompurify-html',
    (el: HTMLElement, binding: DirectiveBinding<string>) => {
      el.innerHTML = DOMPurify.sanitize(binding.value, {
        USE_PROFILES: { html: true },
      });
    }
  );
});
1 replies
NNuxt
Created by SpiKe. on 6/10/2024 in #❓・help
How to calculate scrollbar width before elements are visible ?
Hi everyone, I am trying to determine the user's scrollbar width by calculating window.innerWidth - document.body.clientWidth. However, when I use the app:beforeMount hook, this code executes after the DOM has been rendered and the first elements are already visible. Is there a way to execute this calculation before any elements become visible? Thank you!
3 replies