Nuxt

Módulo Nuxt Content Island

El Módulo Nuxt Content Island proporciona una integración perfecta entre tu aplicación Nuxt y la API de Content Island.

Es la forma más sencilla de obtener y gestionar contenido de Content Island dentro de tu aplicación Nuxt — sin necesidad de backend complejo, con una entrega de contenido rápida y segura.

👉 Ver en npm: @content-island/nuxt

🚀 Inicio Rápido

1. Instalación

# Recomendado
npx nuxi@latest module add @content-island/nuxt

# o
npm install @content-island/nuxt

2. Configuración

Agrega el módulo a tu nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@content-island/nuxt'],
  contentIsland: {
    accessToken: process.env.CONTENT_ISLAND_ACCESS_TOKEN, // requerido
    // domain, secureProtocol, apiVersion… (ver opciones abajo)
  },
});

3. Obtener Contenido

Dentro de una página o componente:

<script setup lang="ts">
const { $contentIsland } = useNuxtApp();

const { data: posts } = await useAsyncData('posts', () => $contentIsland.getContentList({ contentType: 'post' }));
</script>

<template>
  <ul>
    <li v-for="post in posts" :key="post.id">
      {{ post.title }}
    </li>
  </ul>
</template>

---

✨ Características

• Integración sin configuración con Nuxt.
• Credenciales seguras con la configuración en tiempo de ejecución de Nuxt.
• Inyección automática de plugin: usa $contentIsland en cualquier lugar.
• Listo para TypeScript con opciones tipadas.
• Consultas de contenido flexibles (único o listado).
• Compatibilidad con Markdown, resaltado de código y rich text.

---

⚙️ Opciones del Módulo

Opción	Tipo	Requerido	Default	Descripción
accessToken	string	✅ Sí	–	Tu token de API de Content Island.
domain	string	No	–	Dominio API personalizado.
secureProtocol	boolean	No	true	Usar HTTPS para las solicitudes a la API.
apiVersion	string	No	v1	Versión de la API a utilizar.

🔐 Mantén siempre accessToken en variables de entorno.

---

🛠 Proyecto de Ejemplo

Consulta el directorio playground para ver una demo funcional con Nuxt:

npm install
cd playground && npm install
cd ..
npm start

Incluye:

• Páginas dinámicas obteniendo contenido.
• Renderizado de Markdown y resaltado de sintaxis.
• Configuración de Nuxt como referencia.

---

📚 Próximos Pasos

Estamos preparando tutoriales y videos paso a paso que cubrirán:

• Configuración de un proyecto desde cero.
• Uso de Content Island con composables de Nuxt.
• Renderizado de Markdown y campos personalizados.