@astrojs/ svelte

v9.0.0 GitHub npm Registro de cambios

Esta integración de Astro habilita el renderizado y la hidratación del lado del cliente para tus componentes de Svelte 5. Para soporte de Svelte 3 y 4, instala @astrojs/svelte@5 en su lugar.

Instalación

Astro incluye un comando astro add para automatizar la configuración de las integraciones oficiales. Si lo prefieres, puedes instalar las integraciones manualmente en su lugar.

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

npx astro add svelte

pnpm astro add svelte

yarn astro add svelte

Si tienes algún problema, no dudes en informarnos en GitHub e intenta los pasos de instalación manual a continuación.

Instalación manual

Primero, instala el paquete @astrojs/svelte:

npm install @astrojs/svelte

pnpm add @astrojs/svelte

yarn add @astrojs/svelte

La mayoría de los gestores de paquetes también instalarán las dependencias peer asociadas. Si ves una advertencia Cannot find package 'svelte' (o similar) al iniciar Astro, necesitarás instalar Svelte y TypeScript:

npm install svelte typescript

pnpm add svelte typescript

yarn add svelte typescript

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

import { defineConfig } from 'astro/config';
import svelte from '@astrojs/svelte';

export default defineConfig({
  // ...
  integrations: [svelte()],
});

Y crea un nuevo archivo llamado svelte.config.js en el directorio raíz de tu proyecto y añade el siguiente código:

import { vitePreprocess } from '@astrojs/svelte';

export default {
  preprocess: vitePreprocess(),
}

Primeros pasos

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

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

Opciones

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 más detalles.

Puedes establecer opciones pasándolas a la integración svelte en astro.config.mjs o en svelte.config.js. Las opciones en astro.config.mjs tendrán prioridad sobre las opciones en svelte.config.js si ambas están presentes:

import { defineConfig } from 'astro/config';
import svelte from '@astrojs/svelte';

export default defineConfig({
  integrations: [svelte({ extensions: ['.svelte'] })],
});

export default {
  extensions: ['.svelte'],
};

Preprocesadores

Añadido en: @astrojs/svelte@2.0.0

Si estás usando SCSS o Stylus en tus archivos de Svelte, puedes crear un archivo svelte.config.js para que sean preprocesados por Svelte, y la extensión IDE de Svelte pueda analizar correctamente los archivos de Svelte.

import { vitePreprocess } from '@astrojs/svelte';

export default {
  preprocess: vitePreprocess(),
};

Este archivo de configuración se añadirá automáticamente cuando ejecutes astro add svelte. Consulta la documentación de @sveltejs/vite-plugin-svelte para más detalles sobre vitePreprocess.