markdown/docs/1.简单文档/5.components/code-group.md

title, icon, badges

title	icon	badges
Code Group	lucide:code-xml	value to target Nuxt UI Pro https://ui.nuxt.com/pro/prose/code-group _blank value to target Docus https://docus.dev/api/components#codegroup _blank value icon to target Source lucide:code https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/CodeGroup.vue _blank

Usage

::stack ::div{class="p-4"} ::code-group vue [app.vue] <template> <div> <NuxtLayout> <NuxtPage /> </NuxtLayout> </div> </template>

  ```vue [pages/index.vue]
  <template>
    <div>
      <h1>Welcome to the homepage</h1>
      <AppAlert>
        This is an auto-imported component
      </AppAlert>
    </div>
  </template>
  ```
::

::

::code-group
  ```vue [app.vue]
  <template>
    <div>
      <NuxtLayout>
        <NuxtPage />
      </NuxtLayout>
    </div>
  </template>
  ```

  ```vue [pages/index.vue]
  <template>
    <div>
      <h1>Welcome to the homepage</h1>
      <AppAlert>
        This is an auto-imported component
      </AppAlert>
    </div>
  </template>
  ```
::

::

::alert{to="/components/docs/tabs"} ::code-group{lang="mdc"} is a wrapper around ::tabs{variant="card"}{lang="mdc"}. ::

Props

:field{name="sync" type="string"}[Sync scope for ::tabs]