[{"data":1,"prerenderedAt":36},["ShallowReactive",2],{"3755855":3},{"type_of":4,"id":5,"title":6,"description":7,"readable_publish_date":8,"slug":9,"path":10,"url":11,"comments_count":12,"public_reactions_count":12,"collection_id":13,"published_timestamp":14,"language":15,"subforem_id":16,"positive_reactions_count":12,"cover_image":13,"social_image":17,"canonical_url":18,"created_at":19,"edited_at":13,"crossposted_at":13,"published_at":14,"last_comment_at":14,"reading_time_minutes":20,"tag_list":21,"tags":22,"body_html":27,"body_markdown":28,"user":29},"article",3755855,"Vue v-html and v-text to React: How does VuReact handle them?","VuReact is a compiler toolchain for migrating from Vue to React — and for writing React with Vue 3...","May 26","vue-v-html-and-v-text-to-react-how-does-vureact-handle-them-2076","/smirk9581/vue-v-html-and-v-text-to-react-how-does-vureact-handle-them-2076","https://dev.to/smirk9581/vue-v-html-and-v-text-to-react-how-does-vureact-handle-them-2076",0,null,"2026-05-26T14:00:00Z","en",1,"https://media2.dev.to/dynamic/image/width=1200,height=627,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fuuiaqlvweavn6jlnbc3h.png","https://vureact.top/en/guide/semantic-comparison/template/v-html-v-text.html","2026-05-26T09:46:44Z",2,"webdev, javascript, vue, react",[23,24,25,26],"webdev","javascript","vue","react","\u003Cp>\u003Ca href=\"https://vureact.top/en/guide/introduction.html\" target=\"_blank\" rel=\"noopener noreferrer\">VuReact\u003C/a> is a compiler toolchain for migrating from Vue to React — and for writing React with Vue 3 syntax. In this article, we dive straight into the core: how Vue's common \u003Ccode>v-html\u003C/code>/\u003Ccode>v-text\u003C/code> directives are compiled into React code by VuReact.\u003C/p>\n\n\u003Ch2>\n  \u003Ca name=\"before-we-start\" href=\"#before-we-start\">\n  \u003C/a>\n  Before We Start\n\u003C/h2>\n\n\u003Cp>To keep the examples easy to read, this article follows two simple conventions:\u003C/p>\n\n\u003Col>\n\u003Cli>All Vue and React snippets focus on core logic only, with full component wrappers and unrelated configuration omitted.\u003C/li>\n\u003Cli>The discussion assumes you are already familiar with Vue 3's \u003Ccode>v-html\u003C/code> and \u003Ccode>v-text\u003C/code> directive usage.\u003C/li>\n\u003C/ol>\n\n\u003Ch2>\n  \u003Ca name=\"compilation-mapping\" href=\"#compilation-mapping\">\n  \u003C/a>\n  Compilation Mapping\n\u003C/h2>\n\n\u003Ch3>\n  \u003Ca name=\"vhtml-dynamic-html-content-rendering\" href=\"#vhtml-dynamic-html-content-rendering\">\n  \u003C/a>\n  v-html: Dynamic HTML content rendering\n\u003C/h3>\n\n\u003Cp>\u003Ccode>v-html\u003C/code> is Vue's directive for dynamically rendering an HTML string as DOM elements. It replaces all content inside the element and parses HTML tags.\u003C/p>\n\n\u003Cul>\n\u003Cli>Vue\n\u003C/li>\n\u003C/ul>\n\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight html\">\u003Ccode>\u003Cspan class=\"nt\"><div\u003C/span> \u003Cspan class=\"na\">v-html=\u003C/span>\u003Cspan class=\"s\">\"htmlContent\"\u003C/span>\u003Cspan class=\"nt\">></div>\u003C/span>\n\u003C/code>\u003C/pre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\">\u003Ctitle>Enter fullscreen mode\u003C/title>\n    \u003Cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\">\u003C/path>\n\u003C/svg>\n\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\">\u003Ctitle>Exit fullscreen mode\u003C/title>\n    \u003Cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\">\u003C/path>\n\u003C/svg>\n\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\n\n\u003Cul>\n\u003Cli>Compiled React\n\u003C/li>\n\u003C/ul>\n\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight jsx\">\u003Ccode>\u003Cspan class=\"p\"><\u003C/span>\u003Cspan class=\"nt\">div\u003C/span> \u003Cspan class=\"na\">dangerouslySetInnerHTML\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"p\">{\u003C/span> \u003Cspan class=\"na\">__html\u003C/span>\u003Cspan class=\"p\">:\u003C/span> \u003Cspan class=\"nx\">htmlContent\u003C/span> \u003Cspan class=\"p\">}\u003C/span>\u003Cspan class=\"si\">}\u003C/span> \u003Cspan class=\"p\">/>\u003C/span>\n\u003C/code>\u003C/pre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\">\u003Ctitle>Enter fullscreen mode\u003C/title>\n    \u003Cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\">\u003C/path>\n\u003C/svg>\n\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\">\u003Ctitle>Exit fullscreen mode\u003C/title>\n    \u003Cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\">\u003C/path>\n\u003C/svg>\n\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\n\n\u003Cp>As the example shows, Vue's \u003Ccode>v-html\u003C/code> directive is compiled into React's \u003Ccode>dangerouslySetInnerHTML\u003C/code> property. VuReact adopts an \u003Cstrong>HTML injection compilation strategy\u003C/strong>, converting the template directive into React's special property. This \u003Cstrong>fully preserves Vue's HTML rendering semantics\u003C/strong> — parsing the \u003Ccode>htmlContent\u003C/code> string as HTML and inserting it into the DOM.\u003C/p>\n\n\u003Cp>The key characteristics of this compilation approach are:\u003C/p>\n\n\u003Col>\n\u003Cli>\n\u003Cstrong>Semantic consistency\u003C/strong>: Fully simulates Vue \u003Ccode>v-html\u003C/code> behavior by directly rendering HTML strings\u003C/li>\n\u003Cli>\n\u003Cstrong>Security warning\u003C/strong>: React's \u003Ccode>dangerouslySetInnerHTML\u003C/code> property name itself reminds developers of XSS attack risks\u003C/li>\n\u003Cli>\n\u003Cstrong>Content replacement\u003C/strong>: Just like Vue, it replaces all existing content inside the element\u003C/li>\n\u003C/ol>\n\n\n\u003Chr>\n\n\u003Ch3>\n  \u003Ca name=\"vtext-plain-text-content-rendering\" href=\"#vtext-plain-text-content-rendering\">\n  \u003C/a>\n  v-text: Plain text content rendering\n\u003C/h3>\n\n\u003Cp>\u003Ccode>v-text\u003C/code> is Vue's directive for setting plain text content inside an element. It replaces all content inside the element but does not parse HTML tags.\u003C/p>\n\n\u003Cul>\n\u003Cli>Vue\n\u003C/li>\n\u003C/ul>\n\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight html\">\u003Ccode>\u003Cspan class=\"nt\"><p\u003C/span> \u003Cspan class=\"na\">v-text=\u003C/span>\u003Cspan class=\"s\">\"message\"\u003C/span>\u003Cspan class=\"nt\">></p>\u003C/span>\n\u003C/code>\u003C/pre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\">\u003Ctitle>Enter fullscreen mode\u003C/title>\n    \u003Cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\">\u003C/path>\n\u003C/svg>\n\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\">\u003Ctitle>Exit fullscreen mode\u003C/title>\n    \u003Cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\">\u003C/path>\n\u003C/svg>\n\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\n\n\u003Cul>\n\u003Cli>Compiled React\n\u003C/li>\n\u003C/ul>\n\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight jsx\">\u003Ccode>\u003Cspan class=\"p\"><\u003C/span>\u003Cspan class=\"nt\">p\u003C/span>\u003Cspan class=\"p\">>\u003C/span>\u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"nx\">message\u003C/span>\u003Cspan class=\"si\">}\u003C/span>\u003Cspan class=\"p\"></\u003C/span>\u003Cspan class=\"nt\">p\u003C/span>\u003Cspan class=\"p\">>\u003C/span>\n\u003C/code>\u003C/pre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\">\u003Ctitle>Enter fullscreen mode\u003C/title>\n    \u003Cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\">\u003C/path>\n\u003C/svg>\n\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\">\u003Ctitle>Exit fullscreen mode\u003C/title>\n    \u003Cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\">\u003C/path>\n\u003C/svg>\n\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\n\n\u003Cp>As the example shows, Vue's \u003Ccode>v-text\u003C/code> directive is compiled into a React JSX interpolation expression. VuReact adopts a \u003Cstrong>text interpolation compilation strategy\u003C/strong>, converting the template directive into JSX's curly brace expression. This \u003Cstrong>fully preserves Vue's text rendering semantics\u003C/strong> — inserting \u003Ccode>message\u003C/code> as plain text content into the element.\u003C/p>\n\n\u003Cp>The key characteristics of this compilation approach are:\u003C/p>\n\n\u003Col>\n\u003Cli>\n\u003Cstrong>Semantic consistency\u003C/strong>: Fully simulates Vue \u003Ccode>v-text\u003C/code> behavior by rendering plain text content\u003C/li>\n\u003Cli>\n\u003Cstrong>Automatic escaping\u003C/strong>: React's JSX interpolation automatically escapes HTML special characters, preventing XSS attacks\u003C/li>\n\u003Cli>\n\u003Cstrong>Content replacement\u003C/strong>: Just like Vue, it replaces all existing content inside the element\u003C/li>\n\u003C/ol>\n\n\u003Cp>VuReact's compilation strategy ensures a smooth migration from Vue to React. Developers do not need to manually rewrite content rendering logic — the compiled code preserves Vue's semantics while following React's security best practices.\u003C/p>\n\n\u003Ch2>\n  \u003Ca name=\"related-links\" href=\"#related-links\">\n  \u003C/a>\n  Related Links\n\u003C/h2>\n\n\u003Cul>\n\u003Cli>Docs: \u003Ca href=\"https://vureact.top/en/guide/semantic-comparison/template/v-html-v-text.html\" target=\"_blank\" rel=\"noopener noreferrer\">https://vureact.top/en/guide/semantic-comparison/template/v-html-v-text.html\u003C/a>\n\u003C/li>\n\u003Cli>GitHub: \u003Ca href=\"https://github.com/vureact-js/core\" target=\"_blank\" rel=\"noopener noreferrer\">https://github.com/vureact-js/core\u003C/a>\n\u003C/li>\n\u003C/ul>\n\n","[VuReact](https://vureact.top/en/guide/introduction.html) is a compiler toolchain for migrating from Vue to React — and for writing React with Vue 3 syntax. In this article, we dive straight into the core: how Vue's common `v-html`/`v-text` directives are compiled into React code by VuReact.\n\n## Before We Start\n\nTo keep the examples easy to read, this article follows two simple conventions:\n\n1. All Vue and React snippets focus on core logic only, with full component wrappers and unrelated configuration omitted.\n2. The discussion assumes you are already familiar with Vue 3's `v-html` and `v-text` directive usage.\n\n## Compilation Mapping\n\n### v-html: Dynamic HTML content rendering\n\n`v-html` is Vue's directive for dynamically rendering an HTML string as DOM elements. It replaces all content inside the element and parses HTML tags.\n\n- Vue\n\n```html\n\u003Cdiv v-html=\"htmlContent\">\u003C/div>\n```\n\n- Compiled React\n\n```jsx\n\u003Cdiv dangerouslySetInnerHTML={{ __html: htmlContent }} />\n```\n\nAs the example shows, Vue's `v-html` directive is compiled into React's `dangerouslySetInnerHTML` property. VuReact adopts an **HTML injection compilation strategy**, converting the template directive into React's special property. This **fully preserves Vue's HTML rendering semantics** — parsing the `htmlContent` string as HTML and inserting it into the DOM.\n\nThe key characteristics of this compilation approach are:\n\n1. **Semantic consistency**: Fully simulates Vue `v-html` behavior by directly rendering HTML strings\n2. **Security warning**: React's `dangerouslySetInnerHTML` property name itself reminds developers of XSS attack risks\n3. **Content replacement**: Just like Vue, it replaces all existing content inside the element\n\n---\n\n### v-text: Plain text content rendering\n\n`v-text` is Vue's directive for setting plain text content inside an element. It replaces all content inside the element but does not parse HTML tags.\n\n- Vue\n\n```html\n\u003Cp v-text=\"message\">\u003C/p>\n```\n\n- Compiled React\n\n```jsx\n\u003Cp>{message}\u003C/p>\n```\n\nAs the example shows, Vue's `v-text` directive is compiled into a React JSX interpolation expression. VuReact adopts a **text interpolation compilation strategy**, converting the template directive into JSX's curly brace expression. This **fully preserves Vue's text rendering semantics** — inserting `message` as plain text content into the element.\n\nThe key characteristics of this compilation approach are:\n\n1. **Semantic consistency**: Fully simulates Vue `v-text` behavior by rendering plain text content\n2. **Automatic escaping**: React's JSX interpolation automatically escapes HTML special characters, preventing XSS attacks\n3. **Content replacement**: Just like Vue, it replaces all existing content inside the element\n\nVuReact's compilation strategy ensures a smooth migration from Vue to React. Developers do not need to manually rewrite content rendering logic — the compiled code preserves Vue's semantics while following React's security best practices.\n\n## Related Links\n\n- Docs: \u003Chttps://vureact.top/en/guide/semantic-comparison/template/v-html-v-text.html>\n- GitHub: \u003Chttps://github.com/vureact-js/core>\n",{"name":30,"username":31,"twitter_username":13,"github_username":31,"user_id":32,"website_url":33,"profile_image":34,"profile_image_90":35},"Ryan John","smirk9581",3937044,"https://github.com/smirk9581","https://media2.dev.to/dynamic/image/width=640,height=640,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3937044%2F4b72d2cd-9432-46d4-924e-332cd54382c4.png","https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3937044%2F4b72d2cd-9432-46d4-924e-332cd54382c4.png",1780059473268]