Usando 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.

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

Execute astro add [nome-da-integração] e nosso assistente automático de integrações irá atualizar seu arquivo de configuração e instalar quaisquer dependências necessárias.

# Usando NPM
npx astro add react
# Usando Yarn
yarn astro add react
# Usando PNPM
pnpx astro add react

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

# Usando NPM
npx astro add react tailwind partytown
# Usando Yarn
yarn astro add react tailwind partytown
# Usando PNPM
pnpx astro add react tailwind partytown

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.

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.

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})
]

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()
]

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.

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.