Nuxt

Nuxt Content Island Module

The Nuxt Content Island Module provides a seamless integration between your Nuxt application and the Content Island API.

It’s the easiest way to fetch and manage content from Content Island inside your Nuxt app — no backend boilerplate, just fast and secure content delivery.

👉 View on npm: @content-island/nuxt

🚀 Quick Start

1. Install

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

# or
npm install @content-island/nuxt

2. Configure

Add the module to your nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@content-island/nuxt'],
  contentIsland: {
    accessToken: process.env.CONTENT_ISLAND_ACCESS_TOKEN, // required
    // domain, secureProtocol, apiVersion… (see options below)
  },
});

3. Fetch Content

Inside a page or component:

<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>

---

✨ Features

• Zero-config integration with Nuxt.
• Secure credentials with Nuxt runtime config.
• Automatic plugin injection: use $contentIsland anywhere.
• TypeScript ready with type-safe options.
• Flexible content queries (single or list).
• Supports Markdown, code highlighting & rich text.

---

⚙️ Module Options

Option	Type	Required	Default	Description
accessToken	string	✅ Yes	–	Your Content Island API token.
domain	string	No	–	Custom API domain.
secureProtocol	boolean	No	true	Use HTTPS for API requests.
apiVersion	string	No	v1	API version to use.

🔐 Always keep accessToken in env variables.

---

🛠 Example Project

Check the playground directory for a working Nuxt demo:

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

Includes:

• Dynamic pages fetching content.
• Markdown & syntax highlighting.
• Sample Nuxt config for reference.

---

📚 Next Steps

We are preparing step-by-step tutorials and videos that will cover:

• Project setup from scratch.
• Using Content Island with Nuxt composables.
• Rendering Markdown and custom fields.