Introduction
nuxt-tina is a Nuxt module that integrates TinaCMS into a Nuxt app. It lets a content editor edit content directly on the page being displayed. The Tina sidebar sits alongside it, and the page updates live as they type, with no reload.
Content still lives in Git (Markdown, MDX, or JSON). Tina is just the interface for editing it.
The problem it solves
TinaCMS has no official Vue or Nuxt integration. The visual editing bridge Tina already has (an iframe + postMessage architecture) has never been officially implemented for Vue.
nuxt-tina implements that bridge:
- Tina Admin runs at
/admin. - The Nuxt page loads inside an
<iframe>next to the editor form. - Every form change is sent to the page over
window.postMessage. - The
useTina()composable receives that payload and reactively updates Vue state.
Editing modes
The module provides two independent editing modes:
Basic CMS (/admin#/collections/): Tina's built-in edit form, reading/writing files directly. Doesn't need the bridge, always stable.
Visual editing (/admin#/~/path): two-way live preview through the iframe. The editor sees the real page while editing. This is the main reason the module exists.
If visual editing feels unstable in your project, basic CMS mode still works for every editing operation.
What gets registered automatically
Once the module is installed, the following are available with no extra configuration:
- Composables:
useTina(),useTinaBridge(),useTinaPreview() - Components:
<TinaProvider>,<TinaMarkdown>,<TinaMermaid> - A starter
tina/config.ts, scaffolded on first run if none exists - TypeScript types for every option
Continue to Installation to get started.