From 3195b3c6d6248cf17d2412ad45a757756cf97074 Mon Sep 17 00:00:00 2001
From: Jacek <jacek@clerk.dev>
Date: Fri, 16 Jan 2026 21:39:01 -0600
Subject: [PATCH 1/5] feat(upgrade): Add Vue-specific Protect to Show codemod
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Vue SFC files require different prop syntax than React JSX:
- React: `<Protect role="admin">` → `<Show when={{ role: 'admin' }}>`
- Vue: `<Protect role="admin">` → `<Show :when="{ role: 'admin' }">`

This adds a Vue-specific codemod that:
- Transforms script imports (Protect → Show, ProtectProps → ShowProps)
- Transforms template components with Vue v-bind syntax
- Handles static and dynamic prop bindings
- Handles condition callbacks
- Only transforms when clerk imports are detected

The core-3 config is updated to run the appropriate codemod:
- `transform-protect-to-show` for React-based SDKs
- `transform-protect-to-show-vue` for Vue/Nuxt SDKs
---
 .../transform-protect-to-show-vue.fixtures.js | 435 ++++++++++++++++++
 .../transform-protect-to-show-vue.test.js     |  18 +
 .../transform-protect-to-show-vue.cjs         | 385 ++++++++++++++++
 packages/upgrade/src/versions/core-3/index.js |   5 +-
 4 files changed, 842 insertions(+), 1 deletion(-)
 create mode 100644 packages/upgrade/src/codemods/__tests__/__fixtures__/transform-protect-to-show-vue.fixtures.js
 create mode 100644 packages/upgrade/src/codemods/__tests__/transform-protect-to-show-vue.test.js
 create mode 100644 packages/upgrade/src/codemods/transform-protect-to-show-vue.cjs

diff --git a/packages/upgrade/src/codemods/__tests__/__fixtures__/transform-protect-to-show-vue.fixtures.js b/packages/upgrade/src/codemods/__tests__/__fixtures__/transform-protect-to-show-vue.fixtures.js
new file mode 100644
index 00000000000..1dcd0fff575
--- /dev/null
+++ b/packages/upgrade/src/codemods/__tests__/__fixtures__/transform-protect-to-show-vue.fixtures.js
@@ -0,0 +1,435 @@
+export const fixtures = [
+  {
+    name: 'Transforms Protect import in Vue SFC',
+    path: 'component.vue',
+    source: `<script setup>
+import { Protect } from "@clerk/vue"
+</script>
+
+<template>
+  <Protect role="admin">
+    <AdminPanel />
+  </Protect>
+</template>`,
+    output: `<script setup>
+import { Show } from "@clerk/vue"
+</script>
+
+<template>
+  <Show :when="{ role: 'admin' }">
+    <AdminPanel />
+  </Show>
+</template>`,
+  },
+  {
+    name: 'Transforms SignedIn in Vue SFC',
+    path: 'component.vue',
+    source: `<script setup>
+import { SignedIn } from "@clerk/vue"
+</script>
+
+<template>
+  <SignedIn>
+    <Dashboard />
+  </SignedIn>
+</template>`,
+    output: `<script setup>
+import { Show } from "@clerk/vue"
+</script>
+
+<template>
+  <Show when="signed-in">
+    <Dashboard />
+  </Show>
+</template>`,
+  },
+  {
+    name: 'Transforms SignedOut in Vue SFC',
+    path: 'component.vue',
+    source: `<script setup>
+import { SignedOut } from "@clerk/vue"
+</script>
+
+<template>
+  <SignedOut>
+    <LoginPrompt />
+  </SignedOut>
+</template>`,
+    output: `<script setup>
+import { Show } from "@clerk/vue"
+</script>
+
+<template>
+  <Show when="signed-out">
+    <LoginPrompt />
+  </Show>
+</template>`,
+  },
+  {
+    name: 'Transforms Protect with permission in Vue SFC',
+    path: 'component.vue',
+    source: `<script setup>
+import { Protect } from "@clerk/vue"
+</script>
+
+<template>
+  <Protect permission="org:billing:manage">
+    <BillingSettings />
+  </Protect>
+</template>`,
+    output: `<script setup>
+import { Show } from "@clerk/vue"
+</script>
+
+<template>
+  <Show :when="{ permission: 'org:billing:manage' }">
+    <BillingSettings />
+  </Show>
+</template>`,
+  },
+  {
+    name: 'Transforms Protect with feature in Vue SFC',
+    path: 'component.vue',
+    source: `<script setup>
+import { Protect } from "@clerk/vue"
+</script>
+
+<template>
+  <Protect feature="premium">
+    <PremiumContent />
+  </Protect>
+</template>`,
+    output: `<script setup>
+import { Show } from "@clerk/vue"
+</script>
+
+<template>
+  <Show :when="{ feature: 'premium' }">
+    <PremiumContent />
+  </Show>
+</template>`,
+  },
+  {
+    name: 'Transforms Protect with plan in Vue SFC',
+    path: 'component.vue',
+    source: `<script setup>
+import { Protect } from "@clerk/vue"
+</script>
+
+<template>
+  <Protect plan="pro">
+    <ProFeatures />
+  </Protect>
+</template>`,
+    output: `<script setup>
+import { Show } from "@clerk/vue"
+</script>
+
+<template>
+  <Show :when="{ plan: 'pro' }">
+    <ProFeatures />
+  </Show>
+</template>`,
+  },
+  {
+    name: 'Transforms Protect with multiple auth props in Vue SFC',
+    path: 'component.vue',
+    source: `<script setup>
+import { Protect } from "@clerk/vue"
+</script>
+
+<template>
+  <Protect role="admin" permission="org:read">
+    <AdminContent />
+  </Protect>
+</template>`,
+    output: `<script setup>
+import { Show } from "@clerk/vue"
+</script>
+
+<template>
+  <Show :when="{ permission: 'org:read', role: 'admin' }">
+    <AdminContent />
+  </Show>
+</template>`,
+  },
+  {
+    name: 'Transforms Protect with condition in Vue SFC',
+    path: 'component.vue',
+    source: `<script setup>
+import { Protect } from "@clerk/vue"
+</script>
+
+<template>
+  <Protect :condition="(has) => has({ role: 'admin' })">
+    <AdminContent />
+  </Protect>
+</template>`,
+    output: `<script setup>
+import { Show } from "@clerk/vue"
+</script>
+
+<template>
+  <Show :when="(has) => has({ role: 'admin' })">
+    <AdminContent />
+  </Show>
+</template>`,
+  },
+  {
+    name: 'Transforms Protect with fallback in Vue SFC',
+    path: 'component.vue',
+    source: `<script setup>
+import { Protect } from "@clerk/vue"
+</script>
+
+<template>
+  <Protect role="admin" fallback="<Unauthorized />">
+    <AdminContent />
+  </Protect>
+</template>`,
+    output: `<script setup>
+import { Show } from "@clerk/vue"
+</script>
+
+<template>
+  <Show :when="{ role: 'admin' }" fallback="<Unauthorized />">
+    <AdminContent />
+  </Show>
+</template>`,
+  },
+  {
+    name: 'Transforms self-closing Protect in Vue SFC',
+    path: 'component.vue',
+    source: `<script setup>
+import { Protect } from "@clerk/vue"
+</script>
+
+<template>
+  <Protect role="admin" />
+</template>`,
+    output: `<script setup>
+import { Show } from "@clerk/vue"
+</script>
+
+<template>
+  <Show :when="{ role: 'admin' }" />
+</template>`,
+  },
+  {
+    name: 'Transforms self-closing SignedIn in Vue SFC',
+    path: 'component.vue',
+    source: `<script setup>
+import { SignedIn } from "@clerk/vue"
+</script>
+
+<template>
+  <SignedIn />
+</template>`,
+    output: `<script setup>
+import { Show } from "@clerk/vue"
+</script>
+
+<template>
+  <Show when="signed-in" />
+</template>`,
+  },
+  {
+    name: 'Transforms SignedOut with fallback in Vue SFC',
+    path: 'component.vue',
+    source: `<script setup>
+import { SignedOut } from "@clerk/vue"
+</script>
+
+<template>
+  <SignedOut :fallback="loadingComponent">
+    <LoginForm />
+  </SignedOut>
+</template>`,
+    output: `<script setup>
+import { Show } from "@clerk/vue"
+</script>
+
+<template>
+  <Show when="signed-out" :fallback="loadingComponent">
+    <LoginForm />
+  </Show>
+</template>`,
+  },
+  {
+    name: 'Transforms multiple components in Vue SFC',
+    path: 'component.vue',
+    source: `<script setup>
+import { Protect, SignedIn, SignedOut } from "@clerk/vue"
+</script>
+
+<template>
+  <div>
+    <SignedIn>
+      <Dashboard />
+    </SignedIn>
+    <SignedOut>
+      <LoginForm />
+    </SignedOut>
+    <Protect role="admin">
+      <AdminPanel />
+    </Protect>
+  </div>
+</template>`,
+    output: `<script setup>
+import { Show } from "@clerk/vue";
+</script>
+
+<template>
+  <div>
+    <Show when="signed-in">
+      <Dashboard />
+    </Show>
+    <Show when="signed-out">
+      <LoginForm />
+    </Show>
+    <Show :when="{ role: 'admin' }">
+      <AdminPanel />
+    </Show>
+  </div>
+</template>`,
+  },
+  {
+    name: 'Transforms ProtectProps type in Vue SFC',
+    path: 'component.vue',
+    source: `<script setup lang="ts">
+import { Protect, ProtectProps } from "@clerk/vue"
+
+const props = defineProps<ProtectProps>()
+</script>
+
+<template>
+  <Protect role="admin">
+    <Content />
+  </Protect>
+</template>`,
+    output: `<script setup lang="ts">
+import { Show, ShowProps } from "@clerk/vue"
+
+const props = defineProps<ShowProps>()
+</script>
+
+<template>
+  <Show :when="{ role: 'admin' }">
+    <Content />
+  </Show>
+</template>`,
+  },
+  {
+    name: 'Transforms Protect with dynamic binding in Vue SFC',
+    path: 'component.vue',
+    source: `<script setup>
+import { Protect } from "@clerk/vue"
+
+const userRole = ref('admin')
+</script>
+
+<template>
+  <Protect :role="userRole">
+    <Content />
+  </Protect>
+</template>`,
+    output: `<script setup>
+import { Show } from "@clerk/vue"
+
+const userRole = ref('admin')
+</script>
+
+<template>
+  <Show :when="{ role: userRole }">
+    <Content />
+  </Show>
+</template>`,
+  },
+  {
+    name: 'Does not transform non-.vue files',
+    path: 'component.tsx',
+    source: `import { Protect } from "@clerk/vue"
+
+const App = () => (
+  <Protect role="admin">
+    <Content />
+  </Protect>
+)`,
+    output: null,
+  },
+  {
+    name: 'Does not transform non-clerk imports in Vue SFC',
+    path: 'component.vue',
+    source: `<script setup>
+import { Protect } from "./local-protect"
+</script>
+
+<template>
+  <Protect role="admin">
+    <Content />
+  </Protect>
+</template>`,
+    output: null,
+  },
+  {
+    name: 'Transforms Protect with no props to default signed-in',
+    path: 'component.vue',
+    source: `<script setup>
+import { Protect } from "@clerk/vue"
+</script>
+
+<template>
+  <Protect>
+    <Content />
+  </Protect>
+</template>`,
+    output: `<script setup>
+import { Show } from "@clerk/vue"
+</script>
+
+<template>
+  <Show when="signed-in">
+    <Content />
+  </Show>
+</template>`,
+  },
+  {
+    name: 'Transforms Nuxt import in Vue SFC',
+    path: 'component.vue',
+    source: `<script setup>
+import { Protect, SignedIn } from "#clerk"
+</script>
+
+<template>
+  <SignedIn>
+    <Dashboard />
+  </SignedIn>
+  <Protect role="admin">
+    <AdminPanel />
+  </Protect>
+</template>`,
+    output: null, // #clerk is not @clerk/* so should not transform
+  },
+  {
+    name: 'Preserves other attributes on Protect in Vue SFC',
+    path: 'component.vue',
+    source: `<script setup>
+import { Protect } from "@clerk/vue"
+</script>
+
+<template>
+  <Protect role="admin" class="my-class" data-testid="protected">
+    <Content />
+  </Protect>
+</template>`,
+    output: `<script setup>
+import { Show } from "@clerk/vue"
+</script>
+
+<template>
+  <Show :when="{ role: 'admin' }" class="my-class" data-testid="protected">
+    <Content />
+  </Show>
+</template>`,
+  },
+];
diff --git a/packages/upgrade/src/codemods/__tests__/transform-protect-to-show-vue.test.js b/packages/upgrade/src/codemods/__tests__/transform-protect-to-show-vue.test.js
new file mode 100644
index 00000000000..2e7591b72db
--- /dev/null
+++ b/packages/upgrade/src/codemods/__tests__/transform-protect-to-show-vue.test.js
@@ -0,0 +1,18 @@
+import { applyTransform } from 'jscodeshift/dist/testUtils';
+import { describe, expect, it } from 'vitest';
+
+import transformer from '../transform-protect-to-show-vue.cjs';
+import { fixtures } from './__fixtures__/transform-protect-to-show-vue.fixtures';
+
+describe('transform-protect-to-show-vue', () => {
+  it.each(fixtures)(`$name`, ({ source, output, path }) => {
+    const result = applyTransform(transformer, {}, { source, path });
+
+    if (output === null) {
+      // null output means no transformation should occur
+      expect(result).toBeFalsy();
+    } else {
+      expect(result).toEqual(output.trim());
+    }
+  });
+});
diff --git a/packages/upgrade/src/codemods/transform-protect-to-show-vue.cjs b/packages/upgrade/src/codemods/transform-protect-to-show-vue.cjs
new file mode 100644
index 00000000000..1e31b6646bb
--- /dev/null
+++ b/packages/upgrade/src/codemods/transform-protect-to-show-vue.cjs
@@ -0,0 +1,385 @@
+const CLERK_PACKAGE_PREFIX = '@clerk/';
+
+const isClerkPackageSource = sourceValue => {
+  return typeof sourceValue === 'string' && sourceValue.startsWith(CLERK_PACKAGE_PREFIX);
+};
+
+/**
+ * Vue-specific codemod to transform `<Protect>`, `<SignedIn>`, and `<SignedOut>` components to `<Show>`.
+ *
+ * This codemod handles Vue SFC (.vue) files, transforming both:
+ * - Script imports (ESM/CJS)
+ * - Template component usage with Vue's v-bind syntax
+ *
+ * Template transformations:
+ * - `<Protect role="admin">` → `<Show :when="{ role: 'admin' }">`
+ * - `<Protect permission="org:read">` → `<Show :when="{ permission: 'org:read' }">`
+ * - `<Protect :condition="(has) => ...">` → `<Show :when="(has) => ...">`
+ * - `<SignedIn>` → `<Show when="signed-in">`
+ * - `<SignedOut>` → `<Show when="signed-out">`
+ *
+ * @param {import('jscodeshift').FileInfo} fileInfo - The file information
+ * @param {import('jscodeshift').API} api - The API object provided by jscodeshift
+ * @returns {string|undefined} - The transformed source code if modifications were made
+ */
+module.exports = function transformProtectToShowVue(fileInfo, { jscodeshift: j }) {
+  const { source, path: filePath } = fileInfo;
+
+  // Only process .vue files
+  if (!filePath || !filePath.endsWith('.vue')) {
+    return undefined;
+  }
+
+  let dirtyFlag = false;
+  let result = source;
+
+  // Track which components were imported from @clerk/*
+  const importedComponents = new Set();
+
+  // Extract and transform <script> block
+  const scriptMatch = result.match(/(<script[^>]*>)([\s\S]*?)(<\/script>)/i);
+  if (scriptMatch) {
+    const [fullMatch, openTag, scriptContent, closeTag] = scriptMatch;
+    const scriptResult = transformScript(scriptContent, j);
+
+    if (scriptResult.transformed !== null) {
+      result = result.replace(fullMatch, openTag + scriptResult.transformed + closeTag);
+      dirtyFlag = true;
+    }
+
+    // Track imported components
+    for (const comp of scriptResult.importedComponents) {
+      importedComponents.add(comp);
+    }
+  }
+
+  // Only transform template if we found clerk imports
+  if (importedComponents.size > 0) {
+    // Extract and transform <template> block
+    const templateMatch = result.match(/(<template[^>]*>)([\s\S]*?)(<\/template>)/i);
+    if (templateMatch) {
+      const [fullMatch, openTag, templateContent, closeTag] = templateMatch;
+      const transformedTemplate = transformTemplate(templateContent, importedComponents);
+
+      if (transformedTemplate !== null) {
+        result = result.replace(fullMatch, openTag + transformedTemplate + closeTag);
+        dirtyFlag = true;
+      }
+    }
+  }
+
+  if (!dirtyFlag) {
+    return undefined;
+  }
+
+  return result;
+};
+
+/**
+ * Transform script imports using jscodeshift
+ * @returns {{ transformed: string | null, importedComponents: string[] }}
+ */
+function transformScript(scriptContent, j) {
+  const root = j(scriptContent);
+  let dirtyFlag = false;
+  const importedComponents = [];
+
+  // Transform ESM imports: Protect → Show, ProtectProps → ShowProps
+  root.find(j.ImportDeclaration).forEach(path => {
+    const node = path.node;
+    const sourceValue = node.source?.value;
+
+    if (!isClerkPackageSource(sourceValue)) {
+      return;
+    }
+
+    const specifiers = node.specifiers || [];
+
+    specifiers.forEach(spec => {
+      if (j.ImportDefaultSpecifier.check(spec) || j.ImportNamespaceSpecifier.check(spec)) {
+        return;
+      }
+
+      if (!j.ImportSpecifier.check(spec)) {
+        return;
+      }
+
+      const originalImportedName = spec.imported.name;
+
+      if (['Protect', 'SignedIn', 'SignedOut'].includes(originalImportedName)) {
+        // Track the original component name (or alias) for template transformation
+        const localName = spec.local ? spec.local.name : originalImportedName;
+        importedComponents.push(originalImportedName);
+        // Also track alias if different
+        if (localName !== originalImportedName) {
+          importedComponents.push(localName);
+        }
+
+        spec.imported.name = 'Show';
+        if (spec.local && spec.local.name === originalImportedName) {
+          spec.local.name = 'Show';
+        }
+        dirtyFlag = true;
+        return;
+      }
+
+      if (spec.imported.name === 'ProtectProps') {
+        spec.imported.name = 'ShowProps';
+        if (spec.local && spec.local.name === 'ProtectProps') {
+          spec.local.name = 'ShowProps';
+        }
+        dirtyFlag = true;
+      }
+    });
+
+    // Deduplicate import specifiers (e.g., if both Protect and SignedIn were imported)
+    const seenLocalNames = new Set();
+    node.specifiers = specifiers.reduce((acc, spec) => {
+      let localName = null;
+
+      if (spec.local && j.Identifier.check(spec.local)) {
+        localName = spec.local.name;
+      } else if (j.ImportSpecifier.check(spec) && j.Identifier.check(spec.imported)) {
+        localName = spec.imported.name;
+      }
+
+      if (localName) {
+        if (seenLocalNames.has(localName)) {
+          dirtyFlag = true;
+          return acc;
+        }
+        seenLocalNames.add(localName);
+      }
+
+      acc.push(spec);
+      return acc;
+    }, []);
+  });
+
+  // Also rename ProtectProps type references in the script
+  // Search for all Identifier nodes named 'ProtectProps' that are used as type references
+  root.find(j.Identifier, { name: 'ProtectProps' }).forEach(path => {
+    const parent = path.parent?.node;
+    // Skip import specifiers - they're handled separately above
+    if (j.ImportSpecifier.check(parent)) {
+      return;
+    }
+    // Rename all other occurrences (type references, generic parameters, etc.)
+    path.node.name = 'ShowProps';
+    dirtyFlag = true;
+  });
+
+  let transformedSource = dirtyFlag ? root.toSource() : null;
+
+  // Fallback: use string replacement for any remaining ProtectProps references
+  // This handles cases where jscodeshift AST traversal might miss some patterns
+  if (transformedSource && transformedSource.includes('ProtectProps')) {
+    // Replace ProtectProps that are NOT part of an import statement
+    // Match ProtectProps that is preceded by < or whitespace (type usage contexts)
+    transformedSource = transformedSource.replace(/(<|[\s,])ProtectProps([>\s,;)])/g, '$1ShowProps$2');
+  }
+
+  return {
+    transformed: transformedSource,
+    importedComponents,
+  };
+}
+
+/**
+ * Transform Vue template content
+ * @param {string} templateContent
+ * @param {Set<string>} importedComponents - Components that were imported from @clerk/*
+ */
+function transformTemplate(templateContent, importedComponents) {
+  let result = templateContent;
+  let dirtyFlag = false;
+
+  // Transform Protect components (only if Protect was imported)
+  if (importedComponents.has('Protect')) {
+    result = transformProtectElements(result, wasModified => {
+      if (wasModified) dirtyFlag = true;
+    });
+  }
+
+  // Transform SignedIn components (only if SignedIn was imported)
+  if (importedComponents.has('SignedIn')) {
+    result = transformSignedStateElements(result, 'SignedIn', 'signed-in', wasModified => {
+      if (wasModified) dirtyFlag = true;
+    });
+  }
+
+  // Transform SignedOut components (only if SignedOut was imported)
+  if (importedComponents.has('SignedOut')) {
+    result = transformSignedStateElements(result, 'SignedOut', 'signed-out', wasModified => {
+      if (wasModified) dirtyFlag = true;
+    });
+  }
+
+  if (!dirtyFlag) {
+    return null;
+  }
+
+  return result;
+}
+
+/**
+ * Transform <Protect> elements to <Show>
+ */
+function transformProtectElements(content, onModified) {
+  let result = content;
+
+  // Match opening Protect tags (including self-closing)
+  // Uses a pattern that properly handles quoted strings containing '>' or '/'
+  // (?:[^>"'/]|"[^"]*"|'[^']*')* matches any char except >"'/, OR a quoted string
+  const protectTagRegex = /<Protect(\s+(?:[^>"'/]|"[^"]*"|'[^']*')*)?(\/?)>/gi;
+
+  result = result.replace(protectTagRegex, (match, attrsStr, selfClosing) => {
+    const attrs = attrsStr || '';
+    const transformed = transformProtectAttrs(attrs);
+    onModified(true);
+    // Preserve spacing before self-closing slash
+    if (selfClosing) {
+      return `<Show${transformed} />`;
+    }
+    return `<Show${transformed}>`;
+  });
+
+  // Transform closing tags
+  result = result.replace(/<\/Protect>/gi, () => {
+    onModified(true);
+    return '</Show>';
+  });
+
+  return result;
+}
+
+/**
+ * Transform Protect attributes to Show attributes
+ * - role, permission, feature, plan → :when="{ ... }"
+ * - :condition="..." or condition="..." → :when="..." or when="..."
+ * - Other attributes are preserved
+ */
+function transformProtectAttrs(attrsStr) {
+  if (!attrsStr || !attrsStr.trim()) {
+    // No props, default to signed-in
+    return ' when="signed-in"';
+  }
+
+  const authProps = [];
+  let conditionValue = null;
+  let conditionIsBound = false;
+  const otherAttrs = [];
+
+  // Parse attributes - handle both static and dynamic bindings
+  // Matches: name="value", :name="value", v-bind:name="value"
+  const attrRegex = /(?::|v-bind:)?([a-zA-Z_][\w-]*)\s*=\s*(?:"([^"]*)"|'([^']*)')/g;
+  let match;
+
+  const processedAttrs = new Set();
+
+  while ((match = attrRegex.exec(attrsStr)) !== null) {
+    const fullMatch = match[0];
+    const attrName = match[1];
+    const attrValue = match[2] !== undefined ? match[2] : match[3];
+    const isBound = fullMatch.startsWith(':') || fullMatch.startsWith('v-bind:');
+
+    processedAttrs.add(fullMatch);
+
+    if (attrName === 'condition') {
+      conditionValue = attrValue;
+      conditionIsBound = isBound;
+    } else if (['role', 'permission', 'feature', 'plan'].includes(attrName)) {
+      authProps.push({ name: attrName, value: attrValue, isBound });
+    } else {
+      otherAttrs.push(fullMatch);
+    }
+  }
+
+  // Also handle boolean attributes (attributes without values)
+  const boolAttrRegex = /\s+(?::|v-bind:)?([a-zA-Z_][\w-]*)(?=\s|$|\/|>)/g;
+  let remaining = attrsStr;
+  for (const processed of processedAttrs) {
+    remaining = remaining.replace(processed, '');
+  }
+
+  while ((match = boolAttrRegex.exec(remaining)) !== null) {
+    const fullMatch = match[0].trim();
+    if (fullMatch && !processedAttrs.has(fullMatch)) {
+      otherAttrs.push(fullMatch);
+    }
+  }
+
+  // Build the when prop
+  let whenAttr = '';
+
+  if (conditionValue !== null) {
+    // condition prop becomes when
+    if (conditionIsBound) {
+      whenAttr = `:when="${conditionValue}"`;
+    } else {
+      whenAttr = `when="${conditionValue}"`;
+    }
+  } else if (authProps.length > 0) {
+    // Build object from auth props
+    const objParts = authProps
+      .sort((a, b) => a.name.localeCompare(b.name))
+      .map(({ name, value, isBound }) => {
+        if (isBound) {
+          // Dynamic binding: :role="dynamicRole" → role: dynamicRole
+          return `${name}: ${value}`;
+        } else {
+          // Static value: role="admin" → role: 'admin'
+          return `${name}: '${value}'`;
+        }
+      });
+
+    whenAttr = `:when="{ ${objParts.join(', ')} }"`;
+  } else {
+    // No auth props or condition, default to signed-in
+    whenAttr = 'when="signed-in"';
+  }
+
+  // Combine when prop with other attributes
+  const allAttrs = [whenAttr, ...otherAttrs].filter(Boolean);
+  return allAttrs.length > 0 ? ' ' + allAttrs.join(' ') : '';
+}
+
+/**
+ * Transform <SignedIn> or <SignedOut> elements to <Show>
+ */
+function transformSignedStateElements(content, componentName, whenValue, onModified) {
+  let result = content;
+
+  // Match opening tags (including self-closing)
+  // Uses a pattern that properly handles quoted strings containing '>' or '/'
+  const tagRegex = new RegExp(`<${componentName}(\\s+(?:[^>"'/]|"[^"]*"|'[^']*')*)?(\\/)?>`, 'gi');
+
+  result = result.replace(tagRegex, (match, attrsStr, selfClosing) => {
+    const attrs = attrsStr || '';
+    onModified(true);
+
+    // Preserve other attributes but add when prop
+    const trimmedAttrs = attrs.trim();
+    if (selfClosing) {
+      if (trimmedAttrs) {
+        return `<Show when="${whenValue}" ${trimmedAttrs} />`;
+      }
+      return `<Show when="${whenValue}" />`;
+    }
+    if (trimmedAttrs) {
+      return `<Show when="${whenValue}" ${trimmedAttrs}>`;
+    }
+    return `<Show when="${whenValue}">`;
+  });
+
+  // Transform closing tags
+  const closingRegex = new RegExp(`</${componentName}>`, 'gi');
+  result = result.replace(closingRegex, () => {
+    onModified(true);
+    return '</Show>';
+  });
+
+  return result;
+}
+
+module.exports.parser = 'tsx';
diff --git a/packages/upgrade/src/versions/core-3/index.js b/packages/upgrade/src/versions/core-3/index.js
index a781774db1e..7dea880cf0d 100644
--- a/packages/upgrade/src/versions/core-3/index.js
+++ b/packages/upgrade/src/versions/core-3/index.js
@@ -19,7 +19,10 @@ export default {
     'transform-appearance-layout-to-options',
     'transform-themes-to-ui-themes',
     'transform-align-experimental-unstable-prefixes',
-    'transform-protect-to-show',
+    // React/JSX version of Protect→Show (handles .tsx, .jsx, .ts, .js files)
+    { name: 'transform-protect-to-show', packages: ['nextjs', 'react', 'expo', 'react-router', 'tanstack-react-start', 'astro'] },
+    // Vue SFC version of Protect→Show (handles .vue files)
+    { name: 'transform-protect-to-show-vue', packages: ['vue', 'nuxt'] },
     { name: 'transform-clerk-provider-inside-body', packages: ['nextjs'] },
   ],
 };

From 0f5ea42861ac15ed778f0e4c10596ae95965c49e Mon Sep 17 00:00:00 2001
From: Jacek <jacek@clerk.dev>
Date: Fri, 16 Jan 2026 21:40:41 -0600
Subject: [PATCH 2/5] chore: add changeset

---
 .changeset/vue-protect-to-show-codemod.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/vue-protect-to-show-codemod.md

diff --git a/.changeset/vue-protect-to-show-codemod.md b/.changeset/vue-protect-to-show-codemod.md
new file mode 100644
index 00000000000..bd628f70eb8
--- /dev/null
+++ b/.changeset/vue-protect-to-show-codemod.md
@@ -0,0 +1,5 @@
+---
+'@clerk/upgrade': patch
+---
+
+Add Vue-specific `transform-protect-to-show-vue` codemod that handles `.vue` SFC files with proper Vue v-bind syntax for the Protect to Show migration.

From 0ab746318d0f62ac6da3266ac3584a8151cb7c09 Mon Sep 17 00:00:00 2001
From: Jacek <jacek@clerk.dev>
Date: Fri, 16 Jan 2026 21:46:58 -0600
Subject: [PATCH 3/5] fix: add curly braces to satisfy eslint

---
 .../src/codemods/transform-protect-to-show-vue.cjs   | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/upgrade/src/codemods/transform-protect-to-show-vue.cjs b/packages/upgrade/src/codemods/transform-protect-to-show-vue.cjs
index 1e31b6646bb..5a959c2fdc1 100644
--- a/packages/upgrade/src/codemods/transform-protect-to-show-vue.cjs
+++ b/packages/upgrade/src/codemods/transform-protect-to-show-vue.cjs
@@ -197,21 +197,27 @@ function transformTemplate(templateContent, importedComponents) {
   // Transform Protect components (only if Protect was imported)
   if (importedComponents.has('Protect')) {
     result = transformProtectElements(result, wasModified => {
-      if (wasModified) dirtyFlag = true;
+      if (wasModified) {
+        dirtyFlag = true;
+      }
     });
   }
 
   // Transform SignedIn components (only if SignedIn was imported)
   if (importedComponents.has('SignedIn')) {
     result = transformSignedStateElements(result, 'SignedIn', 'signed-in', wasModified => {
-      if (wasModified) dirtyFlag = true;
+      if (wasModified) {
+        dirtyFlag = true;
+      }
     });
   }
 
   // Transform SignedOut components (only if SignedOut was imported)
   if (importedComponents.has('SignedOut')) {
     result = transformSignedStateElements(result, 'SignedOut', 'signed-out', wasModified => {
-      if (wasModified) dirtyFlag = true;
+      if (wasModified) {
+        dirtyFlag = true;
+      }
     });
   }
 

From 2c0cb623c98051ece920e0acb40fdbf6ee7ed99c Mon Sep 17 00:00:00 2001
From: Jacek <jacek@clerk.dev>
Date: Fri, 16 Jan 2026 21:48:53 -0600
Subject: [PATCH 4/5] fix: improve regex to handle closing tags with whitespace

---
 .../upgrade/src/codemods/transform-protect-to-show-vue.cjs  | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/upgrade/src/codemods/transform-protect-to-show-vue.cjs b/packages/upgrade/src/codemods/transform-protect-to-show-vue.cjs
index 5a959c2fdc1..b3077aef3dd 100644
--- a/packages/upgrade/src/codemods/transform-protect-to-show-vue.cjs
+++ b/packages/upgrade/src/codemods/transform-protect-to-show-vue.cjs
@@ -37,7 +37,8 @@ module.exports = function transformProtectToShowVue(fileInfo, { jscodeshift: j }
   const importedComponents = new Set();
 
   // Extract and transform <script> block
-  const scriptMatch = result.match(/(<script[^>]*>)([\s\S]*?)(<\/script>)/i);
+  // Use \b word boundary and [^>]* to handle closing tags with whitespace/attributes like </script >
+  const scriptMatch = result.match(/(<script[^>]*>)([\s\S]*?)(<\/script\b[^>]*>)/i);
   if (scriptMatch) {
     const [fullMatch, openTag, scriptContent, closeTag] = scriptMatch;
     const scriptResult = transformScript(scriptContent, j);
@@ -56,7 +57,8 @@ module.exports = function transformProtectToShowVue(fileInfo, { jscodeshift: j }
   // Only transform template if we found clerk imports
   if (importedComponents.size > 0) {
     // Extract and transform <template> block
-    const templateMatch = result.match(/(<template[^>]*>)([\s\S]*?)(<\/template>)/i);
+    // Use \b word boundary and [^>]* to handle closing tags with whitespace/attributes
+    const templateMatch = result.match(/(<template[^>]*>)([\s\S]*?)(<\/template\b[^>]*>)/i);
     if (templateMatch) {
       const [fullMatch, openTag, templateContent, closeTag] = templateMatch;
       const transformedTemplate = transformTemplate(templateContent, importedComponents);

From 61c025d8acab22a6ca462310789583a55059b595 Mon Sep 17 00:00:00 2001
From: Jacek <jacek@clerk.dev>
Date: Fri, 16 Jan 2026 22:02:59 -0600
Subject: [PATCH 5/5] style: format core-3 config

---
 packages/upgrade/src/versions/core-3/index.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/upgrade/src/versions/core-3/index.js b/packages/upgrade/src/versions/core-3/index.js
index 7dea880cf0d..745c5bef691 100644
--- a/packages/upgrade/src/versions/core-3/index.js
+++ b/packages/upgrade/src/versions/core-3/index.js
@@ -20,7 +20,10 @@ export default {
     'transform-themes-to-ui-themes',
     'transform-align-experimental-unstable-prefixes',
     // React/JSX version of Protect→Show (handles .tsx, .jsx, .ts, .js files)
-    { name: 'transform-protect-to-show', packages: ['nextjs', 'react', 'expo', 'react-router', 'tanstack-react-start', 'astro'] },
+    {
+      name: 'transform-protect-to-show',
+      packages: ['nextjs', 'react', 'expo', 'react-router', 'tanstack-react-start', 'astro'],
+    },
     // Vue SFC version of Protect→Show (handles .vue files)
     { name: 'transform-protect-to-show-vue', packages: ['vue', 'nuxt'] },
     { name: 'transform-clerk-provider-inside-body', packages: ['nextjs'] },