Add Integrations
此内容尚不支持你的语言。
Astro integrations add new functionality and behaviors for your project with only a few lines of code. You can write a custom integration yourself, use an official integration, or use integrations built by the community.
Integrations can…
- Unlock React, Vue, Svelte, Solid, and other popular UI frameworks.
- Integrate tools like Tailwind, and Partytown with a few lines of code.
- Add new features to your project, like automatic sitemap generation.
- Write custom code that hooks into the build process, dev server, and more.
Official Integrations
Section titled Official IntegrationsUI 框架
SSR 配接器
其他
Automatic Integration Setup
Section titled Automatic Integration SetupAstro includes an astro add
command to automate the setup of integrations.
Run the astro add
command using the package manager of your choice and our automatic integration wizard will update your configuration file and install any necessary dependencies.
It’s even possible to add multiple integrations at the same time!
If you see any warnings like Cannot find package '[package-name]'
after adding an integration, your package manager may not have installed peer dependencies for you. To install these missing packages, run npm install [package-name]
.
Using Integrations
Section titled Using IntegrationsAstro integrations are always added through the integrations
property in your astro.config.mjs
file.
There are three common ways to import an integration into your Astro project:
-
Installing an npm package integration.
-
Import your own integration from a local file inside your project.
-
Write your integration inline, directly in your config file.
Check out the Integration API reference to learn all of the different ways that you can write an integration.
Custom Options
Section titled Custom OptionsIntegrations are almost always authored as factory functions that return the actual integration object. This lets you pass arguments and options to the factory function that customize the integration for your project.
Toggle an Integration
Section titled Toggle an IntegrationFalsy integrations are ignored, so you can toggle integrations on & off without worrying about left-behind undefined
and boolean values.
Upgrading Integrations
Section titled Upgrading IntegrationsTo upgrade all official integrations at once, run the @astrojs/upgrade
command. This will upgrade both Astro and all official integrations to their latest versions.
Automatic Upgrading
Section titled Automatic UpgradingManual Upgrading
Section titled Manual UpgradingTo upgrade one or more integrations manually, use the appropriate command for your package manager.
Removing an Integration
Section titled Removing an IntegrationTo remove an integration, first uninstall the integration from your project
Next, remove the integration from your astro.config.*
file:
Finding More Integrations
Section titled Finding More IntegrationsYou can find many integrations developed by the community in the Astro Integrations Directory. Follow links there for detailed usage and configuration instructions.
Building Your Own Integration
Section titled Building Your Own IntegrationAstro’s Integration API is inspired by Rollup and Vite, and designed to feel familiar to anyone who has ever written a Rollup or Vite plugin before.
Check out the Integration API reference to learn what integrations can do and how to write one yourself.
Recipes