From 8787f462057ed73a6f5e3738ee7d3f5128d40e9a Mon Sep 17 00:00:00 2001
From: phonedu <135960865+phonedu@users.noreply.github.com>
Date: Fri, 16 Oct 2026 16:59:59 +0800
Subject: [PATCH 1/8] M6: a Vue code target (single-file components)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Dev Mode generates React, Leptos, SwiftUI and Compose; a Vue project had to translate the HTML
instead. `inspect.code {language: "vue"}` now writes a single-file component: a `<template>`, a
`<script setup>` with `defineProps` and its defaults, and a `<style scoped>`.

A Vue template holds no arbitrary expressions, so what the web targets write as a braced
expression has its own spelling. Text is `{{ prop }}`, and braces in text are escaped; a boolean
property's layer carries `v-if="prop"` rather than a wrapper element; a slot becomes Vue's own
`<slot name="…">` with its fallback content, which takes no prop, and an instance's content in one
is a `<template #name>`. Variants switch on the root's `data-*` attributes, as on the web.

`codeConnect` links a component to its code as a single-file component: a default import, and a
quoted binding, so `:size={size}` gives `:size="Large"` and a component swap passes the component
itself. A value that needs escapes keeps them inside the quotes, where the attribute's own quotes
become `&quot;`.

`inspect.componentCode` kept a second copy of the code-language list, which is how Vue was missed
when `inspect.code` learned it; it now asks `code_connect::language`, the one list, as
`codeConnect` does.

Eleven tests in `vue_codegen_tests` and a `codeConnect` case; the Inspect panel's language picker
picks Vue up from `CodeLang::ALL`, and the language lists in the docs, the Dev Mode hint and its
thirteen catalogs name it.
---
 README.md                               |   2 +-
 crates/engine/src/code_connect.rs       |  36 +++--
 crates/engine/src/code_connect_tests.rs |  35 +++++
 crates/engine/src/codegen.rs            |  75 ++++++++--
 crates/engine/src/component_codegen.rs  |  91 ++++++++++--
 crates/engine/src/lib.rs                |   2 +
 crates/engine/src/playground.rs         |   4 +-
 crates/engine/src/vue_codegen_tests.rs  | 184 ++++++++++++++++++++++++
 crates/ui-egui/locales/cs.toml          |   2 +-
 crates/ui-egui/locales/de.toml          |   2 +-
 crates/ui-egui/locales/en.toml          |   2 +-
 crates/ui-egui/locales/es.toml          |   2 +-
 crates/ui-egui/locales/fr.toml          |   2 +-
 crates/ui-egui/locales/id.toml          |   2 +-
 crates/ui-egui/locales/ja.toml          |   2 +-
 crates/ui-egui/locales/ko.toml          |   2 +-
 crates/ui-egui/locales/pt-BR.toml       |   2 +-
 crates/ui-egui/locales/ru.toml          |   2 +-
 crates/ui-egui/locales/sv.toml          |   2 +-
 crates/ui-egui/locales/tr.toml          |   2 +-
 crates/ui-egui/locales/zh-Hans.toml     |   2 +-
 crates/ui-egui/src/dev_mode.rs          |   2 +-
 docs/dev-mode-parity.md                 |   4 +-
 docs/file-format-parity.md              |   2 +-
 docs/gaps.md                            |   2 +-
 docs/mcp.md                             |  29 ++--
 docs/target-app-parity.md               |   2 +-
 27 files changed, 431 insertions(+), 65 deletions(-)
 create mode 100644 crates/engine/src/vue_codegen_tests.rs

diff --git a/README.md b/README.md
index ae4c9f24..b858b5c0 100644
--- a/README.md
+++ b/README.md
@@ -191,7 +191,7 @@ exposes to agents, and exported at 2x by FigCraft's own renderer. The source fil
     </td>
     <td width="50%" valign="top">
       <h3>Prototype and hand off</h3>
-      Connections, triggers, actions and Smart Animate-style transitions, variables with conditionals (if / else if / else built in the interaction editor, expressions like <code>count + 1</code>), flows, a presentation view with device frames, hotspot hints and an Inspect panel, and a live preview pane. Alt to measure distances and padding on the canvas, Inspect mode with measurements, annotations in colour-coded categories, a ready-for-dev list with a focus view and Compare changes (before / after with property-level diffs since a frame was marked ready), and code (CSS, HTML, React, Leptos, SwiftUI, Compose) where components take their properties as parameters, comment threads pinned to frames (replies, @mentions, reactions, read state) and named version history. Export any layer at any scale to PNG, JPG, WebP, SVG or PDF.
+      Connections, triggers, actions and Smart Animate-style transitions, variables with conditionals (if / else if / else built in the interaction editor, expressions like <code>count + 1</code>), flows, a presentation view with device frames, hotspot hints and an Inspect panel, and a live preview pane. Alt to measure distances and padding on the canvas, Inspect mode with measurements, annotations in colour-coded categories, a ready-for-dev list with a focus view and Compare changes (before / after with property-level diffs since a frame was marked ready), and code (CSS, HTML, React, Vue, Leptos, SwiftUI, Compose) where components take their properties as parameters, comment threads pinned to frames (replies, @mentions, reactions, read state) and named version history. Export any layer at any scale to PNG, JPG, WebP, SVG or PDF.
     </td>
   </tr>
 </table>
diff --git a/crates/engine/src/code_connect.rs b/crates/engine/src/code_connect.rs
index 46340636..edbae279 100644
--- a/crates/engine/src/code_connect.rs
+++ b/crates/engine/src/code_connect.rs
@@ -37,7 +37,7 @@ const MAX_WARNINGS: usize = 50;
 
 /// The languages a component can be connected in.
 pub fn language(s: &str) -> Option<CodeLang> {
-    CodeLang::from_id(s).filter(|l| matches!(l, CodeLang::React | CodeLang::Leptos | CodeLang::SwiftUi | CodeLang::Compose))
+    CodeLang::from_id(s).filter(|l| matches!(l, CodeLang::React | CodeLang::Leptos | CodeLang::Vue | CodeLang::SwiftUi | CodeLang::Compose))
 }
 
 /// The layer `id`'s links are stored on: its component set, else its component (an instance's
@@ -66,6 +66,8 @@ pub fn import_line(link: &CodeLink, lang: CodeLang) -> String {
         _ if path.is_empty() => String::new(),
         CodeLang::React => format!("import {{ {} }} from {};", link.name.split('.').next().unwrap_or_default(), js_string(path)),
         CodeLang::Leptos => format!("use {path}::{};", link.name.split('.').next().unwrap_or_default()),
+        // A single-file component is a default export.
+        CodeLang::Vue => format!("import {} from {};", link.name.split('.').next().unwrap_or_default(), js_string(path)),
         _ => format!("import {path}"),
     }
 }
@@ -174,6 +176,8 @@ fn expr(doc: &Document, c: &Component, p: &Param, v: &Value, lang: CodeLang) ->
     match (swapped, lang) {
         (Some(l), CodeLang::React) => format!("<{} />", l.name),
         (Some(l), CodeLang::Leptos) => format!("|| view! {{ <{} /> }}", l.name),
+        // A Vue binding takes the component itself.
+        (Some(l), CodeLang::Vue) => l.name.clone(),
         (Some(l), CodeLang::SwiftUi) => format!("{}()", l.name),
         (Some(l), _) => format!("{{ {}() }}", l.name),
         (None, _) => value_expr(doc, c, p, v, lang),
@@ -195,11 +199,24 @@ pub(crate) fn render(doc: &Document, c: &Component, values: &[(String, Value)],
                     let e = expr(doc, c, p, v, lang);
                     // JSX and `view!`: a plain string reads best as an attribute value, anything
                     // else is an expression in braces (JSX attribute strings have no escapes).
-                    let markup = matches!(lang, CodeLang::React | CodeLang::Leptos);
-                    if !markup || (out.ends_with('=') && e.starts_with('"') && !e.contains('\\')) {
-                        out.push_str(&e);
+                    // A Vue binding takes a quoted value. A plain string literal brings its own
+                    // quotes; the template's own quote, when it wrote one, ends it; anything else
+                    // is wrapped here, and a quote inside is escaped for the attribute.
+                    if lang == CodeLang::Vue {
+                        if !out.ends_with('"') && e.starts_with('"') && !e.contains('\\') {
+                            out.push_str(&e);
+                        } else if out.ends_with('"') {
+                            out.push_str(&e.replace('"', "&quot;"));
+                        } else {
+                            out.push_str(&format!("\"{}\"", e.replace('"', "&quot;")));
+                        }
                     } else {
-                        out.push_str(&format!("{{{e}}}"));
+                        let markup = matches!(lang, CodeLang::React | CodeLang::Leptos);
+                        if !markup || (out.ends_with('=') && e.starts_with('"') && !e.contains('\\')) {
+                            out.push_str(&e);
+                        } else {
+                            out.push_str(&format!("{{{e}}}"));
+                        }
                     }
                 }
                 None => out.push_str(&format!("{{{inner}}}")),
@@ -221,6 +238,7 @@ fn default_template(c: &Component, lang: CodeLang, name: &str) -> String {
         CodeLang::Leptos => {
             format!("<{name}{} />", params.iter().map(|p| format!(" {}={{{p}}}", crate::component_codegen::rust_ident(p))).collect::<String>())
         }
+        CodeLang::Vue => format!("<{name}{} />", params.iter().map(|p| format!(" :{p}={{{p}}}")).collect::<String>()),
         CodeLang::SwiftUi => format!("{name}({})", params.iter().map(|p| format!("{p}: {{{p}}}")).collect::<Vec<_>>().join(", ")),
         _ => format!("{name}({})", params.iter().map(|p| format!("{p} = {{{p}}}")).collect::<Vec<_>>().join(", ")),
     }
@@ -241,12 +259,14 @@ pub fn check(c: &Component, link: &CodeLink, lang: CodeLang) -> std::result::Res
     let path_ok = match lang {
         CodeLang::React => !path.chars().any(|ch| ch.is_control() || ch == '"' || ch == '\\'),
         CodeLang::Leptos => path.chars().all(|ch| ch.is_ascii_alphanumeric() || ch == '_' || ch == ':'),
+        CodeLang::Vue => path.chars().all(|ch| ch.is_ascii_alphanumeric() || "_./@-".contains(ch)),
         _ => path.chars().all(|ch| ch.is_ascii_alphanumeric() || ch == '_' || ch == '.'),
     };
     if path.chars().count() > MAX_IMPORT || !path_ok {
         return Err(match lang {
             CodeLang::React => format!("importPath: a module path without quotes, up to {MAX_IMPORT} characters"),
             CodeLang::Leptos => format!("importPath: a Rust module path (letters, digits, _ and ::), up to {MAX_IMPORT} characters"),
+            CodeLang::Vue => format!("importPath: a module path (letters, digits, _ . / @ and -), up to {MAX_IMPORT} characters"),
             _ => format!("importPath: a module or package name (letters, digits, _ and .), up to {MAX_IMPORT} characters"),
         });
     }
@@ -282,7 +302,7 @@ fn text(cmd: &str, p: &Value, key: &str) -> Result<Option<String>> {
 /// The `language` parameter (default React).
 fn lang_param(cmd: &str, p: &Value) -> Result<CodeLang> {
     match text(cmd, p, "language")? {
-        Some(l) => language(&l).ok_or_else(|| bad(cmd, "language: react|leptos|swiftui|compose")),
+        Some(l) => language(&l).ok_or_else(|| bad(cmd, "language: react|leptos|vue|swiftui|compose")),
         None => Ok(CodeLang::React),
     }
 }
@@ -312,7 +332,7 @@ pub fn specs() -> Vec<CommandSpec> {
         spec!(
             "codeConnect.set",
             "Connect to code",
-            "{id? (component, set or instance; default the selection), language?: react|leptos|swiftui|compose (default react), importPath?, name? (default the generated name), template? (default a call passing every property)}  links the component (its set, for a variant) to its code component; fields left out keep their current value. Placeholders: {property} (its name or parameter name) and {property ? \"a\" : \"b\"}; other {…} stay as written  → {component, language, code (the snippet for the layer), unknown (placeholder names that aren't properties)}",
+            "{id? (component, set or instance; default the selection), language?: react|leptos|vue|swiftui|compose (default react), importPath?, name? (default the generated name), template? (default a call passing every property)}  links the component (its set, for a variant) to its code component; fields left out keep their current value. Placeholders: {property} (its name or parameter name) and {property ? \"a\" : \"b\"}; other {…} stay as written  → {component, language, code (the snippet for the layer), unknown (placeholder names that aren't properties)}",
             true,
             |s, p| {
                 let cmd = "codeConnect.set";
@@ -427,7 +447,7 @@ fn import(s: &mut Session, p: &Value) -> Result<Value> {
         let (Some(component), Some(lang), Some(name), Some(template)) =
             (field("component"), field("language").and_then(language), field("name"), e.get("template").and_then(Value::as_str))
         else {
-            warnings.push(format!("link {}: needs component, language (react|leptos|swiftui|compose), name and template strings", i + 1));
+            warnings.push(format!("link {}: needs component, language (react|leptos|vue|swiftui|compose), name and template strings", i + 1));
             continue;
         };
         let link = CodeLink {
diff --git a/crates/engine/src/code_connect_tests.rs b/crates/engine/src/code_connect_tests.rs
index 9d657d5f..eb34656b 100644
--- a/crates/engine/src/code_connect_tests.rs
+++ b/crates/engine/src/code_connect_tests.rs
@@ -183,3 +183,38 @@ fn code_connect_commands_survive_junk() {
         }
     }
 }
+
+#[test]
+fn vue_links_are_a_default_import_with_quoted_bindings() {
+    let mut s = Session::new();
+    let c = card(&mut s);
+    let i = idv(&ex(&mut s, "instance.create", json!({"component": c, "x": 300, "y": 0})));
+    ex(&mut s, "instance.setProperties", json!({"ids": [i], "properties": {"Show dot": false, "Title": "Buy"}}));
+    // A single-file component is a default import, and a binding's value is quoted (the template
+    // writes `:prop={prop}`, so a plain string brings its own quotes).
+    let v = ex(
+        &mut s,
+        "codeConnect.set",
+        json!({"id": i, "language": "vue", "importPath": "@/components/Card.vue",
+               "template": "<Card :title={title} :dotted={Show dot} />"}),
+    );
+    let want = "import Card from \"@/components/Card.vue\";\n\n<Card :title=\"Buy\" :dotted=\"false\" />\n";
+    assert_eq!(v["code"], want);
+    assert_eq!(code(&mut s, i, "vue"), want);
+    assert_eq!(ex(&mut s, "inspect.code", json!({"id": i, "language": "vue"}))["connected"], true);
+    // No template given: the generated one binds a quoted value for every property.
+    ex(&mut s, "codeConnect.remove", json!({"id": c, "language": "vue"}));
+    ex(&mut s, "codeConnect.set", json!({"id": c, "language": "vue", "importPath": "./Card.vue"}));
+    assert_eq!(code(&mut s, c, "vue"), "import Card from \"./Card.vue\";\n\n<Card :showDot=\"true\" :title=\"Hello\" />\n");
+    // A string with escapes stays one value: the attribute delimiter is what gets escaped, so the
+    // binding stays a single well-formed attribute.
+    ex(&mut s, "instance.setProperties", json!({"ids": [i], "properties": {"Title": "Say \"hi\""}}));
+    let escaped = code(&mut s, i, "vue");
+    let line = escaped.lines().find(|l| l.contains("&quot;")).unwrap_or_default();
+    assert!(line.starts_with("<Card :showDot=\"false\""), "{line}");
+    assert!(line.contains(":title=\"&quot;Say"), "{line}");
+    assert!(line.ends_with("\" />"), "{line}");
+    // Vue is linkable; a language that isn't stays refused.
+    assert!(s.execute("codeConnect.set", &json!({"id": c, "language": "css"})).is_err(), "not a code language");
+    assert!(s.execute("codeConnect.set", &json!({"id": c, "language": "vue", "importPath": "a b"})).is_err(), "no spaces in a path");
+}
diff --git a/crates/engine/src/codegen.rs b/crates/engine/src/codegen.rs
index 0871f886..618d430a 100644
--- a/crates/engine/src/codegen.rs
+++ b/crates/engine/src/codegen.rs
@@ -18,13 +18,13 @@ pub fn specs() -> Vec<CommandSpec> {
     vec![spec!(
         "inspect.code",
         "Code for layer",
-        "{id?, language?: css|html|react|leptos|swiftui|compose (default css; html, react and leptos are the whole layer tree; components take their properties as parameters, instances pass their values; a component connected to code (codeConnect.set) gives its import and snippet instead), unit?: px|rem (CSS, HTML, React and Leptos; default px), rootFontSize? (rem: pixels per rem, default 16)} → {code, language, connected}",
+        "{id?, language?: css|html|react|leptos|vue|swiftui|compose (default css; html, react, leptos and vue are the whole layer tree; components take their properties as parameters, instances pass their values; a component connected to code (codeConnect.set) gives its import and snippet instead), unit?: px|rem (CSS, HTML, React, Leptos and Vue; default px), rootFontSize? (rem: pixels per rem, default 16)} → {code, language, connected}",
         false,
         |s, p| {
             let cmd = "inspect.code";
             let id = targets(s, p).first().copied().ok_or_else(|| bad(cmd, "select a layer"))?;
             let lang = match string(p, "language") {
-                Some(l) => CodeLang::from_id(&l).ok_or_else(|| bad(cmd, "language: css|html|react|leptos|swiftui|compose"))?,
+                Some(l) => CodeLang::from_id(&l).ok_or_else(|| bad(cmd, "language: css|html|react|leptos|vue|swiftui|compose"))?,
                 None => CodeLang::Css,
             };
             let rem = match string(p, "unit").map(|u| u.to_ascii_lowercase()).as_deref() {
@@ -61,18 +61,22 @@ pub enum CodeLang {
     React,
     /// A Leptos component (`view!` markup) with its stylesheet.
     Leptos,
+    /// A Vue single-file component (`<template>`, `<script setup>`, `<style scoped>`).
+    Vue,
     SwiftUi,
     Compose,
 }
 
 impl CodeLang {
-    pub const ALL: [CodeLang; 6] = [CodeLang::Css, CodeLang::Html, CodeLang::React, CodeLang::Leptos, CodeLang::SwiftUi, CodeLang::Compose];
+    pub const ALL: [CodeLang; 7] =
+        [CodeLang::Css, CodeLang::Html, CodeLang::React, CodeLang::Leptos, CodeLang::Vue, CodeLang::SwiftUi, CodeLang::Compose];
     pub fn id(self) -> &'static str {
         match self {
             CodeLang::Css => "css",
             CodeLang::Html => "html",
             CodeLang::React => "react",
             CodeLang::Leptos => "leptos",
+            CodeLang::Vue => "vue",
             CodeLang::SwiftUi => "swiftui",
             CodeLang::Compose => "compose",
         }
@@ -83,18 +87,22 @@ impl CodeLang {
             CodeLang::Html => "HTML + CSS",
             CodeLang::React => "React",
             CodeLang::Leptos => "Leptos",
+            CodeLang::Vue => "Vue",
             CodeLang::SwiftUi => "SwiftUI",
             CodeLang::Compose => "Compose",
         }
     }
     /// Languages whose lengths are CSS pixels (they can be shown in rem).
     pub fn is_web(self) -> bool {
-        matches!(self, CodeLang::Css | CodeLang::Html | CodeLang::React | CodeLang::Leptos)
+        matches!(self, CodeLang::Css | CodeLang::Html | CodeLang::React | CodeLang::Leptos | CodeLang::Vue)
     }
     pub fn from_id(s: &str) -> Option<CodeLang> {
         if s.eq_ignore_ascii_case("tsx") || s.eq_ignore_ascii_case("jsx") {
             return Some(CodeLang::React);
         }
+        if s.eq_ignore_ascii_case("sfc") || s.eq_ignore_ascii_case("vue3") {
+            return Some(CodeLang::Vue);
+        }
         CodeLang::ALL.into_iter().find(|l| l.id().eq_ignore_ascii_case(s) || l.label().eq_ignore_ascii_case(s))
     }
 }
@@ -194,7 +202,7 @@ pub fn code_for(doc: &Document, id: NodeId, lang: CodeLang) -> String {
     match lang {
         CodeLang::Css => css(doc, id),
         CodeLang::Html => html(doc, id),
-        CodeLang::React | CodeLang::Leptos | CodeLang::SwiftUi | CodeLang::Compose => crate::component_codegen::code(doc, id, lang),
+        CodeLang::React | CodeLang::Leptos | CodeLang::Vue | CodeLang::SwiftUi | CodeLang::Compose => crate::component_codegen::code(doc, id, lang),
     }
 }
 
@@ -642,12 +650,13 @@ fn html(doc: &Document, id: NodeId) -> String {
     format!("{}\n<style>\n{}{}</style>\n", out.markup, out.tokens.root_rule(), out.styles)
 }
 
-/// Markup being built for a layer tree: HTML (`class`), React JSX (`className`) or Leptos `view!`
-/// markup (text as Rust string literals); the last two with component parameters and instances
-/// as calls. With its stylesheet.
+/// Markup being built for a layer tree: HTML (`class`), React JSX (`className`), Vue
+/// (`{{ }}` interpolation, `v-if`, `:attr` bindings) or Leptos `view!` markup (text as Rust
+/// string literals); the last three with component parameters and instances as calls. With its
+/// stylesheet.
 pub(crate) struct Markup<'c, 'a> {
     ctx: &'c Ctx<'a>,
-    /// Html, React or Leptos.
+    /// Html, React, Vue or Leptos.
     lang: CodeLang,
     used: Vec<String>,
     pub markup: String,
@@ -656,6 +665,9 @@ pub(crate) struct Markup<'c, 'a> {
     /// The root's class (default: from its name) and extra JSX attributes.
     pub root_class: Option<String>,
     pub root_attrs: String,
+    /// A Vue `v-if` guard for the element about to be written: Vue templates can't wrap an
+    /// element in an expression, so a boolean parameter's layer carries the condition itself.
+    v_if: Option<String>,
     /// Each layer's path in the tree (names with sibling counts), class and declarations, so
     /// variants can be compared layer by layer.
     pub rules: Vec<(String, String, String)>,
@@ -672,13 +684,14 @@ impl<'c, 'a> Markup<'c, 'a> {
             tokens: Tokens::default(),
             root_class: None,
             root_attrs: String::new(),
+            v_if: None,
             rules: Vec::new(),
         }
     }
 
-    /// JSX indents by two spaces, HTML and Leptos by four.
+    /// JSX and Vue templates indent by two spaces, HTML and Leptos by four.
     fn pad(&self, depth: usize) -> String {
-        if self.lang == CodeLang::React { "  ".repeat(depth) } else { indent(depth) }
+        if matches!(self.lang, CodeLang::React | CodeLang::Vue) { "  ".repeat(depth) } else { indent(depth) }
     }
 
     /// Component code (React or Leptos): parameters and instances as calls.
@@ -698,6 +711,13 @@ impl<'c, 'a> Markup<'c, 'a> {
             && id != self.ctx.root
             && let Some(p) = self.ctx.param(n, "visible")
         {
+            // A Vue template holds no arbitrary expressions, so the guard rides on the element.
+            if self.lang == CodeLang::Vue {
+                self.v_if = Some(self.ident(p));
+                self.element(n, parent, depth, path);
+                self.v_if = None;
+                return;
+            }
             let (pad, p) = (self.pad(depth), self.ident(p));
             let (open, close) =
                 if self.lang == CodeLang::Leptos { (format!("{{{p}.then(|| view! {{"), "})}") } else { (format!("{{{p} && ("), ")}") };
@@ -779,18 +799,27 @@ impl<'c, 'a> Markup<'c, 'a> {
         }
         decls.push_str(&own);
         self.rule(path, &class, decls);
-        let attrs = if root { self.root_attrs.clone() } else { String::new() };
+        // The root's variant attributes, and a Vue `v-if` guard, ride on the open tag.
+        let mut attrs = if root { self.root_attrs.clone() } else { String::new() };
+        if self.lang == CodeLang::Vue
+            && let Some(guard) = self.v_if.take()
+        {
+            attrs.push_str(&format!(" v-if=\"{guard}\""));
+        }
         let open = |tag: &str| format!("{pad}<{tag} {attr}=\"{class}\"{attrs}>");
         match &n.kind {
             NodeKind::Text(t) => {
                 let body = match (self.ctx.param(n, "characters").filter(|_| self.code()), self.lang) {
                     (Some(p), CodeLang::Leptos) => format!("{{{}.clone()}}", self.ident(p)),
+                    (Some(p), CodeLang::Vue) => format!("{{{{ {} }}}}", self.ident(p)),
                     (Some(p), _) => format!("{{{}}}", p.ident),
                     (None, CodeLang::React) => jsx_text(&t.characters),
                     // `view!` takes text as string literals and void elements self-closed.
                     (None, CodeLang::Leptos) => {
                         t.characters.chars().take(10_000).collect::<String>().lines().map(|l| format!("{l:?}")).collect::<Vec<_>>().join("<br/>")
                     }
+                    // A Vue template reads `{{ }}` as interpolation, so braces are escaped.
+                    (None, CodeLang::Vue) => html_escape(&t.characters).replace('{', "&#123;").replace('}', "&#125;"),
                     (None, _) => html_escape(&t.characters),
                 };
                 self.markup.push_str(&format!("{}{body}</p>\n", open("p")));
@@ -798,11 +827,23 @@ impl<'c, 'a> Markup<'c, 'a> {
             _ => {
                 let kids = self.ctx.kids(n);
                 let slot = self.ctx.param(n, "slot").filter(|_| self.code());
+                let vue = self.lang == CodeLang::Vue;
                 let leptos = self.lang == CodeLang::Leptos;
                 let open = open("div");
+                let slot_ident = slot.map(|p| class_name(&p.ident, &mut Vec::new()));
                 if let Some(p) = slot.filter(|_| kids.is_empty()) {
-                    let content = if leptos { format!("{}.as_ref().map(|c| c.run())", self.ident(p)) } else { p.ident.clone() };
-                    self.markup.push_str(&format!("{open}{{{content}}}</div>\n"));
+                    let content = if leptos {
+                        format!("{{{}}}.as_ref().map(|c| c.run())", self.ident(p))
+                    } else if vue {
+                        // Vue's own slot element, named so an instance's content lands in the right one.
+                        match slot_ident.clone() {
+                            Some(name) => format!("<slot name=\"{name}\" />"),
+                            None => "<slot />".into(),
+                        }
+                    } else {
+                        format!("{{{}}}", p.ident)
+                    };
+                    self.markup.push_str(&format!("{open}{content}</div>\n"));
                 } else if kids.is_empty() || self.ctx.too_deep(depth) {
                     self.markup.push_str(&format!("{open}</div>\n"));
                 } else {
@@ -810,6 +851,11 @@ impl<'c, 'a> Markup<'c, 'a> {
                     // A slot shows the instance's content, or else the main's.
                     let (p1, p2) = (self.pad(depth + 1), self.pad(depth + 2));
                     let inner = match slot {
+                        Some(_) if vue => {
+                            let name = slot_ident.clone().map(|n| format!(" name=\"{n}\"")).unwrap_or_default();
+                            self.markup.push_str(&format!("{p1}<slot{name}>\n"));
+                            depth + 2
+                        }
                         Some(p) if leptos => {
                             self.markup.push_str(&format!("{p1}{{match &{} {{ Some(c) => c.run(), None => view! {{\n", self.ident(p)));
                             depth + 2
@@ -829,6 +875,7 @@ impl<'c, 'a> Markup<'c, 'a> {
                         self.node(k, Some(n), inner, &format!("{path}/{}#{count}", kn.name));
                     }
                     match slot {
+                        Some(_) if vue => self.markup.push_str(&format!("{p1}</slot>\n")),
                         Some(_) if leptos => self.markup.push_str(&format!("{p1}}}.into_any() }}}}\n")),
                         Some(_) => self.markup.push_str(&format!("{p2}</>\n{p1})}}\n")),
                         None => {}
diff --git a/crates/engine/src/component_codegen.rs b/crates/engine/src/component_codegen.rs
index 1416b15f..8e568313 100644
--- a/crates/engine/src/component_codegen.rs
+++ b/crates/engine/src/component_codegen.rs
@@ -1,4 +1,4 @@
-//! Component code: a component (or component set) becomes a React, Leptos, SwiftUI or Jetpack
+//! Component code: a component (or component set) becomes a React, Leptos, Vue, SwiftUI or Jetpack
 //! Compose component whose properties are its parameters (a variant property → a union or enum, boolean →
 //! a flag showing the layers bound to it, text → a string, instance swap → a view parameter, slot →
 //! optional content), and an instance becomes a call passing the values it sets. Variants of a set
@@ -67,14 +67,14 @@ pub fn specs() -> Vec<CommandSpec> {
     vec![spec!(
         "inspect.componentCode",
         "Component code",
-        "{id? (component, set or instance; default the selection), language?: react|leptos|swiftui|compose (default react)} → {component, name, set, properties: [{name, param, type, default, value? (instances)}], definition, usage? (instances; the connected snippet when the component is connected to code), connected: {importPath, name, template, import, code} | null}",
+        "{id? (component, set or instance; default the selection), language?: react|leptos|vue|swiftui|compose (default react)} → {component, name, set, properties: [{name, param, type, default, value? (instances)}], definition, usage? (instances; the connected snippet when the component is connected to code), connected: {importPath, name, template, import, code} | null}",
         false,
         |s, p| {
             let cmd = "inspect.componentCode";
             let id = targets(s, p).first().copied().ok_or_else(|| bad(cmd, "select a component or instance"))?;
-            let lang = match string(p, "language").map(|l| CodeLang::from_id(&l)) {
-                Some(Some(l @ (CodeLang::React | CodeLang::Leptos | CodeLang::SwiftUi | CodeLang::Compose))) => l,
-                Some(_) => return Err(bad(cmd, "language: react|leptos|swiftui|compose")),
+            let lang = match string(p, "language") {
+                // One list of code languages, shared with codeConnect (see `code_connect::language`).
+                Some(l) => crate::code_connect::language(&l).ok_or_else(|| bad(cmd, "language: react|leptos|vue|swiftui|compose"))?,
                 None => CodeLang::React,
             };
             let doc = s.doc()?;
@@ -107,7 +107,7 @@ pub fn specs() -> Vec<CommandSpec> {
     )]
 }
 
-/// Code for any layer in React, Leptos, SwiftUI or Compose: an instance's call and its component's
+/// Code for any layer in React, Leptos, Vue, SwiftUI or Compose: an instance's call and its component's
 /// definition, a component's (or set's) definition, or the layer tree (React and Leptos wrap it
 /// in a function component).
 pub fn code(doc: &Document, id: NodeId, lang: CodeLang) -> String {
@@ -120,9 +120,13 @@ pub fn code(doc: &Document, id: NodeId, lang: CodeLang) -> String {
         (NodeKind::Instance { .. }, Some(c)) => format!("{}\n{}", usage(doc, id, lang, 0).unwrap_or_default(), definition(doc, &c, lang)),
         (NodeKind::Component { .. } | NodeKind::ComponentSet { .. }, Some(c)) => definition(doc, &c, lang),
         _ => match lang {
-            CodeLang::React | CodeLang::Leptos => {
+            CodeLang::React | CodeLang::Leptos | CodeLang::Vue => {
                 let c = Component { comp: id, set: None, type_name: component_type_name(&n.name), params: Vec::new() };
-                if lang == CodeLang::Leptos { leptos(doc, &c) } else { react(doc, &c) }
+                match lang {
+                    CodeLang::Leptos => leptos(doc, &c),
+                    CodeLang::Vue => vue(doc, &c),
+                    _ => react(doc, &c),
+                }
             }
             CodeLang::SwiftUi => {
                 let mut out = String::new();
@@ -456,9 +460,11 @@ fn enum_name(c: &Component, p: &Param, swift: bool) -> String {
 
 /// `value` of a parameter as an expression in `lang`.
 pub(crate) fn value_expr(doc: &Document, c: &Component, p: &Param, value: &Value, lang: CodeLang) -> String {
+    // React and Vue both take JavaScript: strings, and variant values as plain strings.
+    let js = matches!(lang, CodeLang::React | CodeLang::Vue);
     match (&p.kind, lang) {
         (ParamKind::Boolean, _) => value.as_bool().unwrap_or(false).to_string(),
-        (ParamKind::Text, CodeLang::React) => js_string(value.as_str().unwrap_or("")),
+        (ParamKind::Text, CodeLang::React | CodeLang::Vue) => js_string(value.as_str().unwrap_or("")),
         (ParamKind::Text, CodeLang::Leptos) => rust_string(value.as_str().unwrap_or("")),
         (ParamKind::Variant(opts), CodeLang::Leptos) => {
             let i = opts.iter().position(|o| Some(o.as_str()) == value.as_str()).unwrap_or(0);
@@ -467,7 +473,7 @@ pub(crate) fn value_expr(doc: &Document, c: &Component, p: &Param, value: &Value
         (ParamKind::Text, l) => literal(value.as_str().unwrap_or(""), l == CodeLang::Compose),
         (ParamKind::Variant(opts), l) => {
             let v = value.as_str().unwrap_or("");
-            if l == CodeLang::React {
+            if js {
                 return js_string(v);
             }
             let swift = l == CodeLang::SwiftUi;
@@ -478,12 +484,12 @@ pub(crate) fn value_expr(doc: &Document, c: &Component, p: &Param, value: &Value
         (ParamKind::InstanceSwap, l) => {
             let t = id_of(value).and_then(|i| component_type(doc, i));
             match (t, l) {
-                (Some(t), CodeLang::React) => format!("<{t} />"),
+                (Some(t), _) if js => format!("<{t} />"),
                 (Some(t), CodeLang::Leptos) => format!("|| view! {{ <{} /> }}", rust_type(&t)),
                 (None, CodeLang::Leptos) => "|| ()".into(),
                 (Some(t), CodeLang::SwiftUi) => format!("AnyView({t}())"),
                 (Some(t), _) => format!("{{ {t}() }}"),
-                (None, CodeLang::React) => "null".into(),
+                (None, _) if js => "null".into(),
                 (None, CodeLang::SwiftUi) => "AnyView(EmptyView())".into(),
                 (None, _) => "{}".into(),
             }
@@ -560,6 +566,23 @@ pub fn usage(doc: &Document, id: NodeId, lang: CodeLang, depth: usize) -> Option
             let t = if leptos { rust_type(t) } else { t.clone() };
             format!("{pad}<{t}{attrs} />\n")
         }
+        CodeLang::Vue => {
+            // A plain string is an attribute value and anything else a `:name` binding, named as
+            // the definition declares the prop; a slot is a `<template #name>` child instead,
+            // named as its `<slot>` element is.
+            let is_slot = |name: &str| c.params.iter().any(|p| p.ident == name && matches!(p.kind, ParamKind::Slot));
+            let attrs: String = args
+                .iter()
+                .filter(|(name, _, _)| !is_slot(name))
+                .map(|(name, expr, plain)| if *plain { format!(" {name}={expr}") } else { format!(" :{name}=\"{expr}\"") })
+                .collect();
+            let slots: String = args
+                .iter()
+                .filter(|(name, _, _)| is_slot(name))
+                .map(|(name, expr, _)| format!("{pad}  <template #{}>\n{expr}{pad}  </template>\n", class_name(name, &mut Vec::new())))
+                .collect();
+            if slots.is_empty() { format!("{pad}<{t}{attrs} />\n") } else { format!("{pad}<{t}{attrs}>\n{slots}{pad}</{t}>\n") }
+        }
         CodeLang::SwiftUi => format!("{pad}{t}({})\n", args.iter().map(|(n, e, _)| format!("{n}: {e}")).collect::<Vec<_>>().join(", ")),
         _ => format!("{pad}{t}({})\n", args.iter().map(|(n, e, _)| format!("{n} = {e}")).collect::<Vec<_>>().join(", ")),
     })
@@ -586,6 +609,14 @@ fn slot_content(doc: &Document, slot: NodeId, lang: CodeLang, depth: usize) -> S
             }
             format!("|| view! {{\n{}{}}}", m.markup, indent(depth))
         }
+        CodeLang::Vue => {
+            // Just the markup: `usage` wraps it in the `<template #name>` of that slot.
+            let mut m = Markup::new(&ctx, CodeLang::Vue);
+            for k in kids {
+                m.node(k, Some(n), depth + 2, "");
+            }
+            m.markup
+        }
         CodeLang::SwiftUi => {
             let mut out = String::new();
             for k in kids {
@@ -611,6 +642,7 @@ pub fn definition(doc: &Document, c: &Component, lang: CodeLang) -> String {
         CodeLang::SwiftUi => swift_definition(doc, c),
         CodeLang::Compose => compose_definition(doc, c),
         CodeLang::Leptos => leptos(doc, c),
+        CodeLang::Vue => vue(doc, c),
         _ => react(doc, c),
     }
 }
@@ -643,6 +675,7 @@ fn web(doc: &Document, c: &Component, lang: CodeLang) -> (String, String, String
         .zip(&attr_names)
         .map(|(p, attr)| match lang {
             CodeLang::Leptos => format!(" {attr}={{{}.as_str()}}", rust_ident(&p.ident)),
+            CodeLang::Vue => format!(" :{attr}=\"{}\"", p.ident),
             _ => format!(" {attr}={{{}}}", p.ident),
         })
         .collect();
@@ -706,6 +739,40 @@ fn react(doc: &Document, c: &Component) -> String {
     out
 }
 
+/// A Vue single-file component: `<script setup>` with typed props and their defaults, the
+/// template, and a scoped stylesheet. Slots become Vue's own `<slot>` elements, so they are not
+/// props. Variants switch on the `data-*` attributes of the root element, as on the web.
+fn vue(doc: &Document, c: &Component) -> String {
+    // The stylesheet sits inline in the SFC, so the root class name isn't needed here.
+    let (_, markup, css) = web(doc, c, CodeLang::Vue);
+    // A slot layer is a `<slot>` element in the template, so it takes no prop.
+    let props: Vec<&Param> = c.params.iter().filter(|p| !matches!(p.kind, ParamKind::Slot)).collect();
+    let mut out = String::new();
+    if !props.is_empty() {
+        out.push_str("<script setup lang=\"ts\">\n\nconst props = withDefaults(\n  defineProps<{\n");
+        for p in &props {
+            let ty = match &p.kind {
+                ParamKind::Variant(opts) => opts.iter().map(|o| js_string(o)).collect::<Vec<_>>().join(" | "),
+                ParamKind::Boolean => "boolean".into(),
+                ParamKind::Text => "string".into(),
+                ParamKind::InstanceSwap | ParamKind::Slot => "unknown".into(),
+            };
+            out.push_str(&format!("    {}?: {ty};\n", p.ident));
+        }
+        out.push_str("  }>(),\n  {\n");
+        for p in &props {
+            // A component-valued prop has no literal to default to.
+            if matches!(p.kind, ParamKind::InstanceSwap | ParamKind::Slot) {
+                continue;
+            }
+            out.push_str(&format!("    {}: {},\n", p.ident, value_expr(doc, c, p, &p.default, CodeLang::Vue)));
+        }
+        out.push_str("  },\n);\n\n</script>\n\n");
+    }
+    out.push_str(&format!("<template>\n{markup}</template>\n\n<style scoped>\n{css}</style>\n"));
+    out
+}
+
 /// A Leptos `#[component]` with its variant enums and props (defaults as `#[prop]` attributes),
 /// and its stylesheet.
 fn leptos(doc: &Document, c: &Component) -> String {
diff --git a/crates/engine/src/lib.rs b/crates/engine/src/lib.rs
index 0871eebf..82781448 100644
--- a/crates/engine/src/lib.rs
+++ b/crates/engine/src/lib.rs
@@ -1893,6 +1893,8 @@ mod version_tests;
 #[cfg(test)]
 mod view_behaviour_tests;
 #[cfg(test)]
+mod vue_codegen_tests;
+#[cfg(test)]
 mod widgets_tests;
 
 #[cfg(test)]
diff --git a/crates/engine/src/playground.rs b/crates/engine/src/playground.rs
index 64286cef..bc4743e3 100644
--- a/crates/engine/src/playground.rs
+++ b/crates/engine/src/playground.rs
@@ -52,7 +52,7 @@ pub fn specs() -> Vec<CommandSpec> {
     vec![spec!(
         "component.playground",
         "Component playground",
-        "{id? (an instance, a component or a component set; default the selection), properties? {name: value} (variant, boolean, text and instance-swap properties, as instance.setProperties takes them), language? css|html|react|swiftui|compose (default react), path? (write the preview there as a PNG), scale? (the PNG's, default 2)} → {component, properties: [{name, type, options?, value}], language, code, width, height, path?}  the component with those property values, tried on a copy: its code and its look. Nothing in the document changes",
+        "{id? (an instance, a component or a component set; default the selection), properties? {name: value} (variant, boolean, text and instance-swap properties, as instance.setProperties takes them), language? css|html|react|leptos|vue|swiftui|compose (default react), path? (write the preview there as a PNG), scale? (the PNG's, default 2)} → {component, properties: [{name, type, options?, value}], language, code, width, height, path?}  the component with those property values, tried on a copy: its code and its look. Nothing in the document changes",
         false,
         |s, p| {
             let cmd = "component.playground";
@@ -63,7 +63,7 @@ pub fn specs() -> Vec<CommandSpec> {
                 Some(_) => return Err(bad(cmd, "properties: {name: value}")),
             };
             let lang = match string(p, "language") {
-                Some(l) => CodeLang::from_id(&l).ok_or_else(|| bad(cmd, "language: css|html|react|swiftui|compose"))?,
+                Some(l) => CodeLang::from_id(&l).ok_or_else(|| bad(cmd, "language: css|html|react|leptos|vue|swiftui|compose"))?,
                 None => CodeLang::React,
             };
             let (copy, inst) = build(s.doc()?, target, &values)?;
diff --git a/crates/engine/src/vue_codegen_tests.rs b/crates/engine/src/vue_codegen_tests.rs
new file mode 100644
index 00000000..d147d758
--- /dev/null
+++ b/crates/engine/src/vue_codegen_tests.rs
@@ -0,0 +1,184 @@
+//! Vue code: `inspect.code {language: "vue"}` writes a single-file component — `<template>`, a
+//! `<script setup>` with typed props, and a `<style scoped>` — for a layer tree, and a component
+//! with its properties as props, its variants as `data-*` attributes and its slots as
+//! `<slot>` elements. A Vue template holds no arbitrary expressions, so what React writes as a
+//! braced expression (an interpolation, a `v-if`, a `:prop` binding) has its own spelling here.
+
+use crate::Session;
+use crate::codegen::CodeLang;
+use crate::components::tests::{ex, idv};
+use figcraft_doc::*;
+use serde_json::json;
+
+fn code(s: &mut Session, id: NodeId, lang: &str) -> String {
+    ex(s, "inspect.code", json!({"id": id, "language": lang}))["code"].as_str().unwrap_or_default().to_string()
+}
+
+fn vue(s: &mut Session, id: NodeId) -> String {
+    code(s, id, "vue")
+}
+
+fn component_code(s: &mut Session, id: NodeId, lang: &str) -> serde_json::Value {
+    ex(s, "inspect.componentCode", json!({"id": id, "language": lang}))
+}
+
+/// A "Card" component with a "Title" text (text property) and a "Dot" ellipse (boolean
+/// property "Show dot"). Returns (card, title, dot).
+fn card(s: &mut Session) -> (NodeId, NodeId, NodeId) {
+    let f = idv(&ex(s, "frame.create", json!({"x": 0, "y": 0, "width": 200, "height": 100, "name": "Card"})));
+    ex(s, "shape.rectangle", json!({"x": 0, "y": 0, "width": 200, "height": 100, "parent": f, "props": {"name": "Bg", "fill": "#eeeeee"}}));
+    let title = idv(&ex(s, "text.create", json!({"text": "Hello", "x": 10, "y": 10, "parent": f, "props": {"name": "Title"}})));
+    let dot = idv(&ex(s, "shape.ellipse", json!({"x": 170, "y": 10, "width": 20, "height": 20, "parent": f, "props": {"name": "Dot"}})));
+    let c = idv(&ex(s, "component.create", json!({"ids": [f]})));
+    ex(s, "component.addProperty", json!({"id": dot, "name": "Show dot", "type": "boolean", "default": true}));
+    ex(s, "component.addProperty", json!({"id": c, "name": "Title", "type": "text", "layer": title}));
+    (c, title, dot)
+}
+
+#[test]
+fn a_layer_tree_becomes_a_single_file_component() {
+    let mut s = Session::new();
+    let f = idv(&ex(&mut s, "frame.create", json!({"x": 0, "y": 0, "width": 300, "height": 200, "name": "Panel"})));
+    ex(&mut s, "text.create", json!({"text": "Hi", "x": 10, "y": 10, "parent": f, "props": {"name": "Label"}}));
+    let out = vue(&mut s, f);
+    // The three blocks of an SFC, in order, with the tree in the template and the CSS scoped.
+    assert!(out.starts_with("<template>\n"), "{out}");
+    assert!(out.contains("</template>\n\n<style scoped>\n"), "{out}");
+    assert!(out.ends_with("</style>\n"), "{out}");
+    assert!(out.contains("<div class=\"panel\">"), "{out}");
+    assert!(out.contains(">Hi</p>"), "{out}");
+    // A tree without properties needs no script block.
+    assert!(!out.contains("<script"), "{out}");
+}
+
+#[test]
+fn components_take_their_properties_as_props() {
+    let mut s = Session::new();
+    let (c, _, _) = card(&mut s);
+    let out = vue(&mut s, c);
+    // Typed props with their defaults, and the template below.
+    assert!(out.starts_with("<script setup lang=\"ts\">\n"), "{out}");
+    assert!(out.contains("const props = withDefaults(\n  defineProps<{\n"), "{out}");
+    assert!(out.contains("showDot?: boolean;"), "{out}");
+    assert!(out.contains("title?: string;"), "{out}");
+    assert!(out.contains("showDot: true,"), "{out}");
+    assert!(out.contains("title: \"Hello\","), "{out}");
+    assert!(out.contains("</script>\n\n<template>\n"), "{out}");
+    // A text property is an interpolation, not React's braced expression.
+    assert!(out.contains("{{ title }}"), "{out}");
+}
+
+#[test]
+fn a_boolean_property_guards_its_layer_with_v_if() {
+    let mut s = Session::new();
+    let (c, _, _) = card(&mut s);
+    let out = vue(&mut s, c);
+    // Vue can't wrap an element in an expression: the guard rides on the element itself.
+    assert!(out.contains("v-if=\"showDot\""), "{out}");
+    assert!(!out.contains("showDot &&"), "{out}");
+}
+
+#[test]
+fn variants_switch_on_data_attributes() {
+    let mut s = Session::new();
+    let mut variants = Vec::new();
+    for (k, (state, color)) in [("Default", "#ff0000"), ("Hover", "#0000ff")].iter().enumerate() {
+        let f =
+            idv(&ex(&mut s, "frame.create", json!({"x": k as f64 * 150.0, "y": 0, "width": 100, "height": 40, "name": format!("State={state}")})));
+        ex(&mut s, "shape.rectangle", json!({"x": 0, "y": 0, "width": 100, "height": 40, "parent": f, "props": {"name": "Bg", "fill": color}}));
+        variants.push(idv(&ex(&mut s, "component.create", json!({"ids": [f]}))));
+    }
+    let set = idv(&ex(&mut s, "component.combineVariants", json!({"ids": variants})));
+    let out = vue(&mut s, set);
+    // A variant property is a string union, bound to the root's data attribute.
+    assert!(out.contains("state?: \"Default\" | \"Hover\";"), "{out}");
+    assert!(out.contains(":data-state=\"state\""), "{out}");
+    // What the other variant changes is a rule on that attribute, as on the web.
+    assert!(out.contains("[data-state=\"Hover\"]"), "{out}");
+}
+
+#[test]
+fn instances_are_calls_passing_the_values_they_set() {
+    let mut s = Session::new();
+    let (c, _, _) = card(&mut s);
+    let i = idv(&ex(&mut s, "instance.create", json!({"component": c, "x": 400, "y": 0})));
+    // Values left at the definition's default aren't passed.
+    assert_eq!(component_code(&mut s, i, "vue")["usage"], "<Card />\n");
+    ex(&mut s, "instance.setProperties", json!({"ids": [i], "properties": {"Show dot": false, "Title": "Buy"}}));
+    // A plain string is an attribute value; anything else is a `:name` binding.
+    assert_eq!(component_code(&mut s, i, "vue")["usage"], "<Card :showDot=\"false\" title=\"Buy\" />\n");
+    let out = code(&mut s, i, "vue");
+    assert!(out.starts_with("<Card :showDot=\"false\" title=\"Buy\" />\n"), "{out}");
+    assert!(out.contains("defineProps<{"), "{out}");
+}
+
+#[test]
+fn a_layer_tree_with_an_instance_calls_it() {
+    let mut s = Session::new();
+    let (c, _, _) = card(&mut s);
+    let parent = idv(&ex(&mut s, "frame.create", json!({"x": 0, "y": 0, "width": 500, "height": 300, "name": "Page"})));
+    ex(&mut s, "instance.create", json!({"component": c, "x": 10, "y": 10, "parent": parent}));
+    let out = vue(&mut s, parent);
+    assert!(out.contains("<Card "), "{out}");
+}
+
+#[test]
+fn slots_become_slot_elements() {
+    let mut s = Session::new();
+    let frame = idv(&ex(&mut s, "frame.create", json!({"x": 0, "y": 0, "width": 200, "height": 100, "name": "Shell"})));
+    let body = idv(&ex(&mut s, "frame.create", json!({"x": 0, "y": 0, "width": 200, "height": 100, "parent": frame, "name": "Body"})));
+    let c = idv(&ex(&mut s, "component.create", json!({"ids": [frame]})));
+    ex(&mut s, "component.makeSlot", json!({"id": body, "name": "Content"}));
+    let out = vue(&mut s, c);
+    // An empty slot is Vue's own element, and a slot takes no prop.
+    assert!(out.contains("<slot name=\"content\" />"), "{out}");
+    assert!(!out.contains("content?: "), "{out}");
+    assert!(!out.contains("props"), "{out}");
+
+    // Content in the slot is its fallback, shown until an instance fills it.
+    let mut s = Session::new();
+    let frame = idv(&ex(&mut s, "frame.create", json!({"x": 0, "y": 0, "width": 200, "height": 100, "name": "Shell2"})));
+    let body = idv(&ex(&mut s, "frame.create", json!({"x": 0, "y": 0, "width": 200, "height": 100, "parent": frame, "name": "Body2"})));
+    ex(&mut s, "text.create", json!({"text": "Empty", "x": 0, "y": 0, "parent": body, "props": {"name": "Hint"}}));
+    let c = idv(&ex(&mut s, "component.create", json!({"ids": [frame]})));
+    ex(&mut s, "component.makeSlot", json!({"id": body, "name": "Content"}));
+    let out = vue(&mut s, c);
+    assert!(out.contains("<slot name=\"content\">"), "{out}");
+    assert!(out.contains("</slot>"), "{out}");
+    assert!(out.contains("Empty"), "{out}");
+}
+
+#[test]
+fn identifiers_are_escaped_and_the_language_round_trips() {
+    let mut s = Session::new();
+    let (c, _, _) = card(&mut s);
+    // "Show dot" is not an identifier: it becomes camelCase in the props and the template alike.
+    let out = vue(&mut s, c);
+    assert!(out.contains("showDot"), "{out}");
+    assert!(!out.contains("Show dot"), "{out}");
+    // The id is discoverable from what the Inspect panel offers.
+    assert_eq!(CodeLang::from_id("vue"), Some(CodeLang::Vue));
+    assert_eq!(CodeLang::from_id("sfc"), Some(CodeLang::Vue));
+    assert!(CodeLang::Vue.is_web());
+    assert_eq!(CodeLang::Vue.id(), "vue");
+    assert!(CodeLang::ALL.contains(&CodeLang::Vue));
+}
+
+#[test]
+fn rem_converts_lengths_in_the_vue_template_and_its_style() {
+    let mut s = Session::new();
+    let f = idv(&ex(&mut s, "frame.create", json!({"x": 0, "y": 0, "width": 320, "height": 64, "name": "Bar"})));
+    let out = ex(&mut s, "inspect.code", json!({"id": f, "language": "vue", "unit": "rem"}))["code"].as_str().unwrap_or_default().to_string();
+    assert!(out.contains("20rem"), "{out}");
+}
+
+#[test]
+fn a_keyword_property_name_stays_usable() {
+    let mut s = Session::new();
+    let f = idv(&ex(&mut s, "frame.create", json!({"x": 0, "y": 0, "width": 200, "height": 100, "name": "Row"})));
+    let c = idv(&ex(&mut s, "component.create", json!({"ids": [f]})));
+    // "default" is a JavaScript keyword: the prop is renamed, and the template follows.
+    ex(&mut s, "component.addProperty", json!({"id": c, "name": "default", "type": "text", "default": "x"}));
+    let out = vue(&mut s, c);
+    assert!(out.contains("defaultValue"), "{out}");
+}
diff --git a/crates/ui-egui/locales/cs.toml b/crates/ui-egui/locales/cs.toml
index eea0e8dc..e3423c03 100644
--- a/crates/ui-egui/locales/cs.toml
+++ b/crates/ui-egui/locales/cs.toml
@@ -219,7 +219,7 @@ status = "draft — needs native review"
 "Changes on main" = "Změny v hlavním souboru"
 "Changes on the branch" = "Změny ve větvi"
 "Changes unknown" = "Změny nejsou známy"
-"Choose React, Leptos, SwiftUI or Compose above to connect this component to its code." = "Pro propojení této komponenty s jejím kódem vyberte nahoře React, Leptos, SwiftUI nebo Compose."
+"Choose React, Leptos, Vue, SwiftUI or Compose above to connect this component to its code." = "Pro propojení této komponenty s jejím kódem vyberte nahoře React, Leptos, Vue, SwiftUI nebo Compose."
 "Choose another profile to change it." = "Pro změnu vyberte jiný profil."
 "Choose collection" = "Vybrat kolekci"
 "Choose image" = "Vybrat obrázek"
diff --git a/crates/ui-egui/locales/de.toml b/crates/ui-egui/locales/de.toml
index f61464b8..c73dedcc 100644
--- a/crates/ui-egui/locales/de.toml
+++ b/crates/ui-egui/locales/de.toml
@@ -214,7 +214,7 @@ status = "draft — needs native review"
 "Changes on main" = "Änderungen in der Hauptdatei"
 "Changes on the branch" = "Änderungen im Branch"
 "Changes unknown" = "Änderungen unbekannt"
-"Choose React, Leptos, SwiftUI or Compose above to connect this component to its code." = "Wählen Sie oben React, Leptos, SwiftUI oder Compose, um diese Komponente mit ihrem Code zu verbinden."
+"Choose React, Leptos, Vue, SwiftUI or Compose above to connect this component to its code." = "Wählen Sie oben React, Leptos, Vue, SwiftUI oder Compose, um diese Komponente mit ihrem Code zu verbinden."
 "Choose another profile to change it." = "Wählen Sie ein anderes Profil, um es zu ändern."
 "Choose collection" = "Sammlung wählen"
 "Choose image" = "Bild wählen"
diff --git a/crates/ui-egui/locales/en.toml b/crates/ui-egui/locales/en.toml
index ae566fc8..dfe79179 100644
--- a/crates/ui-egui/locales/en.toml
+++ b/crates/ui-egui/locales/en.toml
@@ -228,7 +228,7 @@ name = "English"
 "Changes on main" = "Changes on main"
 "Changes on the branch" = "Changes on the branch"
 "Changes unknown" = "Changes unknown"
-"Choose React, Leptos, SwiftUI or Compose above to connect this component to its code." = "Choose React, Leptos, SwiftUI or Compose above to connect this component to its code."
+"Choose React, Leptos, Vue, SwiftUI or Compose above to connect this component to its code." = "Choose React, Leptos, Vue, SwiftUI or Compose above to connect this component to its code."
 "Choose another profile to change it." = "Choose another profile to change it."
 "Choose collection" = "Choose collection"
 "Choose image" = "Choose image"
diff --git a/crates/ui-egui/locales/es.toml b/crates/ui-egui/locales/es.toml
index 596feda6..d9f15597 100644
--- a/crates/ui-egui/locales/es.toml
+++ b/crates/ui-egui/locales/es.toml
@@ -229,7 +229,7 @@ status = "draft — needs native review"
 "Changes on main" = "Cambios en la principal"
 "Changes on the branch" = "Cambios en la rama"
 "Changes unknown" = "Cambios desconocidos"
-"Choose React, Leptos, SwiftUI or Compose above to connect this component to its code." = "Elige React, Leptos, SwiftUI o Compose arriba para conectar este componente con su código."
+"Choose React, Leptos, Vue, SwiftUI or Compose above to connect this component to its code." = "Elige React, Leptos, Vue, SwiftUI o Compose arriba para conectar este componente con su código."
 "Choose another profile to change it." = "Elige otro perfil para cambiarlo."
 "Choose collection" = "Elegir colección"
 "Choose image" = "Elegir imagen"
diff --git a/crates/ui-egui/locales/fr.toml b/crates/ui-egui/locales/fr.toml
index b038b335..d3f0a86d 100644
--- a/crates/ui-egui/locales/fr.toml
+++ b/crates/ui-egui/locales/fr.toml
@@ -223,7 +223,7 @@ status = "draft — needs native review"
 "Changes on main" = "Modifications dans le fichier principal"
 "Changes on the branch" = "Modifications dans la branche"
 "Changes unknown" = "Modifications inconnues"
-"Choose React, Leptos, SwiftUI or Compose above to connect this component to its code." = "Choisissez React, Leptos, SwiftUI ou Compose ci-dessus pour relier ce composant à son code."
+"Choose React, Leptos, Vue, SwiftUI or Compose above to connect this component to its code." = "Choisissez React, Leptos, Vue, SwiftUI ou Compose ci-dessus pour relier ce composant à son code."
 "Choose another profile to change it." = "Choisissez un autre profil pour le changer."
 "Choose collection" = "Choisir une collection"
 "Choose image" = "Choisir une image"
diff --git a/crates/ui-egui/locales/id.toml b/crates/ui-egui/locales/id.toml
index f21e1ca3..01774e99 100644
--- a/crates/ui-egui/locales/id.toml
+++ b/crates/ui-egui/locales/id.toml
@@ -223,7 +223,7 @@ status = "draft — needs native review"
 "Changes on main" = "Perubahan di main"
 "Changes on the branch" = "Perubahan di branch"
 "Changes unknown" = "Perubahan tidak diketahui"
-"Choose React, Leptos, SwiftUI or Compose above to connect this component to its code." = "Pilih React, Leptos, SwiftUI, atau Compose di atas untuk menghubungkan component ini ke kodenya."
+"Choose React, Leptos, Vue, SwiftUI or Compose above to connect this component to its code." = "Pilih React, Leptos, Vue, SwiftUI, atau Compose di atas untuk menghubungkan component ini ke kodenya."
 "Choose another profile to change it." = "Pilih profil lain untuk mengubahnya."
 "Choose collection" = "Pilih koleksi"
 "Choose image" = "Pilih gambar"
diff --git a/crates/ui-egui/locales/ja.toml b/crates/ui-egui/locales/ja.toml
index c42790f3..99d5b03f 100644
--- a/crates/ui-egui/locales/ja.toml
+++ b/crates/ui-egui/locales/ja.toml
@@ -224,7 +224,7 @@ status = "draft — needs native review"
 "Changes on main" = "メインの変更"
 "Changes on the branch" = "ブランチの変更"
 "Changes unknown" = "変更内容は不明"
-"Choose React, Leptos, SwiftUI or Compose above to connect this component to its code." = "上で React、Leptos、SwiftUI、Compose のいずれかを選び、このコンポーネントをコードに接続。"
+"Choose React, Leptos, Vue, SwiftUI or Compose above to connect this component to its code." = "上で React、Leptos、Vue、SwiftUI、Compose のいずれかを選び、このコンポーネントをコードに接続。"
 "Choose another profile to change it." = "変更するには別のプロファイルを選択。"
 "Choose collection" = "コレクションを選択"
 "Choose image" = "画像を選択"
diff --git a/crates/ui-egui/locales/ko.toml b/crates/ui-egui/locales/ko.toml
index b33b36b9..9889c7ea 100644
--- a/crates/ui-egui/locales/ko.toml
+++ b/crates/ui-egui/locales/ko.toml
@@ -214,7 +214,7 @@ status = "draft — needs native review"
 "Changes on main" = "메인의 변경 사항"
 "Changes on the branch" = "브랜치의 변경 사항"
 "Changes unknown" = "변경 내용 알 수 없음"
-"Choose React, Leptos, SwiftUI or Compose above to connect this component to its code." = "위에서 React, Leptos, SwiftUI 또는 Compose를 선택해 이 컴포넌트를 코드에 연결하세요."
+"Choose React, Leptos, Vue, SwiftUI or Compose above to connect this component to its code." = "위에서 React, Leptos, Vue, SwiftUI 또는 Compose를 선택해 이 컴포넌트를 코드에 연결하세요."
 "Choose another profile to change it." = "변경하려면 다른 프로필을 선택하세요."
 "Choose collection" = "컬렉션 선택"
 "Choose image" = "이미지 선택"
diff --git a/crates/ui-egui/locales/pt-BR.toml b/crates/ui-egui/locales/pt-BR.toml
index d8f857e0..3bf7a5b0 100644
--- a/crates/ui-egui/locales/pt-BR.toml
+++ b/crates/ui-egui/locales/pt-BR.toml
@@ -212,7 +212,7 @@ status = "draft — needs native review"
 "Changes on main" = "Alterações no principal"
 "Changes on the branch" = "Alterações na branch"
 "Changes unknown" = "Alterações desconhecidas"
-"Choose React, Leptos, SwiftUI or Compose above to connect this component to its code." = "Escolha React, Leptos, SwiftUI ou Compose acima para conectar este componente ao código dele."
+"Choose React, Leptos, Vue, SwiftUI or Compose above to connect this component to its code." = "Escolha React, Leptos, Vue, SwiftUI ou Compose acima para conectar este componente ao código dele."
 "Choose another profile to change it." = "Escolha outro perfil para alterá-lo."
 "Choose collection" = "Escolher coleção"
 "Choose image" = "Escolher imagem"
diff --git a/crates/ui-egui/locales/ru.toml b/crates/ui-egui/locales/ru.toml
index 6e173a92..478f78d8 100644
--- a/crates/ui-egui/locales/ru.toml
+++ b/crates/ui-egui/locales/ru.toml
@@ -226,7 +226,7 @@ name = "Русский"
 "Changes on main" = "Изменения в основной ветке"
 "Changes on the branch" = "Изменения в ветке"
 "Changes unknown" = "Изменения неизвестны"
-"Choose React, Leptos, SwiftUI or Compose above to connect this component to its code." = "Выберите выше React, Leptos, SwiftUI или Compose, чтобы связать компонент с его кодом."
+"Choose React, Leptos, Vue, SwiftUI or Compose above to connect this component to its code." = "Выберите выше React, Leptos, Vue, SwiftUI или Compose, чтобы связать компонент с его кодом."
 "Choose another profile to change it." = "Для смены выберите другой профиль."
 "Choose collection" = "Выбрать коллекцию"
 "Choose image" = "Выбрать изображение"
diff --git a/crates/ui-egui/locales/sv.toml b/crates/ui-egui/locales/sv.toml
index d86779e0..53636a8a 100644
--- a/crates/ui-egui/locales/sv.toml
+++ b/crates/ui-egui/locales/sv.toml
@@ -223,7 +223,7 @@ name = "Svenska"
 "Changes on main" = "Ändringar i main"
 "Changes on the branch" = "Ändringar i grenen"
 "Changes unknown" = "Okända ändringar"
-"Choose React, Leptos, SwiftUI or Compose above to connect this component to its code." = "Välj React, Leptos, SwiftUI eller Compose ovan för att koppla den här komponenten till dess kod."
+"Choose React, Leptos, Vue, SwiftUI or Compose above to connect this component to its code." = "Välj React, Leptos, Vue, SwiftUI eller Compose ovan för att koppla den här komponenten till dess kod."
 "Choose another profile to change it." = "Välj en annan profil för att ändra den."
 "Choose collection" = "Välj samling"
 "Choose image" = "Välj bild"
diff --git a/crates/ui-egui/locales/tr.toml b/crates/ui-egui/locales/tr.toml
index bd8bb7c9..5cde760a 100644
--- a/crates/ui-egui/locales/tr.toml
+++ b/crates/ui-egui/locales/tr.toml
@@ -223,7 +223,7 @@ name = "Türkçe"
 "Changes on main" = "Ana dosyadaki değişiklikler"
 "Changes on the branch" = "Daldaki değişiklikler"
 "Changes unknown" = "Değişiklikler bilinmiyor"
-"Choose React, Leptos, SwiftUI or Compose above to connect this component to its code." = "Bu bileşeni koduna bağlamak için yukarıdan React, Leptos, SwiftUI veya Compose seçin."
+"Choose React, Leptos, Vue, SwiftUI or Compose above to connect this component to its code." = "Bu bileşeni koduna bağlamak için yukarıdan React, Leptos, Vue, SwiftUI veya Compose seçin."
 "Choose another profile to change it." = "Değiştirmek için başka bir profil seçin."
 "Choose collection" = "Koleksiyon seç"
 "Choose image" = "Görüntü seç"
diff --git a/crates/ui-egui/locales/zh-Hans.toml b/crates/ui-egui/locales/zh-Hans.toml
index 94c91942..862dc753 100644
--- a/crates/ui-egui/locales/zh-Hans.toml
+++ b/crates/ui-egui/locales/zh-Hans.toml
@@ -215,7 +215,7 @@ status = "draft — needs native review"
 "Changes on main" = "主文件上的更改"
 "Changes on the branch" = "分支上的更改"
 "Changes unknown" = "更改未知"
-"Choose React, Leptos, SwiftUI or Compose above to connect this component to its code." = "在上方选择 React、Leptos、SwiftUI 或 Compose，将此组件关联到其代码。"
+"Choose React, Leptos, Vue, SwiftUI or Compose above to connect this component to its code." = "在上方选择 React、Leptos、Vue、SwiftUI 或 Compose，将此组件关联到其代码。"
 "Choose another profile to change it." = "选择其他配置文件以更改。"
 "Choose collection" = "选择集合"
 "Choose image" = "选择图片"
diff --git a/crates/ui-egui/src/dev_mode.rs b/crates/ui-egui/src/dev_mode.rs
index 0b429820..37a3a4b1 100644
--- a/crates/ui-egui/src/dev_mode.rs
+++ b/crates/ui-egui/src/dev_mode.rs
@@ -396,7 +396,7 @@ pub fn connect_section(app: &mut FigApp, ui: &mut Ui, doc: &Document, id: NodeId
         let text = if connectable {
             tr("Link this component to its code component: instances then show your real snippet with their values.")
         } else {
-            tr("Choose React, Leptos, SwiftUI or Compose above to connect this component to its code.")
+            tr("Choose React, Leptos, Vue, SwiftUI or Compose above to connect this component to its code.")
         };
         widgets::note(ui, text, t.text_secondary);
         return;
diff --git a/docs/dev-mode-parity.md b/docs/dev-mode-parity.md
index cba5e81d..fcba79f8 100644
--- a/docs/dev-mode-parity.md
+++ b/docs/dev-mode-parity.md
@@ -10,13 +10,13 @@ inside generated layer trees. Remaining: 0–1 h.
 |---|---|---|
 | Dev Mode toggle (Shift+D), Inspect panel | done | |
 | Properties with their styles and variables; redlines on hover | done | positions from the frame around the layer (groups aren't frames), rotation, radius (CSS corner order), opacity, blend; colours in hex, RGB, CSS, HSL or HSB (`inspect.properties {colorFormat}`, the Inspect tab's Color format) |
-| Code: CSS, iOS (SwiftUI), Android (Compose) | done | plus HTML, React and Leptos (ours; Leptos: `#[component]` functions with `#[prop]` defaults, variant enums and `view!` markup); components take properties as parameters, instances are calls; CSS in px or rem (`inspect.code {unit, rootFontSize}`), with rotation, blend modes, gradient directions and kinds (linear, radial, conic), text alignment, case and decoration |
+| Code: CSS, iOS (SwiftUI), Android (Compose) | done | plus HTML, React, Vue and Leptos (ours; Leptos: `#[component]` functions with `#[prop]` defaults, variant enums and `view!` markup); components take properties as parameters, instances are calls; CSS in px or rem (`inspect.code {unit, rootFontSize}`), with rotation, blend modes, gradient directions and kinds (linear, radial, conic), text alignment, case and decoration |
 | Assets list with export | done | layers with export settings, icons (small, vector shapes only: SVG) and images (PNG); the icon rule is ours |
 | Annotations: pinned properties, categories, coloured callouts, filter | done | |
 | Ready for dev list, statuses, "Changed" after edits | done | |
 | Focus view (one frame, previous / next) | done | |
 | Compare changes (before/after side by side or overlaid, property diffs) | done | only against the snapshot taken when a frame was marked ready; not against any named version |
-| Code connect (map components to repository code) | done | per language (React, Leptos, SwiftUI, Compose): import path, name and a template with `{property}` and `{property ? "a" : "b"}` placeholders; instances (also inside generated layer trees) show the snippet with their values; edited in the Inspect panel with a live preview; `figcraft.connect.json` export/import. Inside a generated layer tree, connected instances' imports aren't collected |
+| Code connect (map components to repository code) | done | per language (React, Leptos, Vue, SwiftUI, Compose): import path, name and a template with `{property}` and `{property ? "a" : "b"}` placeholders; instances (also inside generated layer trees) show the snippet with their values; edited in the Inspect panel with a live preview; `figcraft.connect.json` export/import. Inside a generated layer tree, connected instances' imports aren't collected |
 | Plugins in Dev Mode (Jira, GitHub, etc.) | partial | FigCraft's own WASM plugins that only read run from the Inspect tab; no plugin UI at run time, no third-party integrations |
 | VS Code extension | out of scope | FigCraft's MCP server and control channel already serve design data, code and connected snippets to agents and editors |
 | Dev resources links on layers | done | a URL and a name per link on any layer (`devResource.*`, saved, synced, undoable); instances list their main component's (and its set's) read-only; URLs checked as http/https and never fetched (no page titles: a link without a name is named after its URL); the Inspect tab lists, adds, edits and removes them; `get_node` returns them |
diff --git a/docs/file-format-parity.md b/docs/file-format-parity.md
index adf0b0f2..85eb2648 100644
--- a/docs/file-format-parity.md
+++ b/docs/file-format-parity.md
@@ -55,7 +55,7 @@ export limit, not a native document nesting limit.
 | PDF | yes | yes | one page per frame, real selectable text in subset fonts, links, vectors and gradients as vectors, effects as images; bleed, crop/bleed marks, page boxes, naive CMYK; checked by rendering the PDF back against PNG exports; explicit depth-limit refusal | CMYK output intent 2–4 |
 | WebP | — | yes (ours) | | — |
 | Copy as CSS / SVG / PNG / text / link | yes | yes | Copy as PNG: the whole selection at 2x | — |
-| Dev Mode code (CSS, iOS SwiftUI, Android Compose) | yes | yes, plus HTML and React | see [dev-mode-parity](dev-mode-parity.md) | — |
+| Dev Mode code (CSS, iOS SwiftUI, Android Compose) | yes | yes, plus HTML, React and Vue | see [dev-mode-parity](dev-mode-parity.md) | — |
 | `.fig` ("Save local copy") | yes | **experimental** | the whole file, also as a copy from File ▸ Save as… (the document keeps its `.figcraft` path and unsaved state); see [Export to `.fig`](#export-to-fig-experimental). Round trips through our own importer; written files checked by opening them in other software: layers, fills, gradients, strokes, shadows, vectors, components and text draw as in FigCraft; resized and scaled instances keep their size and lay their layers out for it, variables with their modes and colour bindings resolve there (a frame set to another mode shows that mode's colours, also inside instances), colour, text, effect and grid styles are listed, and variable-width strokes that are the same on both sides of the path draw with their width | 5–15 (non-colour bindings as bindings, checks of effects, images and prototypes, and against real files) |
 
 ### Export to `.fig` (experimental)
diff --git a/docs/gaps.md b/docs/gaps.md
index 9b1a770c..778364d8 100644
--- a/docs/gaps.md
+++ b/docs/gaps.md
@@ -356,7 +356,7 @@ No alpha blockers: the alpha gate in [`roadmap.md`](roadmap.md#alpha-gate) passe
 
 ### 16. Dev Mode: the tail after dev resources
 - **Landed (2026-10-11):** code connect: a component or set links to its code component per
-  language (React, SwiftUI, Compose): an import path, the name and a template whose `{property}`
+  language (React, Vue, SwiftUI, Compose): an import path, the name and a template whose `{property}`
   and `{property ? "a" : "b"}` placeholders take the instance's values, escaped per language and
   never executed. `inspect.code`, `inspect.componentCode` and the Inspect panel show that snippet
   instead of generated code (inside generated layer trees too); the panel's Connect to code edits
diff --git a/docs/mcp.md b/docs/mcp.md
index dfea95cc..95d7b460 100644
--- a/docs/mcp.md
+++ b/docs/mcp.md
@@ -294,7 +294,7 @@ Or in a project's `.mcp.json`:
 | Tool | What it does |
 |---|---|
 | `list_commands {filter?}` | Every command: id, label, menu, shortcut, undoable, params doc. |
-| `run_command {command, params}` | Run any command (e.g. `align.left`, `layout.add`, `component.create`, `instance.place` (drop an instance at a page point into the frame or auto layout slot under it), `component.exposeInstance` / `instance.exposed` (nested instance properties on instances), `component.makeSlot` / `instance.slotInsert` / `instance.resetSlot` (slots, below), `inspect.code` (CSS, HTML + CSS for a whole frame, React, Leptos, SwiftUI or Jetpack Compose for a layer; components take their properties as parameters and instances are calls, see Dev Mode below), `inspect.properties` (layout, auto layout, typography, fills, strokes and effects with their style and variable names; `colorFormat`: hex, rgb, css, hsl or hsb), `inspect.assets` (layers under the selection with export settings, icons and images, each with its `kind`), `inspect.code` takes `unit: rem` and `rootFontSize` for CSS, HTML, React and Leptos, `style.create`, `variable.bind`, `variable.update` (rename, describe, scope), `variable.set` with `{alias}`, `variable.renameMode` / `variable.removeMode`, `variable.deleteCollection`, `proto.interaction.add`, `codeConnect.set` (components linked to real code, see Dev Mode below)). |
+| `run_command {command, params}` | Run any command (e.g. `align.left`, `layout.add`, `component.create`, `instance.place` (drop an instance at a page point into the frame or auto layout slot under it), `component.exposeInstance` / `instance.exposed` (nested instance properties on instances), `component.makeSlot` / `instance.slotInsert` / `instance.resetSlot` (slots, below), `inspect.code` (CSS, HTML + CSS for a whole frame, React, Leptos, Vue, SwiftUI or Jetpack Compose for a layer; components take their properties as parameters and instances are calls, see Dev Mode below), `inspect.properties` (layout, auto layout, typography, fills, strokes and effects with their style and variable names; `colorFormat`: hex, rgb, css, hsl or hsb), `inspect.assets` (layers under the selection with export settings, icons and images, each with its `kind`), `inspect.code` takes `unit: rem` and `rootFontSize` for CSS, HTML, React, Leptos and Vue, `style.create`, `variable.bind`, `variable.update` (rename, describe, scope), `variable.set` with `{alias}`, `variable.renameMode` / `variable.removeMode`, `variable.deleteCollection`, `proto.interaction.add`, `codeConnect.set` (components linked to real code, see Dev Mode below)). |
 | `batch {commands: [{command, params}], label?}` | Several commands as one undo step (`command.batch`); all-or-nothing for open documents and their document state. Failed inner commands are removed from the journal; preferences, clipboard, tool state and UI requests are not rolled back. A step can use what an earlier step returned: `{"$step": n}` anywhere in its params becomes the `id` in step n's result (zero-based), and `{"$step": n, "field": "…"}` another field of it (see Step references below). |
 | `create_node {type, x, y, width, height, parent, index, name, text, path, props}` | Create a frame, rectangle, ellipse, polygon, star, line, arrow, text, vector, section, component or slice; returns `{id, node}`. |
 | `set_properties {ids, props}` | `node.set` on layers (geometry, fills, strokes, effects, corner radius, auto layout, sizing, constraints, masks (`isMask`, `maskType: alpha\|vector\|luminance`), handoff status (`devStatus: none\|readyForDev\|completed`; marking again clears "Changed"), a section's `sectionContentsHidden`, text…); returns the updated layers. |
@@ -1275,29 +1275,40 @@ permissions: without it nothing is downloaded); `plugin.directory.publish {path
 
 ### Dev Mode
 
-- **Component code:** `inspect.code {id, language: react|leptos|swiftui|compose}` on a component,
+- **Component code:** `inspect.code {id, language: react|leptos|vue|swiftui|compose}` on a component,
   a component set or a variant writes the component as a reusable unit: React (TSX) with a props
-  interface, Leptos with a `#[component]` function (`#[prop]` defaults, `view!` markup), SwiftUI
+  interface, Leptos with a `#[component]` function (`#[prop]` defaults, `view!` markup), Vue as a
+  single-file component (`<template>`, a `<script setup>` with `defineProps` and its defaults, a
+  `<style scoped>`; a slot layer is Vue's own `<slot>`, so it takes no prop), SwiftUI
   with a `View` struct, Compose with a `@Composable` function. Its component properties are the
-  parameters, with their defaults: variant properties become string unions (React) or enums,
+  parameters, with their defaults: variant properties become string unions (React, Vue) or enums,
   booleans become flags around the layers they show, text properties strings, instance swaps views
   (`React.ReactNode`, Leptos `ViewFn`, `AnyView`, a composable lambda) and slots optional content.
-  Every variant of a set shares one definition; in React and Leptos the other variants'
-  differences become CSS rules on `data-*` attributes. On an instance (or a layer tree containing
+  Every variant of a set shares one definition; in React, Vue and Leptos the other variants'
+  differences become CSS rules on `data-*` attributes. A Vue template holds no arbitrary
+  expressions, so what React writes as a braced expression has its own spelling there: text is
+  `{{ prop }}`, a boolean property's layer carries `v-if="prop"`, and a binding is
+  `:prop="value"`. On an instance (or a layer tree containing
   instances) each instance is a call passing only the values it changes, e.g. `<Button
-  state="Hover" label="Buy" />`, `<Button state=ButtonState::Hover label="Buy" />`, `Button(state:
+  state="Hover" label="Buy" />`, `<Button state=ButtonState::Hover label="Buy" />`,
+  `<Button :state="Hover" />`, `Button(state:
   .hover, label: "Buy")`, `Button(state = ButtonState.Hover, label = "Buy")`. Names are escaped and
   unique (keywords get a suffix, `default` → `defaultValue`, Rust's `type` → `type_`; Leptos names
   are snake_case; names that would shadow framework types get one too, `Text` → `TextComponent`). `inspect.componentCode
   {id?, language?}` returns the parts: `{component, name, set, properties: [{name, param, type,
   default, value? (instances)}], definition, usage? (instances)}`.
 - **Code connect:** link a component (a variant links its set) to the code component it is built
-  as, per language (`react`, `leptos`, `swiftui`, `compose`): `codeConnect.set {id?, language?, importPath?,
+  as, per language (`react`, `leptos`, `vue`, `swiftui`, `compose`): `codeConnect.set {id?, language?, importPath?,
   name?, template?}` (undoable; fields left out keep their value; the defaults are the generated
   name and a call passing every property) → `{component, language, code, unknown}`. Templates are
   text, never executed: `{property}` (its name or parameter name) is the instance's value escaped
   for the language (React and Leptos keep the markup's braces, so `size={size}` gives
-  `size="Large"` and `disabled={disabled}` gives `disabled={true}`; Leptos imports with `use
+  `size="Large"` and `disabled={disabled}` gives `disabled={true}`; a Vue binding is quoted
+  instead, so `:size={size}` gives `:size="Large"` and `:disabled={disabled}` gives
+  `:disabled="true"` — write the placeholder without quotes and let the value bring them; a
+  component swap is the component itself, `:icon={icon}` giving `:icon="Icon"`; a string that needs
+  escapes keeps them inside the value, where the attribute's own quotes become `&quot;`; Leptos
+  imports with `use
   <importPath>::<name>;`), `{property ? "a" : "b"}` inserts one of two
   strings, any other `{…}` stays as written (`unknown` lists placeholder names that aren't
   properties). Then `inspect.code` on an instance or the component returns the import line and the
diff --git a/docs/target-app-parity.md b/docs/target-app-parity.md
index a1a5bf12..87911711 100644
--- a/docs/target-app-parity.md
+++ b/docs/target-app-parity.md
@@ -616,7 +616,7 @@ Carried over from the ROADMAP's "Shipped so far" (2026-10-10). The test count th
   toolbar with flyouts and mode switcher, Design / Prototype / Inspect panels (Dev Mode: properties with their styles and variables, annotations
   with pinned properties and categories drawn as coloured callouts on the canvas (filtered by category),
   a ready-for-dev list, a focus view on one frame with previous / next, Compare changes since a frame
-  was marked ready (before / after side by side or overlaid, property-level diffs), CSS/HTML/React/SwiftUI/Compose
+  was marked ready (before / after side by side or overlaid, property-level diffs), CSS/HTML/React/Vue/SwiftUI/Compose
   code where components take their properties as parameters and instances are calls, components
   connected to their code components showing the real snippet, read-only plugins), colour picker
   (HSB square, hue/alpha, hex, gradient stops, image fills), main menu generated from the catalog,

From 7c211d8b0d790141f47d8ea1b4507d0af372d17c Mon Sep 17 00:00:00 2001
From: phonedu <135960865+phonedu@users.noreply.github.com>
Date: Thu, 22 Oct 2026 14:45:38 +0800
Subject: [PATCH 2/8] Review: escape Vue binding attributes and use the
 template's indent

- usage: a non-plain Vue argument escapes " as &quot; in the attribute value (same rule as the connected-code path)
- usage: Vue pads with two spaces like the markup, not four
- test: an unconnected instance with a quoted title asserts inspect.componentCode and inspect.code
---
 crates/engine/src/component_codegen.rs       | 4 ++--
 crates/engine/src/component_codegen_tests.rs | 5 +++++
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/crates/engine/src/component_codegen.rs b/crates/engine/src/component_codegen.rs
index 8e568313..2e74f3d3 100644
--- a/crates/engine/src/component_codegen.rs
+++ b/crates/engine/src/component_codegen.rs
@@ -526,7 +526,7 @@ pub(crate) fn instance_values(doc: &Document, id: NodeId, c: &Component) -> Opti
 pub fn usage(doc: &Document, id: NodeId, lang: CodeLang, depth: usize) -> Option<String> {
     let c = main_of(doc, id).and_then(|m| describe(doc, m))?;
     let values = instance_values(doc, id, &c)?;
-    let pad = if lang == CodeLang::React { "  ".repeat(depth) } else { indent(depth) };
+    let pad = if matches!(lang, CodeLang::React | CodeLang::Vue) { "  ".repeat(depth) } else { indent(depth) };
     // A connected component: its real snippet. shortcut: inside a layer tree it brings no import
     // line; collect them at the top of the tree's code when people ask for it.
     if let Some(link) = crate::code_connect::link(doc, id, lang) {
@@ -574,7 +574,7 @@ pub fn usage(doc: &Document, id: NodeId, lang: CodeLang, depth: usize) -> Option
             let attrs: String = args
                 .iter()
                 .filter(|(name, _, _)| !is_slot(name))
-                .map(|(name, expr, plain)| if *plain { format!(" {name}={expr}") } else { format!(" :{name}=\"{expr}\"") })
+                .map(|(name, expr, plain)| if *plain { format!(" {name}={expr}") } else { format!(" :{name}=\"{}\"", expr.replace('"', "&quot;")) })
                 .collect();
             let slots: String = args
                 .iter()
diff --git a/crates/engine/src/component_codegen_tests.rs b/crates/engine/src/component_codegen_tests.rs
index 4cd3d776..9e3e65f3 100644
--- a/crates/engine/src/component_codegen_tests.rs
+++ b/crates/engine/src/component_codegen_tests.rs
@@ -124,6 +124,11 @@ fn instances_are_calls_passing_the_values_they_set() {
     assert_eq!(component_code(&mut s, i, "swiftui")["usage"], "Card(showDot: false, title: \"Say \\\"hi\\\" $5\\nnow\")\n");
     assert_eq!(component_code(&mut s, i, "compose")["usage"], "Card(showDot = false, title = \"Say \\\"hi\\\" \\$5\\nnow\")\n");
     assert_eq!(component_code(&mut s, i, "leptos")["usage"], "<Card show_dot={false} title={\"Say \\\"hi\\\" $5\\nnow\"} />\n");
+    // A quoted title becomes a binding whose attribute value is escaped: the expression itself
+    // keeps its JS quotes, and the attribute's own quotes are entities.
+    assert_eq!(component_code(&mut s, i, "vue")["usage"], "<Card :showDot=\"false\" :title=\"&quot;Say \\&quot;hi\\&quot; $5\\nnow&quot;\" />\n");
+    let vue = code(&mut s, i, "vue");
+    assert!(vue.starts_with("<Card :showDot=\"false\" :title=\"&quot;Say \\&quot;hi\\&quot; $5\\nnow&quot;\" />\n"), "{vue}");
 }
 
 #[test]

From a132eb376866521bd6f69b8fb15b083bb3a38ebe Mon Sep 17 00:00:00 2001
From: phonedu <135960865+phonedu@users.noreply.github.com>
Date: Thu, 22 Oct 2026 19:52:58 +0800
Subject: [PATCH 3/8] M6: fix Vue bindings, instance guards and slot catalogs

Vue connected templates keep a string's JS quotes inside bound attributes, so `:title={title}` becomes `:title="&quot;Buy&quot;"` rather than a bare identifier; static attributes take plain text. Nested instances no longer lose a boolean `v-if` guard, instance swaps render through `<component :is>`, slot names stay distinct when their idents lowercase alike, slot content CSS reaches the parent stylesheet, and text defaults escape `</script>` in the script block. The five locale catalogs the Vue key rename missed (bn, fi, ka, nl, pl) are updated, and the docs list Leptos/Vue consistently.
---
 crates/engine/src/code_connect.rs            | 68 +++++++++++++++---
 crates/engine/src/code_connect_tests.rs      | 23 ++++--
 crates/engine/src/codegen.rs                 | 40 ++++++++---
 crates/engine/src/component_codegen.rs       | 72 ++++++++++++++-----
 crates/engine/src/component_codegen_tests.rs |  4 ++
 crates/engine/src/vue_codegen_tests.rs       | 75 ++++++++++++++++++++
 crates/ui-egui/locales/bn.toml               |  2 +-
 crates/ui-egui/locales/fi.toml               |  2 +-
 crates/ui-egui/locales/ka.toml               |  2 +-
 crates/ui-egui/locales/nl.toml               |  2 +-
 crates/ui-egui/locales/pl.toml               |  2 +-
 docs/file-format-parity.md                   |  2 +-
 docs/gaps.md                                 |  2 +-
 docs/mcp.md                                  |  9 +--
 14 files changed, 252 insertions(+), 53 deletions(-)

diff --git a/crates/engine/src/code_connect.rs b/crates/engine/src/code_connect.rs
index edbae279..3553438c 100644
--- a/crates/engine/src/code_connect.rs
+++ b/crates/engine/src/code_connect.rs
@@ -184,6 +184,38 @@ fn expr(doc: &Document, c: &Component, p: &Param, v: &Value, lang: CodeLang) ->
     }
 }
 
+/// Whether the placeholder sits in a Vue bound attribute (`:name`, `v-bind:name`, `@event` or a
+/// `v-*` directive) rather than a static one. `None` when it isn't in an attribute at all.
+fn vue_bound_attribute(out: &str) -> Option<bool> {
+    let end = out.trim_end();
+    let after = end.strip_suffix('"').unwrap_or(end).trim_end();
+    let eq = after.rfind('=')?;
+    let before = after[..eq].trim_end();
+    let name: String = before
+        .chars()
+        .rev()
+        .take_while(|c| c.is_ascii_alphanumeric() || matches!(c, '-' | '_' | ':' | '@' | '.' | '[' | ']'))
+        .collect::<Vec<_>>()
+        .into_iter()
+        .rev()
+        .collect();
+    if name.is_empty() {
+        return None;
+    }
+    Some(name.starts_with(':') || name.starts_with("v-bind:") || name.starts_with('@') || name.starts_with("v-on:") || name.starts_with("v-"))
+}
+
+/// An expression written into a double-quoted HTML attribute: its own quotes and markup become
+/// entities, so Vue's parser hands the expression its string literal intact.
+fn html_attr_expr(e: &str) -> String {
+    e.replace('&', "&amp;").replace('"', "&quot;").replace('<', "&lt;")
+}
+
+/// Literal text written into a double-quoted HTML attribute.
+fn html_attr_text(s: &str) -> String {
+    s.replace('&', "&amp;").replace('"', "&quot;").replace('<', "&lt;")
+}
+
 /// `link`'s template with `values` (one per parameter of `c`), every line prefixed by `pad`.
 pub(crate) fn render(doc: &Document, c: &Component, values: &[(String, Value)], link: &CodeLink, lang: CodeLang, pad: &str) -> String {
     // A template that skipped `check` (a hand-edited file) and is far too long stays as written:
@@ -199,16 +231,34 @@ pub(crate) fn render(doc: &Document, c: &Component, values: &[(String, Value)],
                     let e = expr(doc, c, p, v, lang);
                     // JSX and `view!`: a plain string reads best as an attribute value, anything
                     // else is an expression in braces (JSX attribute strings have no escapes).
-                    // A Vue binding takes a quoted value. A plain string literal brings its own
-                    // quotes; the template's own quote, when it wrote one, ends it; anything else
-                    // is wrapped here, and a quote inside is escaped for the attribute.
+                    // Vue's bound attributes take an expression, so a string keeps its JS quotes
+                    // inside the attribute (as entities); a static attribute takes plain text.
                     if lang == CodeLang::Vue {
-                        if !out.ends_with('"') && e.starts_with('"') && !e.contains('\\') {
-                            out.push_str(&e);
-                        } else if out.ends_with('"') {
-                            out.push_str(&e.replace('"', "&quot;"));
-                        } else {
-                            out.push_str(&format!("\"{}\"", e.replace('"', "&quot;")));
+                        match vue_bound_attribute(&out) {
+                            Some(true) => {
+                                let expr = html_attr_expr(&e);
+                                if out.ends_with('"') {
+                                    out.push_str(&expr);
+                                } else {
+                                    out.push('"');
+                                    out.push_str(&expr);
+                                    out.push('"');
+                                }
+                            }
+                            Some(false) => {
+                                let text = match &p.kind {
+                                    ParamKind::Text | ParamKind::Variant(_) => html_attr_text(v.as_str().unwrap_or("")),
+                                    _ => e.clone(),
+                                };
+                                if out.ends_with('"') {
+                                    out.push_str(&text);
+                                } else {
+                                    out.push('"');
+                                    out.push_str(&text);
+                                    out.push('"');
+                                }
+                            }
+                            None => out.push_str(&e),
                         }
                     } else {
                         let markup = matches!(lang, CodeLang::React | CodeLang::Leptos);
diff --git a/crates/engine/src/code_connect_tests.rs b/crates/engine/src/code_connect_tests.rs
index eb34656b..22495cc0 100644
--- a/crates/engine/src/code_connect_tests.rs
+++ b/crates/engine/src/code_connect_tests.rs
@@ -190,29 +190,40 @@ fn vue_links_are_a_default_import_with_quoted_bindings() {
     let c = card(&mut s);
     let i = idv(&ex(&mut s, "instance.create", json!({"component": c, "x": 300, "y": 0})));
     ex(&mut s, "instance.setProperties", json!({"ids": [i], "properties": {"Show dot": false, "Title": "Buy"}}));
-    // A single-file component is a default import, and a binding's value is quoted (the template
-    // writes `:prop={prop}`, so a plain string brings its own quotes).
+    // A single-file component is a default import. A bound attribute takes an expression, so a
+    // string keeps its JS quotes inside the attribute (as entities): `Buy` alone would be a
+    // variable, not the string.
     let v = ex(
         &mut s,
         "codeConnect.set",
         json!({"id": i, "language": "vue", "importPath": "@/components/Card.vue",
                "template": "<Card :title={title} :dotted={Show dot} />"}),
     );
-    let want = "import Card from \"@/components/Card.vue\";\n\n<Card :title=\"Buy\" :dotted=\"false\" />\n";
+    let want = "import Card from \"@/components/Card.vue\";\n\n<Card :title=\"&quot;Buy&quot;\" :dotted=\"false\" />\n";
     assert_eq!(v["code"], want);
     assert_eq!(code(&mut s, i, "vue"), want);
     assert_eq!(ex(&mut s, "inspect.code", json!({"id": i, "language": "vue"}))["connected"], true);
     // No template given: the generated one binds a quoted value for every property.
     ex(&mut s, "codeConnect.remove", json!({"id": c, "language": "vue"}));
     ex(&mut s, "codeConnect.set", json!({"id": c, "language": "vue", "importPath": "./Card.vue"}));
-    assert_eq!(code(&mut s, c, "vue"), "import Card from \"./Card.vue\";\n\n<Card :showDot=\"true\" :title=\"Hello\" />\n");
+    assert_eq!(code(&mut s, c, "vue"), "import Card from \"./Card.vue\";\n\n<Card :showDot=\"true\" :title=\"&quot;Hello&quot;\" />\n");
+    // A plain string attribute (no `:`) takes the text itself, and a variant binding is a string
+    // expression like any other.
+    ex(&mut s, "codeConnect.set", json!({"id": i, "language": "vue", "template": "<Card title={title} :dotted={Show dot} />"}));
+    assert_eq!(code(&mut s, i, "vue"), "import Card from \"./Card.vue\";\n\n<Card title=\"Buy\" :dotted=\"false\" />\n");
+    let (set, hover) = button(&mut s);
+    let b = idv(&ex(&mut s, "instance.create", json!({"component": hover, "x": 0, "y": 700})));
+    ex(&mut s, "codeConnect.set", json!({"id": b, "language": "vue", "template": "<Button :state={state} />"}));
+    assert_eq!(code(&mut s, b, "vue"), "<Button :state=\"&quot;Hover&quot;\" />\n");
+    assert_eq!(id_of(&ex(&mut s, "codeConnect.set", json!({"id": set}))["component"]), Some(set));
     // A string with escapes stays one value: the attribute delimiter is what gets escaped, so the
     // binding stays a single well-formed attribute.
+    ex(&mut s, "codeConnect.set", json!({"id": i, "language": "vue", "template": "<Card :title={title} :dotted={Show dot} />"}));
     ex(&mut s, "instance.setProperties", json!({"ids": [i], "properties": {"Title": "Say \"hi\""}}));
     let escaped = code(&mut s, i, "vue");
     let line = escaped.lines().find(|l| l.contains("&quot;")).unwrap_or_default();
-    assert!(line.starts_with("<Card :showDot=\"false\""), "{line}");
-    assert!(line.contains(":title=\"&quot;Say"), "{line}");
+    assert!(line.starts_with("<Card :title=\"&quot;Say"), "{line}");
+    assert!(line.contains(":dotted=\"false\""), "{line}");
     assert!(line.ends_with("\" />"), "{line}");
     // Vue is linkable; a language that isn't stays refused.
     assert!(s.execute("codeConnect.set", &json!({"id": c, "language": "css"})).is_err(), "not a code language");
diff --git a/crates/engine/src/codegen.rs b/crates/engine/src/codegen.rs
index 618d430a..4d3f8cd0 100644
--- a/crates/engine/src/codegen.rs
+++ b/crates/engine/src/codegen.rs
@@ -243,12 +243,13 @@ impl<'a> Ctx<'a> {
         depth > self.base + MAX_DEPTH
     }
 
-    /// A call for an instance below the root (`None` for other layers, or a missing main).
-    fn call(&self, n: &Node, lang: CodeLang, depth: usize) -> Option<String> {
+    /// A call for an instance below the root (`None` for other layers, or a missing main), with
+    /// the CSS its slot content generated.
+    fn call(&self, n: &Node, lang: CodeLang, depth: usize) -> Option<(String, String)> {
         if n.id == self.root || !matches!(n.kind, NodeKind::Instance { .. }) {
             return None;
         }
-        crate::component_codegen::usage(self.doc, n.id, lang, depth)
+        crate::component_codegen::usage_with_styles(self.doc, n.id, lang, depth)
     }
 }
 
@@ -619,6 +620,15 @@ pub(crate) fn class_name(name: &str, used: &mut Vec<String>) -> String {
     name
 }
 
+/// `markup`'s first element with a Vue `v-if` attribute (a call with no placing wrapper).
+fn with_v_if(markup: &str, guard: Option<&str>) -> String {
+    let Some(guard) = guard else { return markup.to_string() };
+    match markup.find('>') {
+        Some(i) => format!("{} v-if=\"{guard}\"{}", &markup[..i], &markup[i..]),
+        None => markup.to_string(),
+    }
+}
+
 fn html_escape(s: &str) -> String {
     s.replace('&', "&amp;").replace('<', "&lt;").replace('>', "&gt;").replace('\n', "<br>")
 }
@@ -777,15 +787,20 @@ impl<'c, 'a> Markup<'c, 'a> {
         if self.code() && !root && matches!(n.kind, NodeKind::Instance { .. }) {
             let at = depth + usize::from(!decls.is_empty());
             let run = if self.lang == CodeLang::Leptos { ".run()" } else { "" };
-            let inner = match self.ctx.param(n, "mainComponent") {
-                Some(p) => Some(format!("{}{{{}{run}}}\n", self.pad(at), self.ident(p))),
-                None => self.ctx.call(n, self.lang, at),
+            let (inner, css) = match self.ctx.param(n, "mainComponent") {
+                Some(p) if self.lang == CodeLang::Vue => (Some(format!("{}<component :is=\"{}\" />\n", self.pad(at), self.ident(p))), String::new()),
+                Some(p) => (Some(format!("{}{{{}{run}}}\n", self.pad(at), self.ident(p))), String::new()),
+                None => self.ctx.call(n, self.lang, at).map_or((None, String::new()), |(code, css)| (Some(code), css)),
             };
+            self.styles.push_str(&css);
             if let Some(inner) = inner {
+                // A Vue guard set by `node` rides on the call when there is no wrapper.
+                let guard = if self.lang == CodeLang::Vue { self.v_if.take() } else { None };
                 if decls.is_empty() {
-                    self.markup.push_str(&inner);
+                    self.markup.push_str(&with_v_if(&inner, guard.as_deref()));
                 } else {
-                    self.markup.push_str(&format!("{pad}<div {attr}=\"{class}\">\n{inner}{pad}</div>\n"));
+                    let guard = guard.map(|g| format!(" v-if=\"{g}\"")).unwrap_or_default();
+                    self.markup.push_str(&format!("{pad}<div {attr}=\"{class}\"{guard}>\n{inner}{pad}</div>\n"));
                     self.rule(path, &class, decls);
                 }
                 return;
@@ -830,7 +845,10 @@ impl<'c, 'a> Markup<'c, 'a> {
                 let vue = self.lang == CodeLang::Vue;
                 let leptos = self.lang == CodeLang::Leptos;
                 let open = open("div");
-                let slot_ident = slot.map(|p| class_name(&p.ident, &mut Vec::new()));
+                let slot_ident = slot.map(|p| match self.ctx.comp {
+                    Some(c) => crate::component_codegen::slot_name(c, p),
+                    None => class_name(&p.ident, &mut Vec::new()),
+                });
                 if let Some(p) = slot.filter(|_| kids.is_empty()) {
                     let content = if leptos {
                         format!("{{{}}}.as_ref().map(|c| c.run())", self.ident(p))
@@ -938,7 +956,7 @@ fn swift_layer(ctx: &Ctx, n: &Node, depth: usize, out: &mut String, extra: &[Str
     // Nested instances are calls; an instance swap parameter is a view.
     let call = match ctx.param(n, "mainComponent").filter(|_| n.id != ctx.root) {
         Some(p) => Some(format!("{pad}{}\n", p.ident)),
-        None => ctx.call(n, CodeLang::SwiftUi, depth),
+        None => ctx.call(n, CodeLang::SwiftUi, depth).map(|(code, _)| code),
     };
     if let Some(call) = call {
         out.push_str(&call);
@@ -1111,7 +1129,7 @@ fn compose_layer(ctx: &Ctx, n: &Node, depth: usize, out: &mut String) {
     // Nested instances are calls; an instance swap parameter is a composable.
     let call = match ctx.param(n, "mainComponent").filter(|_| n.id != ctx.root) {
         Some(p) => Some(format!("{pad}{}()\n", p.ident)),
-        None => ctx.call(n, CodeLang::Compose, depth),
+        None => ctx.call(n, CodeLang::Compose, depth).map(|(code, _)| code),
     };
     if let Some(call) = call {
         out.push_str(&call);
diff --git a/crates/engine/src/component_codegen.rs b/crates/engine/src/component_codegen.rs
index 2e74f3d3..20d484bf 100644
--- a/crates/engine/src/component_codegen.rs
+++ b/crates/engine/src/component_codegen.rs
@@ -447,6 +447,12 @@ pub(crate) fn js_string(s: &str) -> String {
     serde_json::to_string(&s).unwrap_or_else(|_| "\"\"".into())
 }
 
+/// A JavaScript string literal safe inside a Vue single-file component: `<` is escaped, so a
+/// default containing `</script>` can't close the `<script setup>` block early.
+pub(crate) fn vue_string(s: &str) -> String {
+    js_string(s).replace('<', "\\u003C")
+}
+
 /// The type name of a component (a variant's set) by id.
 pub(crate) fn component_type(doc: &Document, comp: NodeId) -> Option<String> {
     let n = doc.node(comp).filter(|n| matches!(n.kind, NodeKind::Component { .. } | NodeKind::ComponentSet { .. }))?;
@@ -464,7 +470,8 @@ pub(crate) fn value_expr(doc: &Document, c: &Component, p: &Param, value: &Value
     let js = matches!(lang, CodeLang::React | CodeLang::Vue);
     match (&p.kind, lang) {
         (ParamKind::Boolean, _) => value.as_bool().unwrap_or(false).to_string(),
-        (ParamKind::Text, CodeLang::React | CodeLang::Vue) => js_string(value.as_str().unwrap_or("")),
+        (ParamKind::Text, CodeLang::Vue) => vue_string(value.as_str().unwrap_or("")),
+        (ParamKind::Text, CodeLang::React) => js_string(value.as_str().unwrap_or("")),
         (ParamKind::Text, CodeLang::Leptos) => rust_string(value.as_str().unwrap_or("")),
         (ParamKind::Variant(opts), CodeLang::Leptos) => {
             let i = opts.iter().position(|o| Some(o.as_str()) == value.as_str()).unwrap_or(0);
@@ -473,7 +480,10 @@ pub(crate) fn value_expr(doc: &Document, c: &Component, p: &Param, value: &Value
         (ParamKind::Text, l) => literal(value.as_str().unwrap_or(""), l == CodeLang::Compose),
         (ParamKind::Variant(opts), l) => {
             let v = value.as_str().unwrap_or("");
-            if js {
+            if l == CodeLang::Vue {
+                return vue_string(v);
+            }
+            if l == CodeLang::React {
                 return js_string(v);
             }
             let swift = l == CodeLang::SwiftUi;
@@ -484,6 +494,8 @@ pub(crate) fn value_expr(doc: &Document, c: &Component, p: &Param, value: &Value
         (ParamKind::InstanceSwap, l) => {
             let t = id_of(value).and_then(|i| component_type(doc, i));
             match (t, l) {
+                // A Vue binding takes the component itself, not an element.
+                (Some(t), CodeLang::Vue) => t,
                 (Some(t), _) if js => format!("<{t} />"),
                 (Some(t), CodeLang::Leptos) => format!("|| view! {{ <{} /> }}", rust_type(&t)),
                 (None, CodeLang::Leptos) => "|| ()".into(),
@@ -500,6 +512,19 @@ pub(crate) fn value_expr(doc: &Document, c: &Component, p: &Param, value: &Value
 
 // ------------------------------------------------------------------ instances
 
+/// The `<slot name="…">` of a slot parameter: unique among the component's slot parameters, unlike
+/// `class_name` called with a fresh list per parameter (two idents can lowercase alike).
+pub(crate) fn slot_name(c: &Component, p: &Param) -> String {
+    let mut used = Vec::new();
+    for q in c.params.iter().filter(|q| matches!(q.kind, ParamKind::Slot)) {
+        let name = class_name(&q.ident, &mut used);
+        if q.ident == p.ident {
+            return name;
+        }
+    }
+    class_name(&p.ident, &mut Vec::new())
+}
+
 /// The values an instance sets for `c`'s parameters, in order (`None` for other layers): variant
 /// values from the variant it shows, slots as whether they hold its own content.
 pub(crate) fn instance_values(doc: &Document, id: NodeId, c: &Component) -> Option<Vec<(String, Value)>> {
@@ -524,23 +549,32 @@ pub(crate) fn instance_values(doc: &Document, id: NodeId, c: &Component) -> Opti
 /// The call for instance `id` at `depth`, passing the values that differ from the defaults and the
 /// content of slots it fills (`None` when it isn't an instance of an existing component).
 pub fn usage(doc: &Document, id: NodeId, lang: CodeLang, depth: usize) -> Option<String> {
+    usage_with_styles(doc, id, lang, depth).map(|(code, _)| code)
+}
+
+/// `usage` and the CSS generated for the slot content it carries (the caller's stylesheet needs
+/// those rules; `usage` alone drops them at a snippet boundary).
+pub(crate) fn usage_with_styles(doc: &Document, id: NodeId, lang: CodeLang, depth: usize) -> Option<(String, String)> {
     let c = main_of(doc, id).and_then(|m| describe(doc, m))?;
     let values = instance_values(doc, id, &c)?;
     let pad = if matches!(lang, CodeLang::React | CodeLang::Vue) { "  ".repeat(depth) } else { indent(depth) };
     // A connected component: its real snippet. shortcut: inside a layer tree it brings no import
     // line; collect them at the top of the tree's code when people ask for it.
     if let Some(link) = crate::code_connect::link(doc, id, lang) {
-        return Some(crate::code_connect::render(doc, &c, &values, link, lang, &pad));
+        return Some((crate::code_connect::render(doc, &c, &values, link, lang, &pad), String::new()));
     }
     let slots = slots_of(doc, id);
     // (parameter, expression, whether it's a plain string literal)
     let mut args: Vec<(&str, String, bool)> = Vec::new();
+    let mut slot_css = String::new();
     for (p, (_, v)) in c.params.iter().zip(&values) {
         if let ParamKind::Slot = p.kind {
             if v.as_bool() == Some(true)
                 && let Some((layer, _)) = slots.iter().find(|(_, name)| *name == p.prop)
             {
-                args.push((&p.ident, slot_content(doc, *layer, lang, depth), false));
+                let (content, css) = slot_content(doc, *layer, lang, depth);
+                slot_css.push_str(&css);
+                args.push((&p.ident, content, false));
             }
             continue;
         }
@@ -552,7 +586,7 @@ pub fn usage(doc: &Document, id: NodeId, lang: CodeLang, depth: usize) -> Option
         args.push((&p.ident, expr, plain));
     }
     let t = &c.type_name;
-    Some(match lang {
+    let code = match lang {
         CodeLang::React | CodeLang::Leptos => {
             let leptos = lang == CodeLang::Leptos;
             // Plain strings read best as attribute values.
@@ -579,18 +613,24 @@ pub fn usage(doc: &Document, id: NodeId, lang: CodeLang, depth: usize) -> Option
             let slots: String = args
                 .iter()
                 .filter(|(name, _, _)| is_slot(name))
-                .map(|(name, expr, _)| format!("{pad}  <template #{}>\n{expr}{pad}  </template>\n", class_name(name, &mut Vec::new())))
+                .map(|(name, expr, _)| {
+                    let slot = c.params.iter().find(|q| q.ident == *name);
+                    let name = slot.map(|p| slot_name(&c, p)).unwrap_or_else(|| class_name(name, &mut Vec::new()));
+                    format!("{pad}  <template #{name}>\n{expr}{pad}  </template>\n")
+                })
                 .collect();
             if slots.is_empty() { format!("{pad}<{t}{attrs} />\n") } else { format!("{pad}<{t}{attrs}>\n{slots}{pad}</{t}>\n") }
         }
         CodeLang::SwiftUi => format!("{pad}{t}({})\n", args.iter().map(|(n, e, _)| format!("{n}: {e}")).collect::<Vec<_>>().join(", ")),
         _ => format!("{pad}{t}({})\n", args.iter().map(|(n, e, _)| format!("{n} = {e}")).collect::<Vec<_>>().join(", ")),
-    })
+    };
+    Some((code, slot_css))
 }
 
-/// The content an instance put in one of its slots, as an expression spanning lines.
-fn slot_content(doc: &Document, slot: NodeId, lang: CodeLang, depth: usize) -> String {
-    let Some(n) = doc.node(slot) else { return String::new() };
+/// The content an instance put in one of its slots, as an expression spanning lines, and the CSS
+/// its layers generated (so the caller's stylesheet keeps it).
+fn slot_content(doc: &Document, slot: NodeId, lang: CodeLang, depth: usize) -> (String, String) {
+    let Some(n) = doc.node(slot) else { return (String::new(), String::new()) };
     let ctx = Ctx { doc, root: slot, comp: None, base: depth };
     let kids = ctx.kids(n);
     match lang {
@@ -600,14 +640,14 @@ fn slot_content(doc: &Document, slot: NodeId, lang: CodeLang, depth: usize) -> S
                 m.node(k, Some(n), depth + 2, "");
             }
             let (p1, p2) = ("  ".repeat(depth), "  ".repeat(depth + 1));
-            format!("(\n{p2}<>\n{}{p2}</>\n{p1})", m.markup)
+            (format!("(\n{p2}<>\n{}{p2}</>\n{p1})", m.markup), m.styles)
         }
         CodeLang::Leptos => {
             let mut m = Markup::new(&ctx, CodeLang::Leptos);
             for k in kids {
                 m.node(k, Some(n), depth + 1, "");
             }
-            format!("|| view! {{\n{}{}}}", m.markup, indent(depth))
+            (format!("|| view! {{\n{}{}}}", m.markup, indent(depth)), m.styles)
         }
         CodeLang::Vue => {
             // Just the markup: `usage` wraps it in the `<template #name>` of that slot.
@@ -615,21 +655,21 @@ fn slot_content(doc: &Document, slot: NodeId, lang: CodeLang, depth: usize) -> S
             for k in kids {
                 m.node(k, Some(n), depth + 2, "");
             }
-            m.markup
+            (m.markup, m.styles)
         }
         CodeLang::SwiftUi => {
             let mut out = String::new();
             for k in kids {
                 swift(&ctx, k, depth + 2, &mut out, &[]);
             }
-            format!("AnyView(Group {{\n{out}{}}})", indent(depth + 1))
+            (format!("AnyView(Group {{\n{out}{}}})", indent(depth + 1)), String::new())
         }
         _ => {
             let mut out = String::new();
             for k in kids {
                 compose(&ctx, k, depth + 2, &mut out);
             }
-            format!("{{\n{out}{}}}", indent(depth + 1))
+            (format!("{{\n{out}{}}}", indent(depth + 1)), String::new())
         }
     }
 }
@@ -752,7 +792,7 @@ fn vue(doc: &Document, c: &Component) -> String {
         out.push_str("<script setup lang=\"ts\">\n\nconst props = withDefaults(\n  defineProps<{\n");
         for p in &props {
             let ty = match &p.kind {
-                ParamKind::Variant(opts) => opts.iter().map(|o| js_string(o)).collect::<Vec<_>>().join(" | "),
+                ParamKind::Variant(opts) => opts.iter().map(|o| vue_string(o)).collect::<Vec<_>>().join(" | "),
                 ParamKind::Boolean => "boolean".into(),
                 ParamKind::Text => "string".into(),
                 ParamKind::InstanceSwap | ParamKind::Slot => "unknown".into(),
diff --git a/crates/engine/src/component_codegen_tests.rs b/crates/engine/src/component_codegen_tests.rs
index 9e3e65f3..7d710ef7 100644
--- a/crates/engine/src/component_codegen_tests.rs
+++ b/crates/engine/src/component_codegen_tests.rs
@@ -220,12 +220,16 @@ fn instance_swap_properties_take_views() {
     let leptos = code(&mut s, chip, "leptos");
     assert!(leptos.contains("    #[prop(into, default = (|| view! { <HeartIcon /> }).into())] icon: ViewFn,"), "{leptos}");
     assert!(leptos.contains("{icon.run()}"), "{leptos}");
+    let vue = code(&mut s, chip, "vue");
+    assert!(vue.contains("    icon?: unknown;"), "{vue}");
+    assert!(vue.contains("<component :is=\"icon\" />"), "a swap is a component, not an element: {vue}");
     let i = idv(&ex(&mut s, "instance.create", json!({"component": chip, "x": 0, "y": 100})));
     ex(&mut s, "instance.setProperties", json!({"ids": [i], "properties": {"Icon": star}}));
     assert_eq!(component_code(&mut s, i, "react")["usage"], "<Chip icon={<StarIcon />} />\n");
     assert_eq!(component_code(&mut s, i, "swiftui")["usage"], "Chip(icon: AnyView(StarIcon()))\n");
     assert_eq!(component_code(&mut s, i, "compose")["usage"], "Chip(icon = { StarIcon() })\n");
     assert_eq!(component_code(&mut s, i, "leptos")["usage"], "<Chip icon={|| view! { <StarIcon /> }} />\n");
+    assert_eq!(component_code(&mut s, i, "vue")["usage"], "<Chip :icon=\"StarIcon\" />\n");
 }
 
 #[test]
diff --git a/crates/engine/src/vue_codegen_tests.rs b/crates/engine/src/vue_codegen_tests.rs
index d147d758..f448af81 100644
--- a/crates/engine/src/vue_codegen_tests.rs
+++ b/crates/engine/src/vue_codegen_tests.rs
@@ -182,3 +182,78 @@ fn a_keyword_property_name_stays_usable() {
     let out = vue(&mut s, c);
     assert!(out.contains("defaultValue"), "{out}");
 }
+
+#[test]
+fn a_nested_instance_keeps_its_v_if_guard() {
+    let mut s = Session::new();
+    let (card, _, _) = card(&mut s);
+    let f = idv(&ex(&mut s, "frame.create", json!({"x": 0, "y": 0, "width": 300, "height": 200, "name": "Toolbar"})));
+    let nested = idv(&ex(&mut s, "instance.create", json!({"component": card, "x": 10, "y": 10, "parent": f})));
+    let c = idv(&ex(&mut s, "component.create", json!({"ids": [f]})));
+    ex(&mut s, "component.addProperty", json!({"id": c, "name": "Show card", "type": "boolean", "default": true, "layer": nested}));
+    let out = vue(&mut s, c);
+    // The call's early return must not swallow the guard `node` put on it.
+    assert!(out.contains("v-if=\"showCard\""), "{out}");
+    assert_eq!(out.matches("v-if=\"showCard\"").count(), 1, "{out}");
+}
+
+#[test]
+fn a_text_default_cannot_close_the_script_block() {
+    let mut s = Session::new();
+    let f = idv(&ex(&mut s, "frame.create", json!({"x": 0, "y": 0, "width": 200, "height": 100, "name": "Card"})));
+    let text = idv(&ex(&mut s, "text.create", json!({"text": "Hello", "x": 0, "y": 0, "parent": f, "props": {"name": "Title"}})));
+    let c = idv(&ex(&mut s, "component.create", json!({"ids": [f]})));
+    ex(
+        &mut s,
+        "component.addProperty",
+        json!({"id": c, "name": "Title", "type": "text", "layer": text, "default": "</script><script>alert(1)</script>"}),
+    );
+    let out = vue(&mut s, c);
+    assert!(out.contains("\\u003C/script>"), "{out}");
+    assert_eq!(out.matches("</script>").count(), 1, "only the SFC's own closing tag: {out}");
+}
+
+#[test]
+fn slot_names_stay_distinct_when_idents_lowercase_alike() {
+    let mut s = Session::new();
+    let f = idv(&ex(&mut s, "frame.create", json!({"x": 0, "y": 0, "width": 300, "height": 200, "name": "Shell"})));
+    let a = idv(&ex(&mut s, "frame.create", json!({"x": 0, "y": 0, "width": 100, "height": 100, "parent": f, "name": "A"})));
+    let b = idv(&ex(&mut s, "frame.create", json!({"x": 100, "y": 0, "width": 100, "height": 100, "parent": f, "name": "B"})));
+    let c = idv(&ex(&mut s, "component.create", json!({"ids": [f]})));
+    ex(&mut s, "component.makeSlot", json!({"id": a, "name": "Foo Bar"}));
+    ex(&mut s, "component.makeSlot", json!({"id": b, "name": "Foobar"}));
+    let out = vue(&mut s, c);
+    assert!(out.contains("<slot name=\"foobar\""), "{out}");
+    assert!(out.contains("<slot name=\"foobar-2\""), "{out}");
+    // The instance's templates use the same names.
+    let g = idv(&ex(&mut s, "frame.create", json!({"x": 0, "y": 300, "width": 20, "height": 20, "name": "Badge"})));
+    let badge = idv(&ex(&mut s, "component.create", json!({"ids": [g]})));
+    let i = idv(&ex(&mut s, "instance.create", json!({"component": c, "x": 400, "y": 0})));
+    ex(&mut s, "instance.slotInsert", json!({"id": i, "slot": "Foo Bar", "component": badge, "replace": true}));
+    ex(&mut s, "instance.slotInsert", json!({"id": i, "slot": "Foobar", "component": badge, "replace": true}));
+    let usage = component_code(&mut s, i, "vue")["usage"].as_str().unwrap_or_default().to_string();
+    assert!(usage.contains("<template #foobar>"), "{usage}");
+    assert!(usage.contains("<template #foobar-2>"), "{usage}");
+}
+
+#[test]
+fn slot_content_css_reaches_the_parent_stylesheet() {
+    let mut s = Session::new();
+    let f = idv(&ex(&mut s, "frame.create", json!({"x": 0, "y": 0, "width": 300, "height": 200, "name": "Panel"})));
+    let content = idv(&ex(&mut s, "frame.create", json!({"x": 0, "y": 0, "width": 200, "height": 100, "parent": f, "name": "Content"})));
+    let panel = idv(&ex(&mut s, "component.create", json!({"ids": [f]})));
+    ex(&mut s, "component.makeSlot", json!({"id": content, "name": "Content"}));
+    let screen = idv(&ex(&mut s, "frame.create", json!({"x": 0, "y": 400, "width": 400, "height": 300, "name": "Screen"})));
+    let i = idv(&ex(&mut s, "instance.create", json!({"component": panel, "x": 10, "y": 10, "parent": screen})));
+    let slot = {
+        let doc = s.doc().unwrap();
+        crate::components::slots_of(doc, i).first().map(|(l, _)| *l).unwrap()
+    };
+    ex(&mut s, "shape.rectangle", json!({"x": 0, "y": 0, "width": 10, "height": 10, "parent": slot, "props": {"name": "Swatch", "fill": "#FF0000"}}));
+    // The layer's class rules belong to the tree that holds the instance, not to a discarded
+    // snippet: both web targets keep them in their stylesheet.
+    let out = vue(&mut s, screen);
+    assert!(out.contains(".swatch {"), "{out}");
+    assert!(out.contains("#FF0000"), "{out}");
+    assert!(code(&mut s, screen, "react").contains(".swatch {"));
+}
diff --git a/crates/ui-egui/locales/bn.toml b/crates/ui-egui/locales/bn.toml
index adedc983..88fa84ac 100644
--- a/crates/ui-egui/locales/bn.toml
+++ b/crates/ui-egui/locales/bn.toml
@@ -228,7 +228,7 @@ status = "draft — needs native review"
 "Changes on main" = "প্রধান (main)-এ পরিবর্তন"
 "Changes on the branch" = "ব্রাঞ্চে পরিবর্তন"
 "Changes unknown" = "পরিবর্তন অজ্ঞাত"
-"Choose React, Leptos, SwiftUI or Compose above to connect this component to its code." = "এই কম্পোনেন্টটিকে কোডের সাথে যুক্ত করতে উপরে React, Leptos, SwiftUI বা Compose বেছে নিন।"
+"Choose React, Leptos, Vue, SwiftUI or Compose above to connect this component to its code." = "এই কম্পোনেন্টটিকে কোডের সাথে যুক্ত করতে উপরে React, Leptos, SwiftUI বা Compose বেছে নিন।"
 "Choose another profile to change it." = "পরিবর্তন করতে অন্য একটি প্রোফাইল বেছে নিন।"
 "Choose collection" = "সংগ্রহ (collection) বেছে নিন"
 "Choose image" = "ছবি বেছে নিন"
diff --git a/crates/ui-egui/locales/fi.toml b/crates/ui-egui/locales/fi.toml
index 205a9d29..2f434140 100644
--- a/crates/ui-egui/locales/fi.toml
+++ b/crates/ui-egui/locales/fi.toml
@@ -223,7 +223,7 @@ status = "draft — needs native review"
 "Changes unknown" = "Muutokset tuntemattomia"
 "Checking the fonts installed on this computer…" = "Tarkistetaan tämän tietokoneen asennettuja fontteja…"
 "Checking the server…" = "Tarkistetaan palvelinta…"
-"Choose React, Leptos, SwiftUI or Compose above to connect this component to its code." = "Valitse yllä React, Leptos, SwiftUI tai Compose yhdistääksesi tämän komponentin sen koodiin."
+"Choose React, Leptos, Vue, SwiftUI or Compose above to connect this component to its code." = "Valitse yllä React, Leptos, SwiftUI tai Compose yhdistääksesi tämän komponentin sen koodiin."
 "Choose another profile to change it." = "Vaihda valitsemalla toinen profiili."
 "Choose collection" = "Valitse kokoelma"
 "Choose image" = "Valitse kuva"
diff --git a/crates/ui-egui/locales/ka.toml b/crates/ui-egui/locales/ka.toml
index 5b73b4fb..d49b2974 100644
--- a/crates/ui-egui/locales/ka.toml
+++ b/crates/ui-egui/locales/ka.toml
@@ -230,7 +230,7 @@ status = "draft — reviewed by a native speaker, awaiting a maintainer's approv
 "Changes on main" = "ცვლილებები მთავარში"
 "Changes on the branch" = "ცვლილებები განშტოებაში"
 "Changes unknown" = "ცვლილებები უცნობია"
-"Choose React, Leptos, SwiftUI or Compose above to connect this component to its code." = "ამ კომპონენტის კოდთან დასაკავშირებლად ზემოთ აირჩიეთ React, Leptos, SwiftUI ან Compose."
+"Choose React, Leptos, Vue, SwiftUI or Compose above to connect this component to its code." = "ამ კომპონენტის კოდთან დასაკავშირებლად ზემოთ აირჩიეთ React, Leptos, SwiftUI ან Compose."
 "Choose another profile to change it." = "მის შესაცვლელად აირჩიეთ სხვა პროფილი."
 "Choose collection" = "კოლექციის არჩევა"
 "Choose image" = "გამოსახულების არჩევა"
diff --git a/crates/ui-egui/locales/nl.toml b/crates/ui-egui/locales/nl.toml
index 54851043..69a0373e 100644
--- a/crates/ui-egui/locales/nl.toml
+++ b/crates/ui-egui/locales/nl.toml
@@ -223,7 +223,7 @@ status = "draft — needs native review"
 "Changes unknown" = "Onbekende wijzigingen"
 "Checking the fonts installed on this computer…" = "De lettertypen op deze computer worden gecontroleerd…"
 "Checking the server…" = "Server controleren…"
-"Choose React, Leptos, SwiftUI or Compose above to connect this component to its code." = "Kies hierboven React, Leptos, SwiftUI of Compose om dit component aan zijn code te koppelen."
+"Choose React, Leptos, Vue, SwiftUI or Compose above to connect this component to its code." = "Kies hierboven React, Leptos, SwiftUI of Compose om dit component aan zijn code te koppelen."
 "Choose another profile to change it." = "Kies een ander profiel om dit te wijzigen."
 "Choose collection" = "Kies een verzameling"
 "Choose image" = "Afbeelding kiezen"
diff --git a/crates/ui-egui/locales/pl.toml b/crates/ui-egui/locales/pl.toml
index 23f7dee8..46e3a85e 100644
--- a/crates/ui-egui/locales/pl.toml
+++ b/crates/ui-egui/locales/pl.toml
@@ -226,7 +226,7 @@ status = "draft — needs native review"
 "Changes on main" = "Zmiany w gałęzi głównej"
 "Changes on the branch" = "Zmiany w gałęzi"
 "Changes unknown" = "Nieznane zmiany"
-"Choose React, Leptos, SwiftUI or Compose above to connect this component to its code." = "Wybierz React, Leptos, SwiftUI lub Compose powyżej, aby połączyć ten komponent z jego kodem."
+"Choose React, Leptos, Vue, SwiftUI or Compose above to connect this component to its code." = "Wybierz React, Leptos, SwiftUI lub Compose powyżej, aby połączyć ten komponent z jego kodem."
 "Choose another profile to change it." = "Wybierz inny profil, aby go zmienić."
 "Choose collection" = "Wybierz kolekcję"
 "Choose image" = "Wybierz obraz"
diff --git a/docs/file-format-parity.md b/docs/file-format-parity.md
index 85eb2648..4cdf9561 100644
--- a/docs/file-format-parity.md
+++ b/docs/file-format-parity.md
@@ -55,7 +55,7 @@ export limit, not a native document nesting limit.
 | PDF | yes | yes | one page per frame, real selectable text in subset fonts, links, vectors and gradients as vectors, effects as images; bleed, crop/bleed marks, page boxes, naive CMYK; checked by rendering the PDF back against PNG exports; explicit depth-limit refusal | CMYK output intent 2–4 |
 | WebP | — | yes (ours) | | — |
 | Copy as CSS / SVG / PNG / text / link | yes | yes | Copy as PNG: the whole selection at 2x | — |
-| Dev Mode code (CSS, iOS SwiftUI, Android Compose) | yes | yes, plus HTML, React and Vue | see [dev-mode-parity](dev-mode-parity.md) | — |
+| Dev Mode code (CSS, iOS SwiftUI, Android Compose) | yes | yes, plus HTML, React, Leptos and Vue | see [dev-mode-parity](dev-mode-parity.md) | — |
 | `.fig` ("Save local copy") | yes | **experimental** | the whole file, also as a copy from File ▸ Save as… (the document keeps its `.figcraft` path and unsaved state); see [Export to `.fig`](#export-to-fig-experimental). Round trips through our own importer; written files checked by opening them in other software: layers, fills, gradients, strokes, shadows, vectors, components and text draw as in FigCraft; resized and scaled instances keep their size and lay their layers out for it, variables with their modes and colour bindings resolve there (a frame set to another mode shows that mode's colours, also inside instances), colour, text, effect and grid styles are listed, and variable-width strokes that are the same on both sides of the path draw with their width | 5–15 (non-colour bindings as bindings, checks of effects, images and prototypes, and against real files) |
 
 ### Export to `.fig` (experimental)
diff --git a/docs/gaps.md b/docs/gaps.md
index 778364d8..94eec3dc 100644
--- a/docs/gaps.md
+++ b/docs/gaps.md
@@ -356,7 +356,7 @@ No alpha blockers: the alpha gate in [`roadmap.md`](roadmap.md#alpha-gate) passe
 
 ### 16. Dev Mode: the tail after dev resources
 - **Landed (2026-10-11):** code connect: a component or set links to its code component per
-  language (React, Vue, SwiftUI, Compose): an import path, the name and a template whose `{property}`
+  language (React, Leptos, Vue, SwiftUI, Compose): an import path, the name and a template whose `{property}`
   and `{property ? "a" : "b"}` placeholders take the instance's values, escaped per language and
   never executed. `inspect.code`, `inspect.componentCode` and the Inspect panel show that snippet
   instead of generated code (inside generated layer trees too); the panel's Connect to code edits
diff --git a/docs/mcp.md b/docs/mcp.md
index 95d7b460..f8f597a9 100644
--- a/docs/mcp.md
+++ b/docs/mcp.md
@@ -1291,7 +1291,7 @@ permissions: without it nothing is downloaded); `plugin.directory.publish {path
   `:prop="value"`. On an instance (or a layer tree containing
   instances) each instance is a call passing only the values it changes, e.g. `<Button
   state="Hover" label="Buy" />`, `<Button state=ButtonState::Hover label="Buy" />`,
-  `<Button :state="Hover" />`, `Button(state:
+  `<Button state="Hover" />`, `Button(state:
   .hover, label: "Buy")`, `Button(state = ButtonState.Hover, label = "Buy")`. Names are escaped and
   unique (keywords get a suffix, `default` → `defaultValue`, Rust's `type` → `type_`; Leptos names
   are snake_case; names that would shadow framework types get one too, `Text` → `TextComponent`). `inspect.componentCode
@@ -1303,9 +1303,10 @@ permissions: without it nothing is downloaded); `plugin.directory.publish {path
   name and a call passing every property) → `{component, language, code, unknown}`. Templates are
   text, never executed: `{property}` (its name or parameter name) is the instance's value escaped
   for the language (React and Leptos keep the markup's braces, so `size={size}` gives
-  `size="Large"` and `disabled={disabled}` gives `disabled={true}`; a Vue binding is quoted
-  instead, so `:size={size}` gives `:size="Large"` and `:disabled={disabled}` gives
-  `:disabled="true"` — write the placeholder without quotes and let the value bring them; a
+  `size="Large"` and `disabled={disabled}` gives `disabled={true}`; a Vue binding takes an
+  expression, so `:size={size}` gives `:size="&quot;Large&quot;"` and `:disabled={disabled}` gives
+  `:disabled="true"` — the string keeps its JS quotes as entities, and a static attribute
+  (`size={size}`) takes plain text; a
   component swap is the component itself, `:icon={icon}` giving `:icon="Icon"`; a string that needs
   escapes keeps them inside the value, where the attribute's own quotes become `&quot;`; Leptos
   imports with `use

From ae92735daea3e31f4571c1f09224e44299ad17b1 Mon Sep 17 00:00:00 2001
From: phonedu <135960865+phonedu@users.noreply.github.com>
Date: Thu, 22 Oct 2026 20:28:04 +0800
Subject: [PATCH 4/8] M6: harden Vue attribute and slot output

Keep single-quoted attribute delimiters, render text placeholders as text (not quoted strings), skip a > inside an attribute value when placing v-if (and insert before a self-closing slash), give slot content a per-slot class prefix so repeated layer names stay distinct, use a binding name no generated prop can shadow, and add Vue to the five translations that still listed only the older languages.
---
 crates/engine/src/code_connect.rs       | 69 ++++++++++++++++++-------
 crates/engine/src/code_connect_tests.rs |  7 +++
 crates/engine/src/codegen.rs            | 40 ++++++++++++--
 crates/engine/src/component_codegen.rs  | 15 ++++--
 crates/engine/src/vue_codegen_tests.rs  | 55 ++++++++++++++++++--
 crates/ui-egui/locales/bn.toml          |  2 +-
 crates/ui-egui/locales/fi.toml          |  2 +-
 crates/ui-egui/locales/ka.toml          |  2 +-
 crates/ui-egui/locales/nl.toml          |  2 +-
 crates/ui-egui/locales/pl.toml          |  2 +-
 10 files changed, 158 insertions(+), 38 deletions(-)

diff --git a/crates/engine/src/code_connect.rs b/crates/engine/src/code_connect.rs
index 3553438c..eeaef08a 100644
--- a/crates/engine/src/code_connect.rs
+++ b/crates/engine/src/code_connect.rs
@@ -184,12 +184,21 @@ fn expr(doc: &Document, c: &Component, p: &Param, v: &Value, lang: CodeLang) ->
     }
 }
 
-/// Whether the placeholder sits in a Vue bound attribute (`:name`, `v-bind:name`, `@event` or a
-/// `v-*` directive) rather than a static one. `None` when it isn't in an attribute at all.
-fn vue_bound_attribute(out: &str) -> Option<bool> {
+/// Where a placeholder sits in a Vue template: whether the attribute is bound, and the quote the
+/// template already opened (if any). `None` when it isn't in an attribute at all.
+fn vue_attribute(out: &str) -> Option<(bool, Option<char>)> {
     let end = out.trim_end();
-    let after = end.strip_suffix('"').unwrap_or(end).trim_end();
+    let (after, quote) = match end.chars().last() {
+        Some(q @ ('"' | '\'')) => (&end[..end.len() - q.len_utf8()], Some(q)),
+        _ => (end, None),
+    };
+    let after = after.trim_end();
     let eq = after.rfind('=')?;
+    // The placeholder must follow the `=` (or its opening quote) directly; text after a closed
+    // attribute (`<Card title='Buy'>`) is template content, not an attribute value.
+    if !after[eq + 1..].trim().is_empty() {
+        return None;
+    }
     let before = after[..eq].trim_end();
     let name: String = before
         .chars()
@@ -202,18 +211,32 @@ fn vue_bound_attribute(out: &str) -> Option<bool> {
     if name.is_empty() {
         return None;
     }
-    Some(name.starts_with(':') || name.starts_with("v-bind:") || name.starts_with('@') || name.starts_with("v-on:") || name.starts_with("v-"))
+    let bound = name.starts_with(':') || name.starts_with("v-bind:") || name.starts_with('@') || name.starts_with("v-on:") || name.starts_with("v-");
+    Some((bound, quote))
 }
 
-/// An expression written into a double-quoted HTML attribute: its own quotes and markup become
-/// entities, so Vue's parser hands the expression its string literal intact.
-fn html_attr_expr(e: &str) -> String {
-    e.replace('&', "&amp;").replace('"', "&quot;").replace('<', "&lt;")
+/// An expression written into an HTML attribute opened with `quote`: its own delimiter and markup
+/// become entities, so Vue's parser hands the expression its string literal intact.
+fn html_attr_expr(e: &str, quote: Option<char>) -> String {
+    let e = e.replace('&', "&amp;").replace('<', "&lt;");
+    match quote {
+        Some('\'') => e.replace('\'', "&#39;"),
+        _ => e.replace('"', "&quot;"),
+    }
 }
 
-/// Literal text written into a double-quoted HTML attribute.
-fn html_attr_text(s: &str) -> String {
-    s.replace('&', "&amp;").replace('"', "&quot;").replace('<', "&lt;")
+/// Literal text written into an HTML attribute opened with `quote`.
+fn html_attr_text(s: &str, quote: Option<char>) -> String {
+    let s = s.replace('&', "&amp;").replace('<', "&lt;");
+    match quote {
+        Some('\'') => s.replace('\'', "&#39;"),
+        _ => s.replace('"', "&quot;"),
+    }
+}
+
+/// Literal text in Vue template content: braces would start an interpolation, so they are escaped.
+fn html_text(s: &str) -> String {
+    s.replace('&', "&amp;").replace('<', "&lt;").replace('>', "&gt;").replace('{', "&#123;").replace('}', "&#125;")
 }
 
 /// `link`'s template with `values` (one per parameter of `c`), every line prefixed by `pad`.
@@ -234,10 +257,10 @@ pub(crate) fn render(doc: &Document, c: &Component, values: &[(String, Value)],
                     // Vue's bound attributes take an expression, so a string keeps its JS quotes
                     // inside the attribute (as entities); a static attribute takes plain text.
                     if lang == CodeLang::Vue {
-                        match vue_bound_attribute(&out) {
-                            Some(true) => {
-                                let expr = html_attr_expr(&e);
-                                if out.ends_with('"') {
+                        match vue_attribute(&out) {
+                            Some((true, quote)) => {
+                                let expr = html_attr_expr(&e, quote);
+                                if quote.is_some() {
                                     out.push_str(&expr);
                                 } else {
                                     out.push('"');
@@ -245,12 +268,12 @@ pub(crate) fn render(doc: &Document, c: &Component, values: &[(String, Value)],
                                     out.push('"');
                                 }
                             }
-                            Some(false) => {
+                            Some((false, quote)) => {
                                 let text = match &p.kind {
-                                    ParamKind::Text | ParamKind::Variant(_) => html_attr_text(v.as_str().unwrap_or("")),
+                                    ParamKind::Text | ParamKind::Variant(_) => html_attr_text(v.as_str().unwrap_or(""), quote),
                                     _ => e.clone(),
                                 };
-                                if out.ends_with('"') {
+                                if quote.is_some() {
                                     out.push_str(&text);
                                 } else {
                                     out.push('"');
@@ -258,7 +281,13 @@ pub(crate) fn render(doc: &Document, c: &Component, values: &[(String, Value)],
                                     out.push('"');
                                 }
                             }
-                            None => out.push_str(&e),
+                            None => {
+                                let text = match &p.kind {
+                                    ParamKind::Text | ParamKind::Variant(_) => html_text(v.as_str().unwrap_or("")),
+                                    _ => e.clone(),
+                                };
+                                out.push_str(&text);
+                            }
                         }
                     } else {
                         let markup = matches!(lang, CodeLang::React | CodeLang::Leptos);
diff --git a/crates/engine/src/code_connect_tests.rs b/crates/engine/src/code_connect_tests.rs
index 22495cc0..33f442d9 100644
--- a/crates/engine/src/code_connect_tests.rs
+++ b/crates/engine/src/code_connect_tests.rs
@@ -225,6 +225,13 @@ fn vue_links_are_a_default_import_with_quoted_bindings() {
     assert!(line.starts_with("<Card :title=\"&quot;Say"), "{line}");
     assert!(line.contains(":dotted=\"false\""), "{line}");
     assert!(line.ends_with("\" />"), "{line}");
+    // A single-quoted attribute keeps its delimiter (the expression's double quotes stay), and a
+    // placeholder in template content is text, not a quoted string.
+    ex(&mut s, "instance.setProperties", json!({"ids": [i], "properties": {"Title": "Buy"}}));
+    ex(&mut s, "codeConnect.set", json!({"id": i, "language": "vue", "template": "<Card :title='{title}' :dotted='{Show dot}' />"}));
+    assert_eq!(code(&mut s, i, "vue"), "import Card from \"./Card.vue\";\n\n<Card :title='\"Buy\"' :dotted='false' />\n");
+    ex(&mut s, "codeConnect.set", json!({"id": i, "language": "vue", "template": "<Card title='{title}'>{title}</Card>"}));
+    assert_eq!(code(&mut s, i, "vue"), "import Card from \"./Card.vue\";\n\n<Card title='Buy'>Buy</Card>\n");
     // Vue is linkable; a language that isn't stays refused.
     assert!(s.execute("codeConnect.set", &json!({"id": c, "language": "css"})).is_err(), "not a code language");
     assert!(s.execute("codeConnect.set", &json!({"id": c, "language": "vue", "importPath": "a b"})).is_err(), "no spaces in a path");
diff --git a/crates/engine/src/codegen.rs b/crates/engine/src/codegen.rs
index 4d3f8cd0..8b4ad015 100644
--- a/crates/engine/src/codegen.rs
+++ b/crates/engine/src/codegen.rs
@@ -620,13 +620,33 @@ pub(crate) fn class_name(name: &str, used: &mut Vec<String>) -> String {
     name
 }
 
+/// The index of `markup`'s first tag-closing `>`, skipping `>` inside quoted attribute values.
+fn tag_end(markup: &str) -> Option<usize> {
+    let mut quote = None;
+    for (i, c) in markup.char_indices() {
+        match quote {
+            Some(q) => {
+                if c == q {
+                    quote = None;
+                }
+            }
+            None => match c {
+                '"' | '\'' => quote = Some(c),
+                '>' => return Some(i),
+                _ => {}
+            },
+        }
+    }
+    None
+}
+
 /// `markup`'s first element with a Vue `v-if` attribute (a call with no placing wrapper).
 fn with_v_if(markup: &str, guard: Option<&str>) -> String {
     let Some(guard) = guard else { return markup.to_string() };
-    match markup.find('>') {
-        Some(i) => format!("{} v-if=\"{guard}\"{}", &markup[..i], &markup[i..]),
-        None => markup.to_string(),
-    }
+    let Some(end) = tag_end(markup) else { return markup.to_string() };
+    let before = markup[..end].trim_end();
+    let at = if before.ends_with('/') { before.len() - 1 } else { end };
+    format!("{} v-if=\"{guard}\"{}", &markup[..at], &markup[at..])
 }
 
 fn html_escape(s: &str) -> String {
@@ -678,6 +698,9 @@ pub(crate) struct Markup<'c, 'a> {
     /// A Vue `v-if` guard for the element about to be written: Vue templates can't wrap an
     /// element in an expression, so a boolean parameter's layer carries the condition itself.
     v_if: Option<String>,
+    /// A prefix for every generated class name (slot content joins the caller's stylesheet, where
+    /// two slots' layer names may repeat).
+    pub class_prefix: Option<String>,
     /// Each layer's path in the tree (names with sibling counts), class and declarations, so
     /// variants can be compared layer by layer.
     pub rules: Vec<(String, String, String)>,
@@ -695,6 +718,7 @@ impl<'c, 'a> Markup<'c, 'a> {
             root_class: None,
             root_attrs: String::new(),
             v_if: None,
+            class_prefix: None,
             rules: Vec::new(),
         }
     }
@@ -756,7 +780,13 @@ impl<'c, 'a> Markup<'c, 'a> {
                 self.used.push(c.clone());
                 c
             }
-            None => class_name(&n.name, &mut self.used),
+            None => {
+                let class = class_name(&n.name, &mut self.used);
+                match &self.class_prefix {
+                    Some(prefix) => format!("{prefix}{class}"),
+                    None => class,
+                }
+            }
         };
         let pad = self.pad(depth);
         let attr = if self.lang == CodeLang::React { "className" } else { "class" };
diff --git a/crates/engine/src/component_codegen.rs b/crates/engine/src/component_codegen.rs
index 20d484bf..e1b77ff6 100644
--- a/crates/engine/src/component_codegen.rs
+++ b/crates/engine/src/component_codegen.rs
@@ -572,7 +572,8 @@ pub(crate) fn usage_with_styles(doc: &Document, id: NodeId, lang: CodeLang, dept
             if v.as_bool() == Some(true)
                 && let Some((layer, _)) = slots.iter().find(|(_, name)| *name == p.prop)
             {
-                let (content, css) = slot_content(doc, *layer, lang, depth);
+                let prefix = format!("slot-{}-", slot_name(&c, p));
+                let (content, css) = slot_content(doc, *layer, lang, depth, &prefix);
                 slot_css.push_str(&css);
                 args.push((&p.ident, content, false));
             }
@@ -628,14 +629,16 @@ pub(crate) fn usage_with_styles(doc: &Document, id: NodeId, lang: CodeLang, dept
 }
 
 /// The content an instance put in one of its slots, as an expression spanning lines, and the CSS
-/// its layers generated (so the caller's stylesheet keeps it).
-fn slot_content(doc: &Document, slot: NodeId, lang: CodeLang, depth: usize) -> (String, String) {
+/// its layers generated (so the caller's stylesheet keeps it). `prefix` keeps two slots' class
+/// names apart when their layers share a name.
+fn slot_content(doc: &Document, slot: NodeId, lang: CodeLang, depth: usize, prefix: &str) -> (String, String) {
     let Some(n) = doc.node(slot) else { return (String::new(), String::new()) };
     let ctx = Ctx { doc, root: slot, comp: None, base: depth };
     let kids = ctx.kids(n);
     match lang {
         CodeLang::React => {
             let mut m = Markup::new(&ctx, CodeLang::React);
+            m.class_prefix = Some(prefix.to_string());
             for k in kids {
                 m.node(k, Some(n), depth + 2, "");
             }
@@ -644,6 +647,7 @@ fn slot_content(doc: &Document, slot: NodeId, lang: CodeLang, depth: usize) -> (
         }
         CodeLang::Leptos => {
             let mut m = Markup::new(&ctx, CodeLang::Leptos);
+            m.class_prefix = Some(prefix.to_string());
             for k in kids {
                 m.node(k, Some(n), depth + 1, "");
             }
@@ -652,6 +656,7 @@ fn slot_content(doc: &Document, slot: NodeId, lang: CodeLang, depth: usize) -> (
         CodeLang::Vue => {
             // Just the markup: `usage` wraps it in the `<template #name>` of that slot.
             let mut m = Markup::new(&ctx, CodeLang::Vue);
+            m.class_prefix = Some(prefix.to_string());
             for k in kids {
                 m.node(k, Some(n), depth + 2, "");
             }
@@ -789,7 +794,9 @@ fn vue(doc: &Document, c: &Component) -> String {
     let props: Vec<&Param> = c.params.iter().filter(|p| !matches!(p.kind, ParamKind::Slot)).collect();
     let mut out = String::new();
     if !props.is_empty() {
-        out.push_str("<script setup lang=\"ts\">\n\nconst props = withDefaults(\n  defineProps<{\n");
+        // `__props` can't be a generated prop name (idents are camelCase words), so a property
+        // named `Props` isn't shadowed by the binding.
+        out.push_str("<script setup lang=\"ts\">\n\nconst __props = withDefaults(\n  defineProps<{\n");
         for p in &props {
             let ty = match &p.kind {
                 ParamKind::Variant(opts) => opts.iter().map(|o| vue_string(o)).collect::<Vec<_>>().join(" | "),
diff --git a/crates/engine/src/vue_codegen_tests.rs b/crates/engine/src/vue_codegen_tests.rs
index f448af81..95221b45 100644
--- a/crates/engine/src/vue_codegen_tests.rs
+++ b/crates/engine/src/vue_codegen_tests.rs
@@ -58,7 +58,7 @@ fn components_take_their_properties_as_props() {
     let out = vue(&mut s, c);
     // Typed props with their defaults, and the template below.
     assert!(out.starts_with("<script setup lang=\"ts\">\n"), "{out}");
-    assert!(out.contains("const props = withDefaults(\n  defineProps<{\n"), "{out}");
+    assert!(out.contains("withDefaults(\n  defineProps<{\n"), "{out}");
     assert!(out.contains("showDot?: boolean;"), "{out}");
     assert!(out.contains("title?: string;"), "{out}");
     assert!(out.contains("showDot: true,"), "{out}");
@@ -183,18 +183,38 @@ fn a_keyword_property_name_stays_usable() {
     assert!(out.contains("defaultValue"), "{out}");
 }
 
+#[test]
+fn a_property_named_props_is_not_shadowed() {
+    let mut s = Session::new();
+    let f = idv(&ex(&mut s, "frame.create", json!({"x": 0, "y": 0, "width": 200, "height": 100, "name": "Card"})));
+    let text = idv(&ex(&mut s, "text.create", json!({"text": "Hello", "x": 0, "y": 0, "parent": f, "props": {"name": "Label"}})));
+    let c = idv(&ex(&mut s, "component.create", json!({"ids": [f]})));
+    ex(&mut s, "component.addProperty", json!({"id": c, "name": "Props", "type": "text", "layer": text}));
+    let out = vue(&mut s, c);
+    // No top-level `const props` that the template would resolve to instead of the property.
+    assert!(!out.contains("const props"), "{out}");
+    assert!(out.contains("props?: string;"), "{out}");
+    assert!(out.contains("{{ props }}"), "{out}");
+}
+
 #[test]
 fn a_nested_instance_keeps_its_v_if_guard() {
     let mut s = Session::new();
     let (card, _, _) = card(&mut s);
     let f = idv(&ex(&mut s, "frame.create", json!({"x": 0, "y": 0, "width": 300, "height": 200, "name": "Toolbar"})));
+    ex(&mut s, "layout.add", json!({"ids": [f], "direction": "vertical"}));
     let nested = idv(&ex(&mut s, "instance.create", json!({"component": card, "x": 10, "y": 10, "parent": f})));
     let c = idv(&ex(&mut s, "component.create", json!({"ids": [f]})));
     ex(&mut s, "component.addProperty", json!({"id": c, "name": "Show card", "type": "boolean", "default": true, "layer": nested}));
+    ex(&mut s, "instance.setProperties", json!({"ids": [nested], "properties": {"Title": "a > b"}}));
     let out = vue(&mut s, c);
-    // The call's early return must not swallow the guard `node` put on it.
+    // The call's early return must not swallow the guard `node` put on it, and the `>` inside a
+    // quoted value must not be mistaken for the tag's end.
     assert!(out.contains("v-if=\"showCard\""), "{out}");
     assert_eq!(out.matches("v-if=\"showCard\"").count(), 1, "{out}");
+    let line = out.lines().find(|l| l.contains("v-if=\"showCard\"")).unwrap_or_default();
+    assert!(line.contains("title=\"a &gt; b\"") || line.contains("title=\"a > b\""), "{out}");
+    assert!(line.contains("v-if=\"showCard\" />"), "the guard sits before the self-closing slash: {line}");
 }
 
 #[test]
@@ -253,7 +273,34 @@ fn slot_content_css_reaches_the_parent_stylesheet() {
     // The layer's class rules belong to the tree that holds the instance, not to a discarded
     // snippet: both web targets keep them in their stylesheet.
     let out = vue(&mut s, screen);
-    assert!(out.contains(".swatch {"), "{out}");
+    assert!(out.contains(".slot-content-swatch {"), "{out}");
     assert!(out.contains("#FF0000"), "{out}");
-    assert!(code(&mut s, screen, "react").contains(".swatch {"));
+    assert!(code(&mut s, screen, "react").contains(".slot-content-swatch {"));
+}
+
+#[test]
+fn slot_content_classes_are_unique_across_slots() {
+    let mut s = Session::new();
+    let f = idv(&ex(&mut s, "frame.create", json!({"x": 0, "y": 0, "width": 300, "height": 200, "name": "Panel"})));
+    let one = idv(&ex(&mut s, "frame.create", json!({"x": 0, "y": 0, "width": 100, "height": 100, "parent": f, "name": "One"})));
+    let two = idv(&ex(&mut s, "frame.create", json!({"x": 100, "y": 0, "width": 100, "height": 100, "parent": f, "name": "Two"})));
+    let panel = idv(&ex(&mut s, "component.create", json!({"ids": [f]})));
+    ex(&mut s, "component.makeSlot", json!({"id": one, "name": "One"}));
+    ex(&mut s, "component.makeSlot", json!({"id": two, "name": "Two"}));
+    let screen = idv(&ex(&mut s, "frame.create", json!({"x": 0, "y": 400, "width": 400, "height": 300, "name": "Screen"})));
+    let i = idv(&ex(&mut s, "instance.create", json!({"component": panel, "x": 10, "y": 10, "parent": screen})));
+    let slots = {
+        let doc = s.doc().unwrap();
+        crate::components::slots_of(doc, i)
+    };
+    for (name, fill) in [("One", "#FF0000"), ("Two", "#0000FF")] {
+        let slot = slots.iter().find(|(_, n)| n.as_str() == name).map(|(l, _)| *l).unwrap();
+        ex(&mut s, "shape.rectangle", json!({"x": 0, "y": 0, "width": 10, "height": 10, "parent": slot, "props": {"name": "Swatch", "fill": fill}}));
+    }
+    let out = vue(&mut s, screen);
+    // Same layer name in two slots: each slot's rules keep their own class.
+    assert!(out.contains(".slot-one-swatch {"), "{out}");
+    assert!(out.contains(".slot-two-swatch {"), "{out}");
+    assert!(out.contains("#FF0000"), "{out}");
+    assert!(out.contains("#0000FF"), "{out}");
 }
diff --git a/crates/ui-egui/locales/bn.toml b/crates/ui-egui/locales/bn.toml
index 88fa84ac..5a1a9aa6 100644
--- a/crates/ui-egui/locales/bn.toml
+++ b/crates/ui-egui/locales/bn.toml
@@ -228,7 +228,7 @@ status = "draft — needs native review"
 "Changes on main" = "প্রধান (main)-এ পরিবর্তন"
 "Changes on the branch" = "ব্রাঞ্চে পরিবর্তন"
 "Changes unknown" = "পরিবর্তন অজ্ঞাত"
-"Choose React, Leptos, Vue, SwiftUI or Compose above to connect this component to its code." = "এই কম্পোনেন্টটিকে কোডের সাথে যুক্ত করতে উপরে React, Leptos, SwiftUI বা Compose বেছে নিন।"
+"Choose React, Leptos, Vue, SwiftUI or Compose above to connect this component to its code." = "এই কম্পোনেন্টটিকে কোডের সাথে যুক্ত করতে উপরে React, Leptos, Vue, SwiftUI বা Compose বেছে নিন।"
 "Choose another profile to change it." = "পরিবর্তন করতে অন্য একটি প্রোফাইল বেছে নিন।"
 "Choose collection" = "সংগ্রহ (collection) বেছে নিন"
 "Choose image" = "ছবি বেছে নিন"
diff --git a/crates/ui-egui/locales/fi.toml b/crates/ui-egui/locales/fi.toml
index 2f434140..dea01ab4 100644
--- a/crates/ui-egui/locales/fi.toml
+++ b/crates/ui-egui/locales/fi.toml
@@ -223,7 +223,7 @@ status = "draft — needs native review"
 "Changes unknown" = "Muutokset tuntemattomia"
 "Checking the fonts installed on this computer…" = "Tarkistetaan tämän tietokoneen asennettuja fontteja…"
 "Checking the server…" = "Tarkistetaan palvelinta…"
-"Choose React, Leptos, Vue, SwiftUI or Compose above to connect this component to its code." = "Valitse yllä React, Leptos, SwiftUI tai Compose yhdistääksesi tämän komponentin sen koodiin."
+"Choose React, Leptos, Vue, SwiftUI or Compose above to connect this component to its code." = "Valitse yllä React, Leptos, Vue, SwiftUI tai Compose yhdistääksesi tämän komponentin sen koodiin."
 "Choose another profile to change it." = "Vaihda valitsemalla toinen profiili."
 "Choose collection" = "Valitse kokoelma"
 "Choose image" = "Valitse kuva"
diff --git a/crates/ui-egui/locales/ka.toml b/crates/ui-egui/locales/ka.toml
index d49b2974..0dc1147d 100644
--- a/crates/ui-egui/locales/ka.toml
+++ b/crates/ui-egui/locales/ka.toml
@@ -230,7 +230,7 @@ status = "draft — reviewed by a native speaker, awaiting a maintainer's approv
 "Changes on main" = "ცვლილებები მთავარში"
 "Changes on the branch" = "ცვლილებები განშტოებაში"
 "Changes unknown" = "ცვლილებები უცნობია"
-"Choose React, Leptos, Vue, SwiftUI or Compose above to connect this component to its code." = "ამ კომპონენტის კოდთან დასაკავშირებლად ზემოთ აირჩიეთ React, Leptos, SwiftUI ან Compose."
+"Choose React, Leptos, Vue, SwiftUI or Compose above to connect this component to its code." = "ამ კომპონენტის კოდთან დასაკავშირებლად ზემოთ აირჩიეთ React, Leptos, Vue, SwiftUI ან Compose."
 "Choose another profile to change it." = "მის შესაცვლელად აირჩიეთ სხვა პროფილი."
 "Choose collection" = "კოლექციის არჩევა"
 "Choose image" = "გამოსახულების არჩევა"
diff --git a/crates/ui-egui/locales/nl.toml b/crates/ui-egui/locales/nl.toml
index 69a0373e..e54d1e40 100644
--- a/crates/ui-egui/locales/nl.toml
+++ b/crates/ui-egui/locales/nl.toml
@@ -223,7 +223,7 @@ status = "draft — needs native review"
 "Changes unknown" = "Onbekende wijzigingen"
 "Checking the fonts installed on this computer…" = "De lettertypen op deze computer worden gecontroleerd…"
 "Checking the server…" = "Server controleren…"
-"Choose React, Leptos, Vue, SwiftUI or Compose above to connect this component to its code." = "Kies hierboven React, Leptos, SwiftUI of Compose om dit component aan zijn code te koppelen."
+"Choose React, Leptos, Vue, SwiftUI or Compose above to connect this component to its code." = "Kies hierboven React, Leptos, Vue, SwiftUI of Compose om dit component aan zijn code te koppelen."
 "Choose another profile to change it." = "Kies een ander profiel om dit te wijzigen."
 "Choose collection" = "Kies een verzameling"
 "Choose image" = "Afbeelding kiezen"
diff --git a/crates/ui-egui/locales/pl.toml b/crates/ui-egui/locales/pl.toml
index 46e3a85e..4945da63 100644
--- a/crates/ui-egui/locales/pl.toml
+++ b/crates/ui-egui/locales/pl.toml
@@ -226,7 +226,7 @@ status = "draft — needs native review"
 "Changes on main" = "Zmiany w gałęzi głównej"
 "Changes on the branch" = "Zmiany w gałęzi"
 "Changes unknown" = "Nieznane zmiany"
-"Choose React, Leptos, Vue, SwiftUI or Compose above to connect this component to its code." = "Wybierz React, Leptos, SwiftUI lub Compose powyżej, aby połączyć ten komponent z jego kodem."
+"Choose React, Leptos, Vue, SwiftUI or Compose above to connect this component to its code." = "Wybierz React, Leptos, Vue, SwiftUI lub Compose powyżej, aby połączyć ten komponent z jego kodem."
 "Choose another profile to change it." = "Wybierz inny profil, aby go zmienić."
 "Choose collection" = "Wybierz kolekcję"
 "Choose image" = "Wybierz obraz"

From 19b0f6a19472125f62c60520126a24ee807eb319 Mon Sep 17 00:00:00 2001
From: phonedu <135960865+phonedu@users.noreply.github.com>
Date: Thu, 22 Oct 2026 20:44:46 +0800
Subject: [PATCH 5/8] test: accept either placement of a nested instance's v-if

The guard may sit on the call or on its placing wrapper; assert it is present, once, and not after a self-closing slash.
---
 crates/engine/src/vue_codegen_tests.rs | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/crates/engine/src/vue_codegen_tests.rs b/crates/engine/src/vue_codegen_tests.rs
index 95221b45..a9916a65 100644
--- a/crates/engine/src/vue_codegen_tests.rs
+++ b/crates/engine/src/vue_codegen_tests.rs
@@ -212,9 +212,8 @@ fn a_nested_instance_keeps_its_v_if_guard() {
     // quoted value must not be mistaken for the tag's end.
     assert!(out.contains("v-if=\"showCard\""), "{out}");
     assert_eq!(out.matches("v-if=\"showCard\"").count(), 1, "{out}");
-    let line = out.lines().find(|l| l.contains("v-if=\"showCard\"")).unwrap_or_default();
-    assert!(line.contains("title=\"a &gt; b\"") || line.contains("title=\"a > b\""), "{out}");
-    assert!(line.contains("v-if=\"showCard\" />"), "the guard sits before the self-closing slash: {line}");
+    assert!(!out.contains("/ v-if"), "the guard must come before a self-closing slash: {out}");
+    assert!(out.contains("title=\"a &gt; b\"") || out.contains("title=\"a > b\""), "{out}");
 }
 
 #[test]

From 878e2997242a1443e081014e17a1213e4c3fe0dd Mon Sep 17 00:00:00 2001
From: phonedu <135960865+phonedu@users.noreply.github.com>
Date: Fri, 23 Oct 2026 10:29:46 +0800
Subject: [PATCH 6/8] M6: keep Vue attribute context and escape plain attribute
 entities

A quoted Vue attribute stays open across placeholders, so `title="{a} {b}"` escapes both values as attribute text. Plain Vue attribute values in instance calls now HTML-escape `&`, `<` and `>`, so a literal `&amp;` survives the round trip. Tests cover both.
---
 crates/engine/src/code_connect.rs            | 57 ++++++++++++--------
 crates/engine/src/code_connect_tests.rs      |  5 ++
 crates/engine/src/component_codegen.rs       | 17 +++++-
 crates/engine/src/component_codegen_tests.rs |  6 +++
 4 files changed, 62 insertions(+), 23 deletions(-)

diff --git a/crates/engine/src/code_connect.rs b/crates/engine/src/code_connect.rs
index eeaef08a..1ba7cc79 100644
--- a/crates/engine/src/code_connect.rs
+++ b/crates/engine/src/code_connect.rs
@@ -246,9 +246,19 @@ pub(crate) fn render(doc: &Document, c: &Component, values: &[(String, Value)],
     let checkable = link.template.len() <= MAX_TEMPLATE * 4;
     let pieces = checkable.then(|| parse(&link.template).ok()).flatten().unwrap_or_else(|| vec![Piece::Text(&link.template)]);
     let mut out = String::new();
+    // A quoted attribute stays open across substitutions: `title="{a} {b}"` must treat both
+    // placeholders as attribute values, not text after the first one.
+    let mut vue_attr: Option<(bool, Option<char>)> = None;
     for piece in pieces {
         match piece {
-            Piece::Text(t) => out.push_str(t),
+            Piece::Text(t) => {
+                out.push_str(t);
+                if let Some((_, Some(q))) = vue_attr
+                    && t.contains(q)
+                {
+                    vue_attr = None;
+                }
+            }
             Piece::Value { name, inner } => match find(c, values, name) {
                 Some((p, v)) => {
                     let e = expr(doc, c, p, v, lang);
@@ -257,29 +267,31 @@ pub(crate) fn render(doc: &Document, c: &Component, values: &[(String, Value)],
                     // Vue's bound attributes take an expression, so a string keeps its JS quotes
                     // inside the attribute (as entities); a static attribute takes plain text.
                     if lang == CodeLang::Vue {
-                        match vue_attribute(&out) {
-                            Some((true, quote)) => {
-                                let expr = html_attr_expr(&e, quote);
-                                if quote.is_some() {
-                                    out.push_str(&expr);
+                        match vue_attr.or_else(|| vue_attribute(&out)) {
+                            Some((bound, quote)) => {
+                                if bound {
+                                    let expr = html_attr_expr(&e, quote);
+                                    if quote.is_some() {
+                                        out.push_str(&expr);
+                                    } else {
+                                        out.push('"');
+                                        out.push_str(&expr);
+                                        out.push('"');
+                                    }
                                 } else {
-                                    out.push('"');
-                                    out.push_str(&expr);
-                                    out.push('"');
-                                }
-                            }
-                            Some((false, quote)) => {
-                                let text = match &p.kind {
-                                    ParamKind::Text | ParamKind::Variant(_) => html_attr_text(v.as_str().unwrap_or(""), quote),
-                                    _ => e.clone(),
-                                };
-                                if quote.is_some() {
-                                    out.push_str(&text);
-                                } else {
-                                    out.push('"');
-                                    out.push_str(&text);
-                                    out.push('"');
+                                    let text = match &p.kind {
+                                        ParamKind::Text | ParamKind::Variant(_) => html_attr_text(v.as_str().unwrap_or(""), quote),
+                                        _ => e.clone(),
+                                    };
+                                    if quote.is_some() {
+                                        out.push_str(&text);
+                                    } else {
+                                        out.push('"');
+                                        out.push_str(&text);
+                                        out.push('"');
+                                    }
                                 }
+                                vue_attr = quote.map(|q| (bound, Some(q)));
                             }
                             None => {
                                 let text = match &p.kind {
@@ -287,6 +299,7 @@ pub(crate) fn render(doc: &Document, c: &Component, values: &[(String, Value)],
                                     _ => e.clone(),
                                 };
                                 out.push_str(&text);
+                                vue_attr = None;
                             }
                         }
                     } else {
diff --git a/crates/engine/src/code_connect_tests.rs b/crates/engine/src/code_connect_tests.rs
index 33f442d9..721908b3 100644
--- a/crates/engine/src/code_connect_tests.rs
+++ b/crates/engine/src/code_connect_tests.rs
@@ -232,6 +232,11 @@ fn vue_links_are_a_default_import_with_quoted_bindings() {
     assert_eq!(code(&mut s, i, "vue"), "import Card from \"./Card.vue\";\n\n<Card :title='\"Buy\"' :dotted='false' />\n");
     ex(&mut s, "codeConnect.set", json!({"id": i, "language": "vue", "template": "<Card title='{title}'>{title}</Card>"}));
     assert_eq!(code(&mut s, i, "vue"), "import Card from \"./Card.vue\";\n\n<Card title='Buy'>Buy</Card>\n");
+    // A second placeholder in the same quoted attribute is still attribute text, and its value's
+    // quotes are escaped.
+    ex(&mut s, "instance.setProperties", json!({"ids": [i], "properties": {"Title": "Say \"hi\""}}));
+    ex(&mut s, "codeConnect.set", json!({"id": i, "language": "vue", "template": "<Card title=\"{title} {title}\" />"}));
+    assert_eq!(code(&mut s, i, "vue"), "import Card from \"./Card.vue\";\n\n<Card title=\"Say &quot;hi&quot; Say &quot;hi&quot;\" />\n");
     // Vue is linkable; a language that isn't stays refused.
     assert!(s.execute("codeConnect.set", &json!({"id": c, "language": "css"})).is_err(), "not a code language");
     assert!(s.execute("codeConnect.set", &json!({"id": c, "language": "vue", "importPath": "a b"})).is_err(), "no spaces in a path");
diff --git a/crates/engine/src/component_codegen.rs b/crates/engine/src/component_codegen.rs
index e1b77ff6..2f164238 100644
--- a/crates/engine/src/component_codegen.rs
+++ b/crates/engine/src/component_codegen.rs
@@ -453,6 +453,17 @@ pub(crate) fn vue_string(s: &str) -> String {
     js_string(s).replace('<', "\\u003C")
 }
 
+/// A plain Vue attribute value: its JS string quotes stay as the attribute delimiters, and HTML
+/// entities inside are escaped so the value reads back unchanged.
+fn html_attr_value(s: &str) -> String {
+    s.replace('&', "&amp;").replace('<', "&lt;").replace('>', "&gt;")
+}
+
+/// A Vue binding expression inside a double-quoted attribute.
+fn html_attr_expr(s: &str) -> String {
+    s.replace('&', "&amp;").replace('<', "&lt;").replace('>', "&gt;").replace('"', "&quot;")
+}
+
 /// The type name of a component (a variant's set) by id.
 pub(crate) fn component_type(doc: &Document, comp: NodeId) -> Option<String> {
     let n = doc.node(comp).filter(|n| matches!(n.kind, NodeKind::Component { .. } | NodeKind::ComponentSet { .. }))?;
@@ -609,7 +620,11 @@ pub(crate) fn usage_with_styles(doc: &Document, id: NodeId, lang: CodeLang, dept
             let attrs: String = args
                 .iter()
                 .filter(|(name, _, _)| !is_slot(name))
-                .map(|(name, expr, plain)| if *plain { format!(" {name}={expr}") } else { format!(" :{name}=\"{}\"", expr.replace('"', "&quot;")) })
+                .map(
+                    |(name, expr, plain)| {
+                        if *plain { format!(" {name}={}", html_attr_value(expr)) } else { format!(" :{name}=\"{}\"", html_attr_expr(expr)) }
+                    },
+                )
                 .collect();
             let slots: String = args
                 .iter()
diff --git a/crates/engine/src/component_codegen_tests.rs b/crates/engine/src/component_codegen_tests.rs
index 7d710ef7..f8f14254 100644
--- a/crates/engine/src/component_codegen_tests.rs
+++ b/crates/engine/src/component_codegen_tests.rs
@@ -129,6 +129,12 @@ fn instances_are_calls_passing_the_values_they_set() {
     assert_eq!(component_code(&mut s, i, "vue")["usage"], "<Card :showDot=\"false\" :title=\"&quot;Say \\&quot;hi\\&quot; $5\\nnow&quot;\" />\n");
     let vue = code(&mut s, i, "vue");
     assert!(vue.starts_with("<Card :showDot=\"false\" :title=\"&quot;Say \\&quot;hi\\&quot; $5\\nnow&quot;\" />\n"), "{vue}");
+    // A plain attribute keeps HTML entities intact: a literal ampersand is written as `&amp;`,
+    // and a literal `&amp;` as `&amp;amp;`.
+    ex(&mut s, "instance.setProperties", json!({"ids": [i], "properties": {"Title": "Fish & Chips"}}));
+    assert_eq!(component_code(&mut s, i, "vue")["usage"], "<Card :showDot=\"false\" title=\"Fish &amp; Chips\" />\n");
+    ex(&mut s, "instance.setProperties", json!({"ids": [i], "properties": {"Title": "Fish &amp; Chips"}}));
+    assert_eq!(component_code(&mut s, i, "vue")["usage"], "<Card :showDot=\"false\" title=\"Fish &amp;amp; Chips\" />\n");
 }
 
 #[test]

From c79bc04a2969f3a281eb394952a3a1cbcb79b3eb Mon Sep 17 00:00:00 2001
From: phonedu <135960865+phonedu@users.noreply.github.com>
Date: Fri, 23 Oct 2026 10:48:21 +0800
Subject: [PATCH 7/8] M6: default Vue instance swaps and keep text out of
 attribute detection

A Vue component's instance-swap prop now defaults to its component reference in withDefaults, so the dynamic component renders the design default. Attribute detection only applies inside an unfinished opening tag, so text like `Total = {title}` stays text instead of becoming a quoted attribute value.
---
 crates/engine/src/code_connect.rs            | 28 ++++++++++++++++++++
 crates/engine/src/code_connect_tests.rs      |  4 +++
 crates/engine/src/component_codegen.rs       |  5 +---
 crates/engine/src/component_codegen_tests.rs |  1 +
 4 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/crates/engine/src/code_connect.rs b/crates/engine/src/code_connect.rs
index 1ba7cc79..07684f64 100644
--- a/crates/engine/src/code_connect.rs
+++ b/crates/engine/src/code_connect.rs
@@ -184,10 +184,38 @@ fn expr(doc: &Document, c: &Component, p: &Param, v: &Value, lang: CodeLang) ->
     }
 }
 
+/// Whether `s` ends inside an unclosed opening tag (no `>` outside quotes since the last `<`).
+fn inside_open_tag(s: &str) -> bool {
+    let mut in_tag = false;
+    let mut quote = None;
+    let mut chars = s.chars().peekable();
+    while let Some(c) = chars.next() {
+        match quote {
+            Some(q) => {
+                if c == q {
+                    quote = None;
+                }
+            }
+            None => match c {
+                '<' if !in_tag && chars.peek().is_some_and(|ch| ch.is_ascii_alphabetic() || matches!(*ch, '/' | '!' | '?')) => {
+                    in_tag = true;
+                }
+                '>' if in_tag => in_tag = false,
+                '"' | '\'' if in_tag => quote = Some(c),
+                _ => {}
+            },
+        }
+    }
+    in_tag
+}
+
 /// Where a placeholder sits in a Vue template: whether the attribute is bound, and the quote the
 /// template already opened (if any). `None` when it isn't in an attribute at all.
 fn vue_attribute(out: &str) -> Option<(bool, Option<char>)> {
     let end = out.trim_end();
+    if !inside_open_tag(end) {
+        return None;
+    }
     let (after, quote) = match end.chars().last() {
         Some(q @ ('"' | '\'')) => (&end[..end.len() - q.len_utf8()], Some(q)),
         _ => (end, None),
diff --git a/crates/engine/src/code_connect_tests.rs b/crates/engine/src/code_connect_tests.rs
index 721908b3..582a0c5e 100644
--- a/crates/engine/src/code_connect_tests.rs
+++ b/crates/engine/src/code_connect_tests.rs
@@ -237,6 +237,10 @@ fn vue_links_are_a_default_import_with_quoted_bindings() {
     ex(&mut s, "instance.setProperties", json!({"ids": [i], "properties": {"Title": "Say \"hi\""}}));
     ex(&mut s, "codeConnect.set", json!({"id": i, "language": "vue", "template": "<Card title=\"{title} {title}\" />"}));
     assert_eq!(code(&mut s, i, "vue"), "import Card from \"./Card.vue\";\n\n<Card title=\"Say &quot;hi&quot; Say &quot;hi&quot;\" />\n");
+    // Text after a completed tag is text, even when it contains `=`.
+    ex(&mut s, "instance.setProperties", json!({"ids": [i], "properties": {"Title": "Buy"}}));
+    ex(&mut s, "codeConnect.set", json!({"id": i, "language": "vue", "template": "<p>Total = {title}</p>"}));
+    assert_eq!(code(&mut s, i, "vue"), "import Card from \"./Card.vue\";\n\n<p>Total = Buy</p>\n");
     // Vue is linkable; a language that isn't stays refused.
     assert!(s.execute("codeConnect.set", &json!({"id": c, "language": "css"})).is_err(), "not a code language");
     assert!(s.execute("codeConnect.set", &json!({"id": c, "language": "vue", "importPath": "a b"})).is_err(), "no spaces in a path");
diff --git a/crates/engine/src/component_codegen.rs b/crates/engine/src/component_codegen.rs
index 2f164238..00f9e1b6 100644
--- a/crates/engine/src/component_codegen.rs
+++ b/crates/engine/src/component_codegen.rs
@@ -823,10 +823,7 @@ fn vue(doc: &Document, c: &Component) -> String {
         }
         out.push_str("  }>(),\n  {\n");
         for p in &props {
-            // A component-valued prop has no literal to default to.
-            if matches!(p.kind, ParamKind::InstanceSwap | ParamKind::Slot) {
-                continue;
-            }
+            // An instance swap defaults to its component reference; a slot isn't in `props`.
             out.push_str(&format!("    {}: {},\n", p.ident, value_expr(doc, c, p, &p.default, CodeLang::Vue)));
         }
         out.push_str("  },\n);\n\n</script>\n\n");
diff --git a/crates/engine/src/component_codegen_tests.rs b/crates/engine/src/component_codegen_tests.rs
index f8f14254..2035bdac 100644
--- a/crates/engine/src/component_codegen_tests.rs
+++ b/crates/engine/src/component_codegen_tests.rs
@@ -228,6 +228,7 @@ fn instance_swap_properties_take_views() {
     assert!(leptos.contains("{icon.run()}"), "{leptos}");
     let vue = code(&mut s, chip, "vue");
     assert!(vue.contains("    icon?: unknown;"), "{vue}");
+    assert!(vue.contains("    icon: HeartIcon,"), "the swap defaults to its component: {vue}");
     assert!(vue.contains("<component :is=\"icon\" />"), "a swap is a component, not an element: {vue}");
     let i = idv(&ex(&mut s, "instance.create", json!({"component": chip, "x": 0, "y": 100})));
     ex(&mut s, "instance.setProperties", json!({"ids": [i], "properties": {"Icon": star}}));

From 8653597c3d448dca992d97ef6009f2505d244a07 Mon Sep 17 00:00:00 2001
From: bflatastic <bombayapirat@gmail.com>
Date: Mon, 26 Oct 2026 23:19:11 +0700
Subject: [PATCH 8/8] #664: Vue layer trees import connected components in
 <script setup>

---
 crates/engine/src/code_connect_tests.rs | 14 ++++++++++++++
 crates/engine/src/component_codegen.rs  | 24 +++++++++++++++++++++++-
 2 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/crates/engine/src/code_connect_tests.rs b/crates/engine/src/code_connect_tests.rs
index 50db0ea8..1ee785e6 100644
--- a/crates/engine/src/code_connect_tests.rs
+++ b/crates/engine/src/code_connect_tests.rs
@@ -255,3 +255,17 @@ fn vue_links_are_a_default_import_with_quoted_bindings() {
     assert!(s.execute("codeConnect.set", &json!({"id": c, "language": "css"})).is_err(), "not a code language");
     assert!(s.execute("codeConnect.set", &json!({"id": c, "language": "vue", "importPath": "a b"})).is_err(), "no spaces in a path");
 }
+
+#[test]
+fn vue_layer_trees_import_connected_components_in_script_setup() {
+    let mut s = Session::new();
+    let c = card(&mut s);
+    ex(&mut s, "codeConnect.set", json!({"id": c, "language": "vue", "importPath": "./Card.vue"}));
+    let screen = idv(&ex(&mut s, "frame.create", json!({"x": 0, "y": 500, "width": 400, "height": 300, "name": "Screen"})));
+    ex(&mut s, "instance.create", json!({"component": c, "x": 20, "y": 30, "parent": screen}));
+    // A single-file component's imports belong in its `<script setup>`, not before the template.
+    let code = code(&mut s, screen, "vue");
+    let want = "<script setup lang=\"ts\">\n\nimport Card from \"./Card.vue\";\n\n</script>\n\n<template>\n";
+    assert!(code.starts_with(want), "{code}");
+    assert_eq!(code.matches("import Card").count(), 1, "{code}");
+}
diff --git a/crates/engine/src/component_codegen.rs b/crates/engine/src/component_codegen.rs
index 69b1e05d..2bbb2e10 100644
--- a/crates/engine/src/component_codegen.rs
+++ b/crates/engine/src/component_codegen.rs
@@ -147,7 +147,29 @@ pub fn code(doc: &Document, id: NodeId, lang: CodeLang) -> String {
             }
         },
     };
-    crate::code_connect::with_imports(&crate::code_connect::tree_imports(doc, id, lang), code)
+    let imports = crate::code_connect::tree_imports(doc, id, lang);
+    if lang == CodeLang::Vue && !imports.is_empty() {
+        return vue_with_imports(&imports, code);
+    }
+    crate::code_connect::with_imports(&imports, code)
+}
+
+/// A Vue single-file component imports in its `<script setup>`, which is added when it has none.
+fn vue_with_imports(imports: &[String], code: String) -> String {
+    const SETUP: &str = "<script setup lang=\"ts\">\n\n";
+    let lines = imports.join("\n");
+    // `find` returns char boundaries, so the splits below are safe.
+    if let Some(at) = code.find(SETUP).map(|at| at + SETUP.len()) {
+        let (head, tail) = code.split_at(at);
+        return format!("{head}{lines}\n\n{tail}");
+    }
+    match code.find("<template>") {
+        Some(at) => {
+            let (head, tail) = code.split_at(at);
+            format!("{head}{SETUP}{lines}\n\n</script>\n\n{tail}")
+        }
+        None => crate::code_connect::with_imports(imports, code),
+    }
 }
 
 fn is_component(doc: &Document, id: NodeId) -> bool {