覆盖组件

用自定义 Vue 组件替换 shadcn-docs-nuxt 组件。

shadcn-docs-nuxt 是一个 Nuxt Layer。您可以通过在项目中创建与原始组件相同路径的自定义 Vue 组件来覆盖 shadcn-docs-nuxt 中的任何组件。确保您的组件包含与原始组件相同的 props。

以下是 shadcn-docs-nuxt 中 components/ 文件夹的简要展示。

components/
- layout/
  Header.vue
  Footer.vue
  ...
- content/
  Accordion.vue
  Alert.vue
  ProseCode.vue
  ...
- ui/
  button/
  card/
  ...

Check out the complete file structure on GitHub

例如，如果您想覆盖 Footer 组件，请在项目根目录中创建 /components/layout/Footer.vue。

/components/layout/Footer.vue

<template>
  <footer class="text-muted-foreground py-6 md:px-8 md:py-0">
    <div class="container flex flex-col items-center justify-between gap-2 md:h-24 md:flex-row">
      My footer
      <span class="flex-1" />
      {{ footer.credits }}
    </div>
  </footer>
</template>

<script setup lang="ts">
const { footer } = useConfig().value;
</script>

Star on GitHub Create Issues