From 6e6fb52bd20f8138718f863fd92671fcc3e64eb2 Mon Sep 17 00:00:00 2001
From: Quan <zhouquan147369@gmail.com>
Date: Sun, 16 Nov 2025 23:53:01 +0800
Subject: [PATCH 1/3] fix: fix
 https://github.com/vuepont/ai-elements-vue/issues/37

---
 apps/www/components/PmCreate.vue        | 36 ++++++++++++++
 apps/www/composables/useMyPm.ts         | 63 +++++++++++++++++++++++++
 apps/www/content/2.examples/workflow.md |  2 +-
 apps/www/plugins/ai-elements.ts         |  4 +-
 4 files changed, 103 insertions(+), 2 deletions(-)
 create mode 100644 apps/www/components/PmCreate.vue
 create mode 100644 apps/www/composables/useMyPm.ts

diff --git a/apps/www/components/PmCreate.vue b/apps/www/components/PmCreate.vue
new file mode 100644
index 0000000..9bdd561
--- /dev/null
+++ b/apps/www/components/PmCreate.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { useMyPm } from '@/composables/useMyPm'
+
+const {
+  inStack = false,
+  packageSpec,
+  name = '.',
+  sync = '_pm',
+  noSync,
+  optionsString = '',
+} = defineProps<{
+  inStack?: boolean
+  packageSpec: string
+  name?: string
+  sync?: string
+  noSync?: boolean
+  optionsString?: string
+}>()
+
+const { packageManagers } = useMyPm()
+
+const md = computed(() => `
+  ::code-group{${inStack ? 'in-stack' : ''} ${noSync ? '' : `sync="${sync}"`}}
+  ${
+    packageManagers.value.map((pm) => {
+      const code = `${pm.command}${pm.create}${packageSpec} ${name}${pm.name === 'npm' ? '-- ' : ' '}${optionsString}`
+      return `\`\`\`bash [${pm.name}]\n${code}\n\`\`\`\n`
+    }).join('\n')
+  }
+  ::
+  `)
+</script>
+
+<template>
+  <MDC :value="md" class="[&:not(:first-child)]:mt-5" />
+</template>
diff --git a/apps/www/composables/useMyPm.ts b/apps/www/composables/useMyPm.ts
new file mode 100644
index 0000000..17c3a59
--- /dev/null
+++ b/apps/www/composables/useMyPm.ts
@@ -0,0 +1,63 @@
+const packageManagersCode: {
+  name: 'npm' | 'pnpm' | 'bun' | 'yarn'
+  command: string
+  install: string
+  installEmpty: string
+  run: string
+  x: string
+  saveDev: string
+  create: string
+}[] = [
+  {
+    name: 'npm',
+    command: 'npm ',
+    install: 'i ',
+    installEmpty: 'install',
+    run: 'run ',
+    x: 'npx ',
+    saveDev: '-D ',
+    create: 'create ',
+  },
+  {
+    name: 'pnpm',
+    command: 'pnpm ',
+    install: 'i ',
+    installEmpty: 'install',
+    run: 'run ',
+    x: 'pnpm dlx ',
+    saveDev: '-D ',
+    create: 'create ',
+  },
+  {
+    name: 'bun',
+    command: 'bun ',
+    install: 'add ',
+    installEmpty: 'install',
+    run: 'run ',
+    x: 'bun x ',
+    saveDev: '-d ',
+    create: 'create ',
+  },
+  {
+    name: 'yarn',
+    command: 'yarn ',
+    install: 'add ',
+    installEmpty: 'install',
+    run: 'run ',
+    x: 'yarn dlx ',
+    saveDev: '-D ',
+    create: 'create ',
+  },
+]
+
+export function useMyPm() {
+  const { pm } = useConfig().value.main
+
+  const packageManagers = computed(
+    () => packageManagersCode.filter(x => pm.includes(x.name)),
+  )
+
+  return {
+    packageManagers,
+  }
+}
diff --git a/apps/www/content/2.examples/workflow.md b/apps/www/content/2.examples/workflow.md
index e4d0981..a9580ea 100644
--- a/apps/www/content/2.examples/workflow.md
+++ b/apps/www/content/2.examples/workflow.md
@@ -18,7 +18,7 @@ Let's walk through how to build a workflow visualization using AI Elements Vue.
 
   First, set up a new Vue.js repo by running the following command:
 
-  :pm-x{command="create vite@latest ai-workflow --template vue-ts"}
+  :pm-create{packageSpec="vite" name="ai-workflow" optionsString="--template vue-ts"}
 
   ::alert{type="info" icon="lucide:book"}
     Follow this [guide](https://www.shadcn-vue.com/docs/installation/vite.html) to setup **shadcn/vue** and **Tailwind**.
diff --git a/apps/www/plugins/ai-elements.ts b/apps/www/plugins/ai-elements.ts
index f28cbb7..a1d185e 100644
--- a/apps/www/plugins/ai-elements.ts
+++ b/apps/www/plugins/ai-elements.ts
@@ -7,11 +7,11 @@ import {
   Checkpoint,
   CodeBlock,
   CodeBlockDark,
-  Context,
   Confirmation,
   ConfirmationAccepted,
   ConfirmationRejected,
   ConfirmationRequest,
+  Context,
   Conversation,
   Image,
   InlineCitation,
@@ -46,12 +46,14 @@ import {
 
 import ComponentLoader from '@/components/ComponentLoader.vue'
 import ComponentViewer from '@/components/ComponentViewer.vue'
+import PmCreate from '@/components/PmCreate.vue'
 
 export default defineNuxtPlugin((nuxtApp) => {
   const { vueApp } = nuxtApp
 
   vueApp.component('ComponentLoader', ComponentLoader)
   vueApp.component('ComponentViewer', ComponentViewer)
+  vueApp.component('PmCreate', PmCreate)
 
   vueApp.component('Artifact', Artifact)
   vueApp.component('Actions', Actions)

From c2b0c6434886a43d5a54183493e914d7ecda8390 Mon Sep 17 00:00:00 2001
From: Quan <zhouquan147369@gmail.com>
Date: Mon, 17 Nov 2025 00:12:45 +0800
Subject: [PATCH 2/3] Revert "fix: fix
 https://github.com/vuepont/ai-elements-vue/issues/37"

This reverts commit 6e6fb52bd20f8138718f863fd92671fcc3e64eb2.
---
 apps/www/components/PmCreate.vue        | 36 --------------
 apps/www/composables/useMyPm.ts         | 63 -------------------------
 apps/www/content/2.examples/workflow.md |  2 +-
 apps/www/plugins/ai-elements.ts         |  2 -
 4 files changed, 1 insertion(+), 102 deletions(-)
 delete mode 100644 apps/www/components/PmCreate.vue
 delete mode 100644 apps/www/composables/useMyPm.ts

diff --git a/apps/www/components/PmCreate.vue b/apps/www/components/PmCreate.vue
deleted file mode 100644
index 9bdd561..0000000
--- a/apps/www/components/PmCreate.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<script setup lang="ts">
-import { useMyPm } from '@/composables/useMyPm'
-
-const {
-  inStack = false,
-  packageSpec,
-  name = '.',
-  sync = '_pm',
-  noSync,
-  optionsString = '',
-} = defineProps<{
-  inStack?: boolean
-  packageSpec: string
-  name?: string
-  sync?: string
-  noSync?: boolean
-  optionsString?: string
-}>()
-
-const { packageManagers } = useMyPm()
-
-const md = computed(() => `
-  ::code-group{${inStack ? 'in-stack' : ''} ${noSync ? '' : `sync="${sync}"`}}
-  ${
-    packageManagers.value.map((pm) => {
-      const code = `${pm.command}${pm.create}${packageSpec} ${name}${pm.name === 'npm' ? '-- ' : ' '}${optionsString}`
-      return `\`\`\`bash [${pm.name}]\n${code}\n\`\`\`\n`
-    }).join('\n')
-  }
-  ::
-  `)
-</script>
-
-<template>
-  <MDC :value="md" class="[&:not(:first-child)]:mt-5" />
-</template>
diff --git a/apps/www/composables/useMyPm.ts b/apps/www/composables/useMyPm.ts
deleted file mode 100644
index 17c3a59..0000000
--- a/apps/www/composables/useMyPm.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-const packageManagersCode: {
-  name: 'npm' | 'pnpm' | 'bun' | 'yarn'
-  command: string
-  install: string
-  installEmpty: string
-  run: string
-  x: string
-  saveDev: string
-  create: string
-}[] = [
-  {
-    name: 'npm',
-    command: 'npm ',
-    install: 'i ',
-    installEmpty: 'install',
-    run: 'run ',
-    x: 'npx ',
-    saveDev: '-D ',
-    create: 'create ',
-  },
-  {
-    name: 'pnpm',
-    command: 'pnpm ',
-    install: 'i ',
-    installEmpty: 'install',
-    run: 'run ',
-    x: 'pnpm dlx ',
-    saveDev: '-D ',
-    create: 'create ',
-  },
-  {
-    name: 'bun',
-    command: 'bun ',
-    install: 'add ',
-    installEmpty: 'install',
-    run: 'run ',
-    x: 'bun x ',
-    saveDev: '-d ',
-    create: 'create ',
-  },
-  {
-    name: 'yarn',
-    command: 'yarn ',
-    install: 'add ',
-    installEmpty: 'install',
-    run: 'run ',
-    x: 'yarn dlx ',
-    saveDev: '-D ',
-    create: 'create ',
-  },
-]
-
-export function useMyPm() {
-  const { pm } = useConfig().value.main
-
-  const packageManagers = computed(
-    () => packageManagersCode.filter(x => pm.includes(x.name)),
-  )
-
-  return {
-    packageManagers,
-  }
-}
diff --git a/apps/www/content/2.examples/workflow.md b/apps/www/content/2.examples/workflow.md
index a9580ea..b078aa3 100644
--- a/apps/www/content/2.examples/workflow.md
+++ b/apps/www/content/2.examples/workflow.md
@@ -18,7 +18,7 @@ Let's walk through how to build a workflow visualization using AI Elements Vue.
 
   First, set up a new Vue.js repo by running the following command:
 
-  :pm-create{packageSpec="vite" name="ai-workflow" optionsString="--template vue-ts"}
+  :pm-x{command="create-vite ai-workflow --template vue-ts"}
 
   ::alert{type="info" icon="lucide:book"}
     Follow this [guide](https://www.shadcn-vue.com/docs/installation/vite.html) to setup **shadcn/vue** and **Tailwind**.
diff --git a/apps/www/plugins/ai-elements.ts b/apps/www/plugins/ai-elements.ts
index a1d185e..64417a9 100644
--- a/apps/www/plugins/ai-elements.ts
+++ b/apps/www/plugins/ai-elements.ts
@@ -46,14 +46,12 @@ import {
 
 import ComponentLoader from '@/components/ComponentLoader.vue'
 import ComponentViewer from '@/components/ComponentViewer.vue'
-import PmCreate from '@/components/PmCreate.vue'
 
 export default defineNuxtPlugin((nuxtApp) => {
   const { vueApp } = nuxtApp
 
   vueApp.component('ComponentLoader', ComponentLoader)
   vueApp.component('ComponentViewer', ComponentViewer)
-  vueApp.component('PmCreate', PmCreate)
 
   vueApp.component('Artifact', Artifact)
   vueApp.component('Actions', Actions)

From fd284e718a229203e382831f3b5633b7190d1181 Mon Sep 17 00:00:00 2001
From: Charlie Wang <18888351756@163.com>
Date: Mon, 17 Nov 2025 10:30:41 +0800
Subject: [PATCH 3/3] chore: add @latest

---
 apps/www/content/2.examples/workflow.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/www/content/2.examples/workflow.md b/apps/www/content/2.examples/workflow.md
index b078aa3..1feb413 100644
--- a/apps/www/content/2.examples/workflow.md
+++ b/apps/www/content/2.examples/workflow.md
@@ -18,7 +18,7 @@ Let's walk through how to build a workflow visualization using AI Elements Vue.
 
   First, set up a new Vue.js repo by running the following command:
 
-  :pm-x{command="create-vite ai-workflow --template vue-ts"}
+  :pm-x{command="create-vite@latest ai-workflow --template vue-ts"}
 
   ::alert{type="info" icon="lucide:book"}
     Follow this [guide](https://www.shadcn-vue.com/docs/installation/vite.html) to setup **shadcn/vue** and **Tailwind**.