[{"data":1,"prerenderedAt":37},["ShallowReactive",2],{"3760015":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":17,"social_image":18,"canonical_url":19,"created_at":20,"edited_at":13,"crossposted_at":13,"published_at":14,"last_comment_at":14,"reading_time_minutes":21,"tag_list":22,"tags":23,"body_html":28,"body_markdown":29,"user":30},"article",3760015,"How does VuReact implement Vue dynamic components in React?","VuReact is a compiler for migrating from Vue to React — and for writing React with Vue syntax. In...","May 27","how-does-vureact-implement-vue-dynamic-components-in-react-cdl","/smirk9581/how-does-vureact-implement-vue-dynamic-components-in-react-cdl","https://dev.to/smirk9581/how-does-vureact-implement-vue-dynamic-components-in-react-cdl",0,null,"2026-05-27T14:00:00Z","en",1,"https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fct43kzf4pr4j6ygfeyp5.png","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%2Fct43kzf4pr4j6ygfeyp5.png","https://vureact.top/en/guide/semantic-comparison/template/is.html","2026-05-27T00:39:55Z",3,"webdev, javascript, vue, react",[24,25,26,27],"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 for migrating from Vue to React — and for writing React with Vue syntax. In this article, we dive straight into the core: how Vue's common \u003Ccode>is\u003C/code> and \u003Ccode>:is\u003C/code> attributes 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 the usage and use cases of Vue 3's \u003Ccode>is\u003C/code> attribute.\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=\"dynamic-components-raw-is-endraw-attribute\" href=\"#dynamic-components-raw-is-endraw-attribute\">\n  \u003C/a>\n  Dynamic components: \u003Ccode>:is\u003C/code> attribute\n\u003C/h3>\n\n\u003Cp>The \u003Ccode>:is\u003C/code> attribute is used for dynamically rendering components. It allows you to decide which component to render based on data at runtime.\u003C/p>\n\n\u003Ch4>\n  \u003Ca name=\"basic-dynamic-components\" href=\"#basic-dynamic-components\">\n  \u003C/a>\n  Basic dynamic components\n\u003C/h4>\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\"><component\u003C/span> \u003Cspan class=\"na\">:is=\u003C/span>\u003Cspan class=\"s\">\"currentComponent\"\u003C/span> \u003Cspan class=\"nt\">/>\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=\"k\">import\u003C/span> \u003Cspan class=\"p\">{\u003C/span> \u003Cspan class=\"nx\">Component\u003C/span> \u003Cspan class=\"p\">}\u003C/span> \u003Cspan class=\"k\">from\u003C/span> \u003Cspan class=\"dl\">'\u003C/span>\u003Cspan class=\"s1\">@vureact/runtime-core\u003C/span>\u003Cspan class=\"dl\">'\u003C/span>\u003Cspan class=\"p\">;\u003C/span>\n\n\u003Cspan class=\"p\"><\u003C/span>\u003Cspan class=\"nc\">Component\u003C/span> \u003Cspan class=\"na\">is\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"nx\">currentComponent\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>:is\u003C/code> attribute is compiled into the \u003Ccode>is\u003C/code> prop of the \u003Ca href=\"https://runtime.vureact.top/en/guide/components/dynamic-components.html\" target=\"_blank\" rel=\"noopener noreferrer\">Component\u003C/a> \u003Cstrong>adapter component\u003C/strong> — think of it as \"Vue's dynamic component for React\".\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's dynamic component behavior by implementing component switching\u003C/li>\n\u003Cli>\n\u003Cstrong>Component mapping\u003C/strong>: Converts Vue's \u003Ccode><component>\u003C/code> element into VuReact Runtime's \u003Ccode><Component>\u003C/code> component\u003C/li>\n\u003Cli>\n\u003Cstrong>Attribute passing\u003C/strong>: Preserves the dynamic binding capability of the \u003Ccode>is\u003C/code> attribute\u003C/li>\n\u003C/ol>\n\n\n\u003Chr>\n\n\u003Ch3>\n  \u003Ca name=\"dynamic-components-with-props\" href=\"#dynamic-components-with-props\">\n  \u003C/a>\n  Dynamic components with props\n\u003C/h3>\n\n\u003Cp>Dynamic components often need props passed to them, and VuReact handles this correctly.\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\"><component\u003C/span> \n  \u003Cspan class=\"na\">:is=\u003C/span>\u003Cspan class=\"s\">\"currentView\"\u003C/span> \n  \u003Cspan class=\"na\">:title=\u003C/span>\u003Cspan class=\"s\">\"pageTitle\"\u003C/span> \n  \u003Cspan class=\"na\">:data=\u003C/span>\u003Cspan class=\"s\">\"pageData\"\u003C/span>\n  \u003Cspan class=\"err\">@\u003C/span>\u003Cspan class=\"na\">custom-event=\u003C/span>\u003Cspan class=\"s\">\"handleCustom\"\u003C/span>\n\u003Cspan class=\"nt\">/>\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=\"nc\">Component\u003C/span> \n  \u003Cspan class=\"na\">is\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"nx\">currentView\u003C/span>\u003Cspan class=\"si\">}\u003C/span>\n  \u003Cspan class=\"na\">title\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"nx\">pageTitle\u003C/span>\u003Cspan class=\"si\">}\u003C/span>\n  \u003Cspan class=\"na\">data\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"nx\">pageData\u003C/span>\u003Cspan class=\"si\">}\u003C/span>\n  \u003Cspan class=\"na\">onCustomEvent\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"nx\">handleCustom\u003C/span>\u003Cspan class=\"si\">}\u003C/span>\n\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>\u003Cstrong>Props passing rules\u003C/strong>:\u003C/p>\n\n\u003Col>\n\u003Cli>\n\u003Cstrong>Attribute mapping\u003C/strong>: Converts Vue attributes to React props\u003C/li>\n\u003Cli>\n\u003Cstrong>Event conversion\u003C/strong>: Converts Vue events to React event props\u003C/li>\n\u003Cli>\n\u003Cstrong>Type preservation\u003C/strong>: Keeps the type definition integrity of props\u003C/li>\n\u003Cli>\n\u003Cstrong>Default value handling\u003C/strong>: Correctly handles component default props\u003C/li>\n\u003C/ol>\n\n\n\u003Chr>\n\n\u003Ch3>\n  \u003Ca name=\"resolving-dom-template-limitations-raw-is-endraw-attribute\" href=\"#resolving-dom-template-limitations-raw-is-endraw-attribute\">\n  \u003C/a>\n  Resolving DOM template limitations: \u003Ccode>is\u003C/code> attribute\n\u003C/h3>\n\n\u003Cp>The \u003Ccode>is\u003C/code> attribute is used to resolve in-DOM template parsing limitations, primarily for correctly rendering components inside elements like \u003Ccode><table>\u003C/code>, \u003Ccode><ul>\u003C/code>, \u003Ccode><ol>\u003C/code>, \u003Ccode><select>\u003C/code>, etc.\u003C/p>\n\n\u003Ch4>\n  \u003Ca name=\"using-raw-is-endraw-in-tables\" href=\"#using-raw-is-endraw-in-tables\">\n  \u003C/a>\n  Using \u003Ccode>is\u003C/code> in tables\n\u003C/h4>\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\"><table>\u003C/span>\n  \u003Cspan class=\"nt\"><tr\u003C/span> \u003Cspan class=\"na\">is=\u003C/span>\u003Cspan class=\"s\">\"vue:user-row\"\u003C/span>\u003Cspan class=\"nt\">></tr>\u003C/span>\n\u003Cspan class=\"nt\"></table>\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\">table\u003C/span>\u003Cspan class=\"p\">>\u003C/span>\n  \u003Cspan class=\"p\"><\u003C/span>\u003Cspan class=\"nc\">UserRow\u003C/span> \u003Cspan class=\"p\">/>\u003C/span>\n\u003Cspan class=\"p\"></\u003C/span>\u003Cspan class=\"nt\">table\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>\u003Cstrong>Compilation strategy\u003C/strong>:\u003C/p>\n\n\u003Col>\n\u003Cli>\n\u003Cstrong>Component replacement\u003C/strong>: Replaces \u003Ccode>is=\"vue:user-row\"\u003C/code> with \u003Ccode><UserRow />\u003C/code>\n\u003C/li>\n\u003Cli>\n\u003Cstrong>Vue prefix handling\u003C/strong>: Automatically removes the \u003Ccode>vue:\u003C/code> prefix\u003C/li>\n\u003Cli>\n\u003Cstrong>HTML structure preservation\u003C/strong>: Maintains correct HTML element nesting structure\u003C/li>\n\u003C/ol>\n\n\u003Ch4>\n  \u003Ca name=\"using-raw-is-endraw-in-lists\" href=\"#using-raw-is-endraw-in-lists\">\n  \u003C/a>\n  Using \u003Ccode>is\u003C/code> in lists\n\u003C/h4>\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\"><ul>\u003C/span>\n  \u003Cspan class=\"nt\"><li\u003C/span> \u003Cspan class=\"na\">is=\u003C/span>\u003Cspan class=\"s\">\"vue:todo-item\"\u003C/span>\u003Cspan class=\"nt\">></li>\u003C/span>\n\u003Cspan class=\"nt\"></ul>\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\">ul\u003C/span>\u003Cspan class=\"p\">>\u003C/span>\n  \u003Cspan class=\"p\"><\u003C/span>\u003Cspan class=\"nc\">TodoItem\u003C/span> \u003Cspan class=\"p\">/>\u003C/span>\n\u003Cspan class=\"p\"></\u003C/span>\u003Cspan class=\"nt\">ul\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\n\u003Chr>\n\n\u003Ch3>\n  \u003Ca name=\"dynamic-components-with-vbind\" href=\"#dynamic-components-with-vbind\">\n  \u003C/a>\n  Dynamic components with v-bind\n\u003C/h3>\n\n\u003Cp>Dynamic components are often used together with \u003Ccode>v-bind\u003C/code> for more flexible component configuration.\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\"><component\u003C/span> \n  \u003Cspan class=\"na\">:is=\u003C/span>\u003Cspan class=\"s\">\"componentType\"\u003C/span> \n  \u003Cspan class=\"na\">v-bind=\u003C/span>\u003Cspan class=\"s\">\"componentProps\"\u003C/span>\n\u003Cspan class=\"nt\">/>\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=\"k\">import\u003C/span> \u003Cspan class=\"p\">{\u003C/span> \u003Cspan class=\"nx\">dir\u003C/span> \u003Cspan class=\"p\">}\u003C/span> \u003Cspan class=\"k\">from\u003C/span> \u003Cspan class=\"dl\">'\u003C/span>\u003Cspan class=\"s1\">@vureact/runtime-core\u003C/span>\u003Cspan class=\"dl\">'\u003C/span>\u003Cspan class=\"p\">;\u003C/span>\n\n\u003Cspan class=\"p\"><\u003C/span>\u003Cspan class=\"nc\">Component\u003C/span> \n  \u003Cspan class=\"na\">is\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"nx\">componentType\u003C/span>\u003Cspan class=\"si\">}\u003C/span>\n  \u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"p\">...\u003C/span>\u003Cspan class=\"nx\">dir\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nf\">keyless\u003C/span>\u003Cspan class=\"p\">(\u003C/span>\u003Cspan class=\"nx\">componentProps\u003C/span>\u003Cspan class=\"p\">)\u003C/span>\u003Cspan class=\"si\">}\u003C/span>\n\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>\u003Cstrong>Object spread handling\u003C/strong>:\u003C/p>\n\n\u003Col>\n\u003Cli>\n\u003Cstrong>Attribute merging\u003C/strong>: Correctly handles merging of \u003Ccode>v-bind\u003C/code> objects with explicit attributes\u003C/li>\n\u003Cli>\n\u003Cstrong>Conflict resolution\u003C/strong>: Handles attribute name conflicts\u003C/li>\n\u003Cli>\n\u003Cstrong>Special attribute conversion\u003C/strong>: Automatically converts special attributes like \u003Ccode>class\u003C/code>, \u003Ccode>style\u003C/code>, etc.\u003C/li>\n\u003C/ol>\n\n\n\u003Chr>\n\n\u003Ch3>\n  \u003Ca name=\"compilation-strategy-summary\" href=\"#compilation-strategy-summary\">\n  \u003C/a>\n  Compilation strategy summary\n\u003C/h3>\n\n\u003Cp>VuReact's \u003Ccode>is\u003C/code>/\u003Ccode>:is\u003C/code> compilation strategy demonstrates a \u003Cstrong>complete dynamic component conversion capability\u003C/strong>:\u003C/p>\n\n\u003Col>\n\u003Cli>\n\u003Cstrong>Dynamic component rendering\u003C/strong>: Converts \u003Ccode><component :is>\u003C/code> to \u003Ccode><Component is>\u003C/code>\n\u003C/li>\n\u003Cli>\n\u003Cstrong>DOM limitation resolution\u003C/strong>: Directly replaces \u003Ccode>is=\"vue:component-name\"\u003C/code> with the component\u003C/li>\n\u003Cli>\n\u003Cstrong>Props passing\u003C/strong>: Correctly handles props passing for dynamic components\u003C/li>\n\u003Cli>\n\u003Cstrong>Component caching\u003C/strong>: Supports \u003Ccode><KeepAlive>\u003C/code> component caching\u003C/li>\n\u003Cli>\n\u003Cstrong>Animation support\u003C/strong>: Supports \u003Ccode><Transition>\u003C/code> component animations\u003C/li>\n\u003C/ol>\n\n\u003Cp>\u003Cstrong>Difference between \u003Ccode>is\u003C/code> and \u003Ccode>:is\u003C/code>\u003C/strong>:\u003C/p>\n\n\u003Cdiv class=\"table-wrapper-paragraph\">\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>Feature\u003C/th>\n\u003Cth>\n\u003Ccode>is\u003C/code> attribute\u003C/th>\n\u003Cth>\n\u003Ccode>:is\u003C/code> attribute\u003C/th>\n\u003C/tr>\n\u003C/thead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>\u003Cstrong>Purpose\u003C/strong>\u003C/td>\n\u003Ctd>Resolves in-DOM template limitations\u003C/td>\n\u003Ctd>Dynamically switches components\u003C/td>\n\u003C/tr>\n\u003Ctr>\n\u003Ctd>\u003Cstrong>Syntax\u003C/strong>\u003C/td>\n\u003Ctd>\u003Ccode>is=\"vue:component-name\"\u003C/code>\u003C/td>\n\u003Ctd>\u003Ccode>:is=\"componentName\"\u003C/code>\u003C/td>\n\u003C/tr>\n\u003Ctr>\n\u003Ctd>\u003Cstrong>Element\u003C/strong>\u003C/td>\n\u003Ctd>Used inside specific HTML elements\u003C/td>\n\u003Ctd>Used with \u003Ccode><component>\u003C/code> element\u003C/td>\n\u003C/tr>\n\u003Ctr>\n\u003Ctd>\u003Cstrong>Compilation result\u003C/strong>\u003C/td>\n\u003Ctd>Directly replaced with component\u003C/td>\n\u003Ctd>Uses \u003Ccode><Component is={...}>\u003C/code>\n\u003C/td>\n\u003C/tr>\n\u003C/tbody>\n\u003C/table>\u003C/div>\n\n\u003Cp>VuReact's compilation strategy ensures a smooth migration from Vue to React. Developers do not need to manually rewrite dynamic component logic. The compiled code preserves Vue's semantics and flexibility while following React's component rendering patterns, keeping the migrated application fully capable of dynamic component switching.\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/is.html\" target=\"_blank\" rel=\"noopener noreferrer\">https://vureact.top/en/guide/semantic-comparison/template/is.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 for migrating from Vue to React — and for writing React with Vue syntax. In this article, we dive straight into the core: how Vue's common `is` and `:is` attributes 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 the usage and use cases of Vue 3's `is` attribute.\n\n## Compilation Mapping\n\n### Dynamic components: `:is` attribute\n\nThe `:is` attribute is used for dynamically rendering components. It allows you to decide which component to render based on data at runtime.\n\n#### Basic dynamic components\n\n- Vue\n\n```html\n\u003Ccomponent :is=\"currentComponent\" />\n```\n\n- Compiled React\n\n```jsx\nimport { Component } from '@vureact/runtime-core';\n\n\u003CComponent is={currentComponent} />\n```\n\nAs the example shows, Vue's `:is` attribute is compiled into the `is` prop of the [Component](https://runtime.vureact.top/en/guide/components/dynamic-components.html) **adapter component** — think of it as \"Vue's dynamic component for React\".\n\nThe key characteristics of this compilation approach are:\n\n1. **Semantic consistency**: Fully simulates Vue's dynamic component behavior by implementing component switching\n2. **Component mapping**: Converts Vue's `\u003Ccomponent>` element into VuReact Runtime's `\u003CComponent>` component\n3. **Attribute passing**: Preserves the dynamic binding capability of the `is` attribute\n\n---\n\n### Dynamic components with props\n\nDynamic components often need props passed to them, and VuReact handles this correctly.\n\n- Vue\n\n```html\n\u003Ccomponent \n  :is=\"currentView\" \n  :title=\"pageTitle\" \n  :data=\"pageData\"\n  @custom-event=\"handleCustom\"\n/>\n```\n\n- Compiled React\n\n```jsx\n\u003CComponent \n  is={currentView}\n  title={pageTitle}\n  data={pageData}\n  onCustomEvent={handleCustom}\n/>\n```\n\n**Props passing rules**:\n\n1. **Attribute mapping**: Converts Vue attributes to React props\n2. **Event conversion**: Converts Vue events to React event props\n3. **Type preservation**: Keeps the type definition integrity of props\n4. **Default value handling**: Correctly handles component default props\n\n---\n\n### Resolving DOM template limitations: `is` attribute\n\nThe `is` attribute is used to resolve in-DOM template parsing limitations, primarily for correctly rendering components inside elements like `\u003Ctable>`, `\u003Cul>`, `\u003Col>`, `\u003Cselect>`, etc.\n\n#### Using `is` in tables\n\n- Vue\n\n```html\n\u003Ctable>\n  \u003Ctr is=\"vue:user-row\">\u003C/tr>\n\u003C/table>\n```\n\n- Compiled React\n\n```jsx\n\u003Ctable>\n  \u003CUserRow />\n\u003C/table>\n```\n\n**Compilation strategy**:\n\n1. **Component replacement**: Replaces `is=\"vue:user-row\"` with `\u003CUserRow />`\n2. **Vue prefix handling**: Automatically removes the `vue:` prefix\n3. **HTML structure preservation**: Maintains correct HTML element nesting structure\n\n#### Using `is` in lists\n\n- Vue\n\n```html\n\u003Cul>\n  \u003Cli is=\"vue:todo-item\">\u003C/li>\n\u003C/ul>\n```\n\n- Compiled React\n\n```jsx\n\u003Cul>\n  \u003CTodoItem />\n\u003C/ul>\n```\n\n---\n\n### Dynamic components with v-bind\n\nDynamic components are often used together with `v-bind` for more flexible component configuration.\n\n- Vue\n\n```html\n\u003Ccomponent \n  :is=\"componentType\" \n  v-bind=\"componentProps\"\n/>\n```\n\n- Compiled React\n\n```jsx\nimport { dir } from '@vureact/runtime-core';\n\n\u003CComponent \n  is={componentType}\n  {...dir.keyless(componentProps)}\n/>\n```\n\n**Object spread handling**:\n\n1. **Attribute merging**: Correctly handles merging of `v-bind` objects with explicit attributes\n2. **Conflict resolution**: Handles attribute name conflicts\n3. **Special attribute conversion**: Automatically converts special attributes like `class`, `style`, etc.\n\n---\n\n### Compilation strategy summary\n\nVuReact's `is`/`:is` compilation strategy demonstrates a **complete dynamic component conversion capability**:\n\n1. **Dynamic component rendering**: Converts `\u003Ccomponent :is>` to `\u003CComponent is>`\n2. **DOM limitation resolution**: Directly replaces `is=\"vue:component-name\"` with the component\n3. **Props passing**: Correctly handles props passing for dynamic components\n4. **Component caching**: Supports `\u003CKeepAlive>` component caching\n5. **Animation support**: Supports `\u003CTransition>` component animations\n\n**Difference between `is` and `:is`**:\n\n| Feature | `is` attribute | `:is` attribute |\n|---------|---------------|-----------------|\n| **Purpose** | Resolves in-DOM template limitations | Dynamically switches components |\n| **Syntax** | `is=\"vue:component-name\"` | `:is=\"componentName\"` |\n| **Element** | Used inside specific HTML elements | Used with `\u003Ccomponent>` element |\n| **Compilation result** | Directly replaced with component | Uses `\u003CComponent is={...}>` |\n\nVuReact's compilation strategy ensures a smooth migration from Vue to React. Developers do not need to manually rewrite dynamic component logic. The compiled code preserves Vue's semantics and flexibility while following React's component rendering patterns, keeping the migrated application fully capable of dynamic component switching.\n\n## Related Links\n\n- Docs: \u003Chttps://vureact.top/en/guide/semantic-comparison/template/is.html>\n- GitHub: \u003Chttps://github.com/vureact-js/core>\n",{"name":31,"username":32,"twitter_username":13,"github_username":32,"user_id":33,"website_url":34,"profile_image":35,"profile_image_90":36},"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",1780059467484]