How to Use Integrations in Astro: Simple Guide

In Astro, you use integrations by adding them to the astro.config.mjs file inside the integrations array. This lets Astro extend its features, like adding support for frameworks or tools, by installing the integration package and configuring it in your project.

Syntax

To use an integration in Astro, you import it and add it to the integrations array in your astro.config.mjs file.

Each integration is a function you call, optionally with configuration options.

• import: Bring the integration package into your config file.
• integrations array: List all integrations your project uses.
• options: Customize integration behavior if supported.

javascript

import { defineConfig } from 'astro/config';
import someIntegration from 'astro-some-integration';

export default defineConfig({
  integrations: [
    someIntegration({ /* options here */ })
  ]
});

Example

This example shows how to add the Tailwind CSS integration to an Astro project. It installs the integration, imports it, and adds it to the config.

This enables Tailwind CSS styles in your Astro site without manual setup.

javascript

import { defineConfig } from 'astro/config';
import tailwind from '@astrojs/tailwind';

export default defineConfig({
  integrations: [tailwind()]
});

Output

Astro project configured with Tailwind CSS integration enabled.

Common Pitfalls

Common mistakes when using integrations include:

• Not installing the integration package with npm install or yarn add.
• Forgetting to import the integration in astro.config.mjs.
• Not adding the integration to the integrations array.
• Passing incorrect or missing options if the integration requires configuration.

Always check the integration's documentation for required setup steps.

javascript

import { defineConfig } from 'astro/config';

/* Wrong: Missing import and integration array */
export default defineConfig({
  // integrations: [] // empty or missing
});

/* Right: Import and add integration */
import tailwind from '@astrojs/tailwind';

export default defineConfig({
  integrations: [tailwind()]
});

Quick Reference

Summary tips for using Astro integrations:

• Always install the integration package first.
• Import the integration in astro.config.mjs.
• Add the integration to the integrations array.
• Pass options if needed, following the integration docs.
• Restart the Astro dev server after changes.

Key Takeaways

Add integrations by importing and listing them in the astro.config.mjs integrations array.

Install integration packages before using them in your project.

Check integration docs for required options and setup steps.

Restart the dev server after adding or changing integrations.

Common errors come from missing imports or not adding integrations to the config.