Getting Started
Installation & Setup
Install nuxt-tina in a Nuxt project and verify it works.
Prerequisites
- Nuxt 3 or Nuxt 4
- Node.js 18+
- A Tina Cloud account (optional, local mode works without one)
1. Install the package
pnpm add nuxt-tina tinacms @tinacms/cli
yarn add nuxt-tina tinacms @tinacms/cli
npm install nuxt-tina tinacms @tinacms/cli
bun add nuxt-tina tinacms @tinacms/cli
2. Register the module
Add nuxt-tina to modules in nuxt.config.ts:
nuxt.config.ts
export default defineNuxtConfig({
modules: ['nuxt-tina'],
tina: {
visualEditing: true,
},
})
3. Create the Tina config
The module writes tina/config.ts automatically the first time it runs, if none exists yet. This is what gets scaffolded. To write it yourself instead:
tina/config.ts
import { defineConfig } from 'tinacms'
export default defineConfig({
branch: process.env.NUXT_TINA_BRANCH || 'main',
clientId: process.env.NUXT_TINA_CLIENT_ID || '',
token: process.env.NUXT_TINA_TOKEN || '',
build: {
outputFolder: 'admin',
publicFolder: 'public',
},
media: {
tina: {
mediaRoot: 'uploads',
publicFolder: 'public',
},
},
schema: {
collections: [
{
name: 'page',
label: 'Pages',
path: 'content/pages',
format: 'md',
fields: [
{
type: 'string',
name: 'title',
label: 'Title',
isTitle: true,
required: true,
},
{
type: 'rich-text',
name: 'body',
label: 'Body',
isBody: true,
},
],
},
],
},
})
4. Add environment variables
Create a .env file at the project root:
.env
# Tina Cloud (optional for local dev)
NUXT_TINA_CLIENT_ID=your-client-id
NUXT_TINA_TOKEN=your-read-only-token
NUXT_TINA_BRANCH=main
Without
NUXT_TINA_CLIENT_ID and NUXT_TINA_TOKEN, Tina runs in local mode, reading straight from the filesystem. That's enough for local development.5. Start the dev server
Terminal
npm run dev
# or
pnpm dev
Verify it worked
Open http://localhost:3000/admin in your browser.
If the install worked, you'll see the Tina Admin interface with the collections configured in tina/config.ts. Open one of the documents to confirm the editor form shows up.
To test visual editing, open
/admin#/~/ and pick a page from the list. Tina loads that page inside an iframe next to the editor form.Next steps
- Contextual Editing: using
useTina()on a page - Media & Cloudinary: setting up image uploads
- Tina Cloud: connecting to the cloud for production