Astro Integrations — Official and Community Plugins

In this tutorial, you will learn about Astro Integrations. We cover key concepts, practical examples, and best practices to help you master this topic.

Learn Astro integrations: add React, Vue, Svelte, Tailwind, sitemap, and community plugins to extend your Astro project with minimal configuration.

In this lesson, you'll install and configure official Astro integrations for UI frameworks, styling, SEO, and performance optimization.

What You'll Learn

How to add framework integrations for interactive islands, install SEO and utility integrations, configure integration options, and find community plugins.

Why It Matters

Integrations extend Astro without manual configuration. A single npx astro add command installs and configures popular tools, saving hours of setup.

Real-World Use

DodaTech uses Astro integrations for React (search component), Tailwind (styling), sitemap (SEO), and Partytown (third-party scripts).

flowchart LR
    A[astro add react] --> B[React Integration]
    A --> C[Vue Integration]
    A --> D[Svelte Integration]
    A --> E[Tailwind Integration]
    A --> F[Sitemap Integration]
    style A fill:#ff5a03,color:#fff

Adding Integrations

Use the CLI to add integrations:

npx astro add react
npx astro add vue
npx astro add svelte
npx astro add tailwind
npx astro add sitemap

Each command installs the npm package and updates astro.config.mjs.

Manual Configuration

Integrations are configured in astro.config.mjs:

import { defineConfig } from "astro/config";
import react from "@astrojs/react";
import vue from "@astrojs/vue";
import svelte from "@astrojs/svelte";
import tailwind from "@astrojs/tailwind";
import sitemap from "@astrojs/sitemap";

export default defineConfig({
  site: "https://example.com",
  integrations: [
    react(),
    vue(),
    svelte(),
    tailwind({
      configFile: "./tailwind.config.mjs",
    }),
    sitemap(),
  ],
});

Integration Options

Some integrations accept configuration options:

react({
  include: ["**/react/**"],
});

sitemap({
  filter: (page) => !page.includes("/admin/"),
  changefreq: "weekly",
  priority: 0.8,
});

Partytown Integration

Run third-party scripts in a web worker:

npx astro add partytown

import partytown from "@astrojs/partytown";

export default defineConfig({
  integrations: [
    partytown({
      config: {
        forward: ["dataLayer.push"],
      },
    }),
  ],
});

Third-party scripts like Google Analytics run in a worker thread, keeping the main thread free for user interaction.

Finding Community Integrations

Browse the Astro integrations directory at astro.build/integrations. Popular community integrations include @astrojs/mdx, astro-compress, astro-seo, and astro-robots-txt.

Common Mistakes

1. Adding integrations without checking compatibility: Some community integrations may not work with the latest Astro version. Check compatibility before installing.
2. Not restarting the dev server: After adding an integration, restart npm run dev. Hot reload may not pick up config changes.
3. Configuring integrations in the wrong file: Integration settings go in astro.config.mjs, not in separate config files.
4. Missing environment variables for integrations: Some integrations (like @astrojs/sitemap) need site in the Astro config to generate correct URLs.
5. Installing integrations that overlap: Multiple integrations that modify the same build step (e.g., two image optimization integrations) may conflict.

Practice Questions

1. What command adds a React integration to Astro? Answer: npx astro add react. It installs the package and updates the config.

2. Where do you configure integration options? Answer: In the integration's function call in astro.config.mjs, e.g., sitemap({ filter: ... }).

3. What does the Partytown integration do? Answer: It runs third-party scripts in a web worker, preventing them from blocking the main thread.

4. How do you find community Astro integrations? Answer: Visit the official Astro integrations directory at astro.build/integrations.

Challenge

Set up a project with four integrations: React for interactive components, Tailwind for styling, sitemap for SEO, and MDX for content. Configure each with appropriate options.

Mini Project

Build a site with React (search bar island), Vue (testimonial carousel), Tailwind (all styling), sitemap (auto-generated XML), and Partytown (Google Analytics). Verify all integrations work together.

FAQ

What's Next

Learn about Astro Sitemap and RSS for generating sitemaps and RSS feeds for your site.