Vue - style user input in confirm message (allow specific html tags)

You can try to use a package like sanitize-html. Here is how I would do it:

Install:

npm install sanitize-html

main.js:

import sanitizeHTML from 'sanitize-html';
Vue.prototype.$sanitize = sanitizeHTML;

YourComponent.vue:

<div v-html="$sanitize(itemName)" />

Have a look at the README for more information about default options for allowed tags and attributes.

EDIT resp. Alternatives:

sanitize-html has a drawback of a 327 KB weight. But there are smaller packages available:

Define your modal as such:

template

<div class="modal">
  <slot></slot>
  <button @click="$emit(true)">Yes</button>
  <button @click="$emit(false)">No</button>
</div>

styling

.modal > em {
  /* apply anything you want here */
}

Then use your modal in a companant:

template

<template>
  ...
    <modal>Are you sure you want to delete <em>{{itemName}}</em>?</modal>
  ...
</template>

Related