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

As a Slidev Addon

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"]
  }
}

As a Vue Plugin (Experimental)

Since v0.7.0, you can also use this as a Vue plugin. This helps avoid some configuration file conflicts.

// main/setup.ts
import naive from "slidev-naive-addon";

export default defineAppSetup(({ app }) => {
  app.use(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.

Known Issues

• No JavaScript support yet. Please use runtime that natively supports TypeScript such as Bun or Node since v22.6.0.
• The uno.config.ts file in your project will be overridden by this addon. Any styles specified in style.css with @apply directives are also suppressed for unknown reasons. If your slides rely on these configurations, consider using this addon as a Vue Plugin (requires v0.7.0).

Latest Changes

• v0.8.2: Corrected font size of <Alert> title.
• v0.8.1: Fixed a bug that causes font size applied by UnoCSS @apply directive not taking effect.
• v0.8.0: Override Naive UI font size with base font size.
• v0.7.0: Added support for using addon as a Vue plugin.
• v0.6.0: Added full support for UnoCSS utility classes. No more ! prefixes needed!
• v0.5.1: Improved logic in main.ts.
• v0.5.0: Added support for dynamic dark theme.
• v0.4.0: Fixed a bug that caused Naive UI styles not loaded.
• v0,3.0: Adopted a new way of loading components.
• v0.2.0: Added all components.
• v0.1.0: First working version with a few components.