Saltearse al contenido

@astrojs/ svelte

Esta integración de Astro permite el renderizado en el lado del servidor y la hidratación en el lado del cliente para tus componentes de Svelte. Compatible con Svelte 3, 4, y 5 (experimental).

Existen dos formas de agregar integraciones a tu proyecto. ¡Vamos a probar la opción más conveniente primero!

Astro incluye una herramienta de línea de comando (CLI) para agregar integraciones de primera parte: astro add. Este comando hará:

  1. (Opcionalmente) Instalar todas las dependencias necesarias y dependencias entre pares
  2. (También opcionalmente) Actualizar tu archivo astro.config.* para aplicar esta integración

Para instalar @astrojs/svelte, ejecuta lo siguiente desde el directorio de tu proyecto y sigue las instrucciones:

Ventana de terminal
# Usando NPM
npx astro add svelte
# Usando Yarn
yarn astro add svelte
# Usando PNPM
pnpm astro add svelte

Si tienes algún problema, no dudes en informárnoslo en GitHub y prueba los pasos de instalación manual a continuación.

Primero, instala la integración @astrojs/svelte de la siguiente manera:

Ventana de terminal
npm install @astrojs/svelte

La mayoría de los gestores de paquetes instalarán también las dependencias de pares asociadas. Sin embargo, si ves un aviso “No se puede encontrar el paquete ‘svelte’” (o similar) al iniciar Astro, deberás instalar Svelte:

Ventana de terminal
npm install svelte

Ahora, aplica esta integración a tu archivo astro.config.* usando la propiedad integrations:

astro.config.mjs
import { defineConfig } from 'astro/config';
import svelte from '@astrojs/svelte';
export default defineConfig({
// ...
integrations: [svelte()],
// ^^^^^^^^
});

Para usar tu primer componente Svelte en Astro, dirígete a nuestra documentación de frameworks UI. Explorarás:

  • 📦 como se cargan los componentes de framework,
  • 💧 opciones de hidratación del lado del cliente, y
  • 🤝 oportunidades para mezclar y anidar frameworks juntos

Para obtener ayuda, consulta el canal #support en Discord. ¡Nuestros amables miembros del Equipo de Soporte están aquí para ayudar!

También puedes consultar nuestra documentación de integración de Astro para obtener más información sobre las integraciones.

Este paquete es mantenido por el equipo central de Astro. ¡Estás invitado a enviar un problema o PR!

Esta integración está impulsada por @sveltejs/vite-plugin-svelte. Para personalizar el compilador de Svelte, se pueden proporcionar opciones a la integración. Consulta la documentación de @sveltejs/vite-plugin-svelte para obtener más detalles.

Esta integración pasa las siguientes opciones predeterminadas al compilador de Svelte:

const defaultOptions = {
emitCss: true,
compilerOptions: { dev: isDev, hydratable: true },
preprocess: vitePreprocess(),
};

Estos valores emitCss, compilerOptions.dev, y compilerOptions.hydratable son necesarios para construir correctamente para Astro y no pueden ser anulados.

Proporcionar tus propias opciones de preprocess sobrescribirá la configuración predeterminada devitePreprocess(). Asegúrate de habilitar las banderas de preprocesamiento necesarias para tu proyecto.

Puedes establecer opciones ya sea pasándolas a la integración svelte en astro.config.mjs o en svelte.config.js. Cualquiera de estos sobrescribiría la configuración predeterminada de preprocess:

astro.config.mjs
import { defineConfig } from 'astro/config';
import svelte from '@astrojs/svelte';
export default defineConfig({
integrations: [svelte({ preprocess: [] })],
});
svelte.config.js
export default {
preprocess: [],
};

Añadido en: @astrojs/svelte@2.0.0

Si estás utilizando un preprocesador como TypeScript o SCSS en tus archivos Svelte, puedes crear un archivo svelte.config.js para que la extensión del IDE de Svelte pueda analizar correctamente los archivos Svelte.

svelte.config.js
import { vitePreprocess } from '@astrojs/svelte';
export default {
preprocess: vitePreprocess(),
};

Este archivo de configuración se agregará automáticamente cuando ejecutes astro add svelte.

Más integraciones

Frameworks UI

Adaptadores SSR

Otras integraciones