V-HTML

[palachX]

V-HTML

[rozsazoltan]

Basically, using v-html is a security risk. Instead, you have the option to build your own layout, even copying the default layout, with the modification that you will output the text using v-html. By default, I do not support integrating v-html into a package in any way.

Using v-html is safe or not? - StackOverflow Question
More information from v-html - Vue 3 Docs

Warning

Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to XSS vulnerabilities. Only use v-html on trusted content and never on user-provided content.

(from Vue 3 Docs)

What I mean is, you can use v-html to render any html that comes from you.
If the html comes from the user, don't use v-html.

StackOverflow - Vince
Oct 3, 2019 at 3:33

If a developer needs this functionality, they should only be provided with the opportunity to use it. The <slot> and <template> elements are precisely designed for this purpose. See my example.

How to set Custom UI - v-onboarding docs

<VOnboardingWrapper ref="wrapper" :steps="steps">
  <template #default="{ previous, next, step, exit, isFirst, isLast, index }">
    <VOnboardingStep>
      <div class="bg-white shadow sm:rounded-lg">
        <div class="px-4 py-5 sm:p-6">
          <div class="sm:flex sm:items-center sm:justify-between">
            <div v-if="step.content">
              <h3 v-if="step.content.title" class="text-lg font-medium leading-6 text-gray-900">{{ step.content.title }}</h3>
              <div v-if="step.content.description" class="mt-2 max-w-xl text-sm text-gray-500">
                <div v-html="step.content.description" /> <!-- Added description HERE (instead of {{ step.content.description }} using) -->
              </div>
            </div>
            <div class="mt-5 space-x-4 sm:mt-0 sm:ml-6 sm:flex sm:flex-shrink-0 sm:items-center relative">
              <span class="absolute right-0 bottom-full mb-2 mr-2 text-gray-600 font-medium text-xs">{{ `${index + 1}/${steps.length}` }}</span>
              <template v-if="!isFirst">
                <button @click="previous" type="button" class="inline-flex items-center justify-center rounded-md border border-transparent bg-yellow-100 px-4 py-2 font-medium text-yellow-700 hover:bg-yellow-200 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 sm:text-sm">Previous</button>
              </template>
              <button @click="next" type="button" class="inline-flex items-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:text-sm">{{ isLast ? 'Finish' : 'Next' }}</button>
            </div>
          </div>
        </div>
      </div>
    </VOnboardingStep>
  </template>
</VOnboardingWrapper>

Let there be no misunderstanding, I am not against using v-html, but packages should prioritize security to protect developers from potential issues if they are not burdened with such complexities by default. While I can imagine supporting v-html, it should be done through a boolean option.

Although thanks to <slot>, there is currently the possibility to customize the appearance of the steps, so one could say that it would be an unnecessary innovation.

[palachX]

At the moment I am using slot to change this, but if you add a change of this in the options to step I will be grateful to you)

[fatihsolhan]

🎉 This issue has been resolved in version 2.7.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release