Pular para o conteúdo
Astro Astro

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

Frameworks de UI

Adaptadores de SSR

Outras

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.

Terminal window
npx astro add react

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

Terminal window
npx astro add react tailwind partytown

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

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

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

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

Terminal window
npm uninstall @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

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

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.