fix: fix #37

Author: zhouLion

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>

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,
+  }
+}

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**.

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)