Getting Started
Instalasi & Konfigurasi
Pasang nuxt-tina di project Nuxt dan verifikasi hasilnya.
Prasyarat
- Nuxt 3 atau Nuxt 4
- Node.js 18+
- Akun Tina Cloud (opsional, mode lokal tetap jalan tanpa akun)
1. Install package-nya
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. Daftarkan module-nya
Tambahkan nuxt-tina ke modules di nuxt.config.ts:
nuxt.config.ts
export default defineNuxtConfig({
modules: ['nuxt-tina'],
tina: {
visualEditing: true,
},
})
3. Buat config Tina
Module ini otomatis nulis tina/config.ts pas pertama kali dijalankan, kalau belum ada. Ini yang di-scaffold. Kalau mau nulis sendiri:
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. Tambahkan environment variables
Buat file .env di root project:
.env
# Tina Cloud (opsional buat dev lokal)
NUXT_TINA_CLIENT_ID=client-id-kamu
NUXT_TINA_TOKEN=read-only-token-kamu
NUXT_TINA_BRANCH=main
Tanpa
NUXT_TINA_CLIENT_ID dan NUXT_TINA_TOKEN, Tina jalan di mode lokal, baca langsung dari filesystem. Itu udah cukup buat development lokal.5. Jalankan dev server
Terminal
npm run dev
# atau
pnpm dev
Verifikasi hasilnya
Buka http://localhost:3000/admin di browser.
Kalau instalasinya berhasil, kamu bakal lihat interface Tina Admin dengan collection yang sudah dikonfigurasi di tina/config.ts. Buka salah satu dokumen buat mastiin form editornya muncul.
Buat test visual editing, buka
/admin#/~/ dan pilih halaman dari daftarnya. Tina bakal muat halaman itu di dalam iframe di samping form editor.Langkah selanjutnya
- Contextual Editing: pakai
useTina()di halaman - Media & Cloudinary: setup upload gambar
- Tina Cloud: konek ke cloud buat production