Solution: Render User-provided Content

Here’s the solution of how to render user-provided content.

We'll cover the following

Solution

Solution

Your task was to determine whether each string should be rendered using the v-html directive and if it needs to be sanitized. Here are the required changes:

For the src/App.vue file:

Render stringOne using mustache tags, rather than v-html directive.
Update the stringThree computed and sanitize the string using the dompurify.sanitize method because the anchor tag contains javascript code in the href attribute. Let’s run the following code to understand how the solution above works.

Note: The code below may take a while to run. When the server starts, go to the app URL, and you will see the output.

Get hands-on with 1400+ tech skills courses.

Before We Begin

Migrating from Vue 2 to Vue 3

Project Configuration and Useful Extensions

Scalable Project Architecture

Project and Component Documentation

API Layer and Managing Async Operations

Advanced Component Patterns

Managing Application State

Managing Application Layouts

Performance Optimization

Vuex Patterns and Best Practices

Application Security

Best Practices for Testing Vue Applications

Useful Patterns, Tips and Tricks

Conclusion

Appendix

Solution: Render User-provided Content

Solution