Adicione Integrações

Integrações Astro adicionam novas funcionalidades e comportamentos para o seu projeto com apenas algumas linhas de código. Você mesmo pode escrever uma integração customizada, usar uma integração oficial, ou usar integrações feitas pela comunidade.

Integrações podem…

• Habilitar React, Vue, Svelte, Solid e outros frameworks de UI populares.
• Integrar ferramentas como Tailwind e Partytown com algumas linhas de código.
• Adicionar novas funcionalidades ao seu projeto, como geração de sitemap automático.
• Escrever código customizado que é executado no processo de build, no servidor de desenvolvimento e mais.

Integrações Oficiais

Seção intitulada Integrações Oficiais

Frameworks de UI

• 

  @astrojs/alpinejs

• 

  @astrojs/lit

• 

  @astrojs/preact

• 

  @astrojs/react

• 

  @astrojs/solid⁠-⁠js

• 

  @astrojs/svelte

• 

  @astrojs/vue

Adaptadores de SSR

• 

  @astrojs/cloudflare

• 

  @astrojs/netlify

• 

  @astrojs/node

• 

  @astrojs/vercel

Outras integrações

• 

  @astrojs/db

• 

  @astrojs/markdoc

• 

  @astrojs/mdx

• 

  @astrojs/partytown

• 

  @astrojs/sitemap

• 

  @astrojs/tailwind

Instalação Automática de Integrações

Seção intitulada Instalação Automática de Integrações

Astro inclui o comando astro add para automatizar a instalação de integrações.

Execute o comando astro add utilizando o gerenciador de pacotes de sua escolha para que nosso assistente automático de integrações atualize seu arquivo de configuração e instale quaisquer dependências necessárias.

npm

npx astro add react

pnpm

pnpm astro add react

Yarn

yarn astro add react

É até mesmo possível adicionar múltiplas integrações ao mesmo tempo!

npm

npx astro add react tailwind partytown

pnpm

pnpm astro add react tailwind partytown

Yarn

yarn astro add react tailwind partytown

Lidando com Dependências de Integrações

Se você encontrar quaisquer avisos como Cannot find package '[nome-do-pacote]' após adicionar uma integração, seu gerenciador de pacotes pode não ter instalado as dependências de pares para você. Para instalar esses pacotes faltando, execute npm install [nome-do-pacote].

Usando Integrações

Seção intitulada Usando Integrações

Integrações Astro são sempre adicionadas através da propriedade integrations no seu arquivo astro.config.mjs.

Há três formas comuns de importar uma integração em seu projeto Astro:

1. Instalando uma integração como um pacote npm.
2. Importando sua própria integração de um arquivo local dentro do seu projeto.
3. Escrevendo sua própria integração diretamente no seu arquivo de configuração.

astro.config.mjs

import {defineConfig} from 'astro/config';
import integracaoInstalada from '@astrojs/vue';
import integracaoLocal from './minha-integracao';

export default defineConfig({
  integrations: [
    // 1. Importado de um pacote npm
    integracaoInstalada(),
    // 2. Importado de um arquivo JS local
    integracaoLocal(),
    // 3. Um objeto inserido diretamente
    {name: 'namespace:id', hooks: { /* ... */ }},
  ]
})

Veja a API de Integrações para aprender sobre todas as diferentes formas em que você pode escrever uma integração.

Opções Customizadas

Seção intitulada Opções Customizadas

Integrações são quase sempre escritas como funções de fábrica que retornam um objeto da integração. Isso te permite passar argumentos e opções para a função de fábrica que customiza a integração do seu projeto.

integrations: [
  // Exemplo: Customize sua integração com os argumentos da função
  sitemap({filter: true})
]

Ligando/Desligando uma Integração

Seção intitulada Ligando/Desligando uma Integração

Integrações com valores falsy são ignoradas, então você pode alternar integrações entre ligado e desligado sem se preocupar com undefined e valores booleanos deixados para trás.

integrations: [
  // Exemplo: Pula a build do sitemap no Windows
  process.platform !== 'win32' && sitemap()
]

Removendo uma Integração

Seção intitulada Removendo uma Integração

Para remover uma integração, primeiro desinstale a integração do seu projeto

npm

npm uninstall @astrojs/react

pnpm

pnpm uninstall @astrojs/react

Yarn

yarn remove @astrojs/react

Depois, remova a integração do seu arquivo astro.config.*:

astro.config.mjs

import { defineConfig } from 'astro/config'

import react from "@astrojs/react";

export default defineConfig({
  integrations: [
    react()
  ]
})

Encontrando Mais Integrações

Seção intitulada Encontrando Mais Integrações

Você pode encontrar várias integrações desenvolvidas pela comunidade no Diretório de Integrações Astro. Siga seus links para instruções mais detalhadas de utilização e configuração.

Criando sua Própria Integração

Seção intitulada Criando sua Própria Integração

A API de Integrações do Astro foi inspirada pelo Rollup e Vite, e projetada para parecer familiar a qualquer um que já tenha escrito um plugin Rollup ou Vite anteriormente.

Veja a referência da API de Integrações para aprender o que integrações podem fazer e como escrever uma você mesmo.