Published on npm as `@c1ach0/nppt`

Nuxt Presentation Tools

Build your site once, present it live without leaving Nuxt.

NPPT turns normal pages into synchronized viewer and presenter experiences. Keep your real components, add step metadata, and control the talk from a dedicated presenter panel.

1 site

One codebase for your site and the developer docs around NPPT.

2 roles

Viewer and presenter stay synchronized through route-aware state.

0 deck

No parallel slide repository to maintain just for demo day.

Viewer

Focused output for the audience

Keep the narrative clean with presentation-only fragments, hidden dense sections and a progress bar.

Presenter

Notes, keywords, timer and preview

Run your talk from a dashboard that knows the current step, next path and speaker context.

Nuxt

nuxt.config.ts
npm install @c1ach0/nppt

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ["@c1ach0/nppt"]
})

Product pillars

A presentation layer that respects the site you already built.

Keep the real page

NPPT works on the page you already have. You annotate sections instead of rebuilding the content in a separate slide deck.

Separate viewer and presenter roles

The audience sees a clean focused view while the speaker gets notes, keywords, timer and next controls.

Stay in Nuxt ergonomics

You keep Vue templates, routes, components and Tailwind classes. Presentation logic stays close to your content.

Why teams use it

Present the product from the product.

NPPT is especially useful when the best demo is already your real app, docs or marketing page, and you want tight presentation controls without duplicating content.

v-nppt directive for step metadata, notes, keywords and route handoff

Viewer and presenter roles layered on top of normal Nuxt routes

Declarative components for progressive reveal and content simplification

Built-in launcher, presenter panel, preview and progress indicator

Optional runtime API for custom toolbars and internal presentation controls

For developers

Built for teams who want less presentation overhead, not more.

Works with your route tree

NPPT does not ask you to maintain a parallel presentation router. It follows the Nuxt pages you already own.

SSR-friendly integration

The module plugs into Nuxt as a normal module and exposes presentation behavior through global components, directive types and runtime injection.

Good for real product demos

Marketing pages, portfolio flows, blog pages and internal product walkthroughs can all live in the same codebase.

Workflow

Small API surface, fast feedback loop.

01

Annotate

Attach `v-nppt` to meaningful sections and define titles, notes and progression.

02

Adapt

Use `NpptHideOnPresentation` and `NpptShowOnPresentation` to simplify what the audience sees.

03

Present

Launch the viewer window, keep the presenter dashboard on your machine and control steps in sync.

Ready to try it

Explore the API and wire it into your own Nuxt routes.

The documentation page covers the directive, built-in components, the role model and the runtime API you need to build your own presentation flow.

NPPT

Reuse real Nuxt pages as synchronized presentation surfaces.

Landing page and docs built in the same Nuxt app to show how the module behaves in a normal site and in presentation mode.