How to Install Integration in Astro: Simple Steps

To install an integration in Astro, first run npm install <integration-package> in your project folder. Then, add the integration to the integrations array inside your astro.config.mjs file to enable it.

Syntax

Installing an integration in Astro involves two main steps:

• Install the package: Use npm install <integration-package> or yarn add <integration-package> to add the integration to your project.
• Configure Astro: Import the integration in astro.config.mjs and add it to the integrations array.

javascript

import { defineConfig } from 'astro/config';
import integrationName from 'integration-package';

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

Example

This example shows how to install the Tailwind CSS integration in an Astro project.

bash // javascript

npm install @astrojs/tailwind

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

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

Output

Astro project now supports Tailwind CSS styles via the installed integration.

Common Pitfalls

Common mistakes when installing integrations include:

• Forgetting to add the integration to astro.config.mjs, so it won't activate.
• Not running npm install or yarn add first, causing missing package errors.
• Incorrect import paths or missing parentheses when adding the integration function.

javascript

/* Wrong: Missing integration in config */
// astro.config.mjs
import { defineConfig } from 'astro/config';

export default defineConfig({
  integrations: [], // integration not added here
});

/* Right: Correctly added integration */
import integrationName from 'integration-package';

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

Quick Reference

Steps to install any Astro integration:

• Run npm install <package-name> or yarn add <package-name>.
• Import the integration in astro.config.mjs.
• Add the integration function call to the integrations array.
• Restart your Astro dev server to apply changes.

Key Takeaways

Always install the integration package before configuring it in Astro.

Add the integration to the integrations array in astro.config.mjs to activate it.

Use the integration function call with parentheses when adding it to the config.

Restart the Astro server after installing or changing integrations.

Check the integration's documentation for any extra setup steps.