@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).

Instalación

Sección titulada 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:

npm

npx astro add svelte

pnpm

pnpm astro add svelte

Yarn

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

Instalación manual

Sección titulada Instalación manual

Primero, instala el paquete @astrojs/svelte:

npm

npm install @astrojs/svelte

pnpm

pnpm add @astrojs/svelte

Yarn

yarn add @astrojs/svelte

La mayoría de los gestores de paquetes instalarán también las dependencias asociadas. Si ves un mensaje de advertencia de “No se puede encontrar el paquete ‘svelte’” (o similar) cuando inicias Astro, tendrás que instalar Svelte:

npm

npm install svelte

pnpm

pnpm add svelte

Yarn

yarn add svelte

Luego, aplica la 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()],
});

Empezando

Sección titulada Empezando

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

Opciones

Sección titulada 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 obtener más detalles.

Opciones por defecto

Sección titulada Opciones por defecto

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: [],
};

Intellisense para TypeScript

Sección titulada Intellisense para TypeScript

Agregado 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

• 

  @astrojs/alpinejs

• 

  @astrojs/lit

• 

  @astrojs/preact

• 

  @astrojs/react

• 

  @astrojs/solid⁠-⁠js

• 

  @astrojs/svelte

• 

  @astrojs/vue

Adaptadores SSR

• 

  @astrojs/cloudflare

• 

  @astrojs/netlify

• 

  @astrojs/node

• 

  @astrojs/vercel

Otras integraciones

• 

  @astrojs/db

• 

  @astrojs/markdoc

• 

  @astrojs/mdx

• 

  @astrojs/partytown

• 

  @astrojs/sitemap

• 

  @astrojs/tailwind