How to use DOMPurify package with NuxtJS? Error: "default.a.sanitize is not a function"

Question

I am trying to use the DOMPurify package in my NuxtJS app for parsing HTML into clean and safe strings for rendering in the UI. When rendering the page where the package is used, I get the following error:

dompurify__WEBPACK_IMPORTED_MODULE_1___default.a.sanitize is not a function

Any advice on how I can fix this? I have this code available in a codesandbox here: https://codesandbox.io/s/reverent-bardeen-kh4wg?file=/pages/index.vue:0-2868

I have imported the package in my single file component like so:

<template>
  ......cut unnecessary code for this example...
        <textarea
          id="title_input"
          v-model.trim="formValues.title"
          class="form-control form-control-lg border-0 fw-bold lh-1 fs-1 mb-3"
          placeholder="New post title here..."
          maxlength="80"
          rows="2"
          minlength="6"
          autocomplete="off"
          required
          aria-describedby="titleHelpBlock"
        ></textarea>
        <textarea
          id="content_input"
          v-model.trim="formValues.content"
          class="form-control border-0 h-100"
          rows="3"
          minlength="30"
          maxlength="1000"
          autocomplete="off"
          placeholder="Write your post here..."
          required
          aria-describedby="contentHelpBlock"
        ></textarea>
      
  .....
</template>

<script>
import { debounce } from "lodash";
import DOMPurify from "dompurify";
import marked from "marked";
export default {
  name: "UploadForm",
  data() {
    return {
      formValues: {
        title: "New post title here...",
        content: "Write your post here...",
      },
    };
  },
  computed: {
    compiledMarkdown() {
      // only need the HTML profile, not SVG andMathML stuff
      const clean = DOMPurify.sanitize(this.formValues.title, {
        USE_PROFILES: { html: true },
      });
      return marked(clean);
    },
  },
  methods: {
    update: debounce(function (e) {
      this.input = e.target.value;
    }, 300),
    updateTitle: debounce(function (e) {
      this.formValues.title = e.target.value;
    }, 300),
    updateContent: debounce(function (e) {
      this.formValues.content = e.target.value;
    }, 300),
  },
};
</script>

Answer 1

You cannot use v-html as a directive directly because it can lead to XSS: https://v2.vuejs.org/v2/guide/syntax.html#Raw-HTML

Therefore you need to sanitize some of those user inputs.
To achieve this in Vue/Nuxt, I do recommend to use vue-dompurify-html

Some steps to follow

• install it with yarn add vue-dompurify-html
• import it in your .vue file like this

import Vue from 'vue'
import VueDOMPurifyHTML from 'vue-dompurify-html'
 
Vue.use(VueDOMPurifyHTML)

• use it in your template like this

<div>
  <div v-dompurify-html="rawHtml"></div>
</div>

PS: if you want to use it into a Vue2 app, still to the v2.5.2, higher version only support Vue3.

Answer 2

If you want to use it as a Nuxt 3 plugin just create a file plugins/vue-dompurify-html.js with this code:

import VueDOMPurifyHTML from 'vue-dompurify-html'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VueDOMPurifyHTML)
})

After this you can use it in any component without importing:

<div v-dompurify-html="rawHtml"></div>