slidev-addon-naive

A Slidev addon that brings Naive UI components to your slides.

Usage

Install the package, with your package manager of choice:

npm install --save slidev-addon-naive
pnpm add slidev-addon-naive
yarn add slidev-addon-naive
bun add slidev-addon-naive

Then, enable this addon for your slides using front matter:

<!-- slides.md -->
---
addons:
  - naive
---
# A Slide Show
...

Alternatively, you can enable the addon by adding the following property into package.json:

{
  "slidev": {
    "addons": ["naive"]
  }
}

You can now seamlessly use Naive UI components in your slides, just as you would in any other Vue application! Both <n-name> and <NName> syntaxes are supported, along with full compatibility for props and slots.

<n-button strong tertiary>Button</n-button>

<NButton>Button</NButton>

<NCard title="Card Slots Demo" size="large" hoverable>
  <template #header-extra>
    #header-extra
  </template>
  Card Content
  <template #footer>
    #footer
  </template>
  <template #action>
    #action
  </template>
</NCard>

Tip

It is recommended to use the NName convention instead of n-name, for two reasons:

1. Tag names that have dashes in them may not be correctly syntax-highlighted in Markdown files.
2. Pascal Case convention aligns with other components used in Slidev.