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.
Nuxt Presentation Tools
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
Keep the narrative clean with presentation-only fragments, hidden dense sections and a progress bar.
Presenter
Run your talk from a dashboard that knows the current step, next path and speaker context.
Nuxt
npm install @c1ach0/nppt
// nuxt.config.ts
export default defineNuxtConfig({
modules: ["@c1ach0/nppt"]
})Product pillars
NPPT works on the page you already have. You annotate sections instead of rebuilding the content in a separate slide deck.
The audience sees a clean focused view while the speaker gets notes, keywords, timer and next controls.
You keep Vue templates, routes, components and Tailwind classes. Presentation logic stays close to your content.
Why teams use it
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
NPPT does not ask you to maintain a parallel presentation router. It follows the Nuxt pages you already own.
The module plugs into Nuxt as a normal module and exposes presentation behavior through global components, directive types and runtime injection.
Marketing pages, portfolio flows, blog pages and internal product walkthroughs can all live in the same codebase.
Workflow
01
Attach `v-nppt` to meaningful sections and define titles, notes and progression.
02
Use `NpptHideOnPresentation` and `NpptShowOnPresentation` to simplify what the audience sees.
03
Launch the viewer window, keep the presenter dashboard on your machine and control steps in sync.
Ready to try it
The documentation page covers the directive, built-in components, the role model and the runtime API you need to build your own presentation flow.