Astro Strapi Loader

Astro Strapi Loader Integration of Astro with Strapi CMS that enables easy data loading from Strapi Content API

---

📋 Table of Contents

• 📋 Requirements
• 📦 Installation
• 🚀 Features
• 🤖 AI-native support
• 🖥️ Usage
• ⚙️ Configuration
• 🔧 Development
• 🤝 Contributing
• 📄 License

📋 Requirements

• Astro ^6.0.0 || ^7.0.0
• Strapi ^5.0.0
• Node.js >= 22.12.0

📦 Installation

npm install @sensinum/astro-strapi-loader
# or
yarn add @sensinum/astro-strapi-loader

🚀 Features

• Easy integration with Astro and Strapi
• Automatic data loading from Strapi API
• Query, filtering and population capabilities - Strapi 5 Documentation
• Authorization token support
• Astro collections system integration
• TypeScript typing
• 🆕 Custom ID generation - Generate collection IDs from custom fields (e.g., slugs)
• 🆕 Multiple collections - Create multiple collections from same endpoint
• 🆕 i18n support - Built-in locale support for multilingual content

🤖 AI-native support

This repository includes optional, model-agnostic guidance for coding agents and AI-assisted workflows (Strapi REST query objects, populate / dynamic zones, locale, qs serialization, and Astro Collections usage).

Location	Purpose
.ai/AGENTS.md	Short agent instructions—non-negotiables and pointers to the skill.
.ai/astro-strapi-loader/SKILL.md	Full skill (YAML frontmatter + markdown); copy or adapt for your global or project skills directory.
.cursor/rules/astro-strapi-loader.mdc	Cursor rules for files such as content.config.ts (.mdc with optional globs).

You can reuse or fork these files in downstream projects that consume @sensinum/astro-strapi-loader so assistants stay aligned with Strapi 5 REST parameters and this package’s behavior. The published npm package contains only dist/; AI assets live in the GitHub tree alongside the source.

🖥️ Usage

1. Add the integration to your src/content.config.ts:

import { generateCollections } from '@sensinum/astro-strapi-loader';

let strapiCollections: any = {};

try {
  strapiCollections = await generateCollections({
    url: import.meta.env.STRAPI_URL,
    token: import.meta.env.STRAPI_TOKEN,
    headers: {
      // ...
    },
  }, [{ // leave empty [] to fetch all the collections based on default Strapi settings
    name: "homepage",
    query: {
      populate: { seo: true },
    },
  }, {
    name: "layout",
    query: {
      populate: { header: true, footer: true },
    },
  }, 'simple-collection-name']); // Can also pass just strings
} catch (error) {
  console.error(error);
}

export const collections = {
    ...strapiCollections,
};

✅ Backward Compatible: Existing code works without any changes!

2. Use in your Astro component:

---
import { getCollection } from 'astro:content';
import { fetchContent } from '@sensinum/astro-strapi-loader';

// Basic usage with Astro Collections
const myCollection = await getCollection('my-collection');