Это содержимое пока не доступно на вашем языке.
Build your Astro website without sacrificing your favorite component framework. Create Astro islands with the UI frameworks of your choice.
Official UI Framework IntegrationsSection titled Official UI Framework Integrations
Find even more community-maintained framework integrations (e.g. Angular, Qwik, Elm) in our integrations directory.
Installing IntegrationsSection titled Installing Integrations
One or several of these Astro integrations can be installed and configured in your project.
See the Integrations Guide for more details on installing and configuring Astro integrations.
Want to see an example for the framework of your choice? Visit astro.new and select one of the framework templates.
Using Framework ComponentsSection titled Using Framework Components
/src/components, or can be organized in any way you like.
To use a framework component, import it from its relative path in your Astro component script. Then, use the component alongside other components, HTML elements and JSX-like expressions in the component template.
Hydrating Interactive ComponentsSection titled Hydrating Interactive Components
A framework component can be made interactive (hydrated) using a
With all client directives except
Available Hydration DirectivesSection titled Available Hydration Directives
There are several hydration directives available for UI framework components:
Mixing FrameworksSection titled Mixing Frameworks
You can import and render components from multiple frameworks in the same Astro component.
Only Astro components (
.astro) can contain components from multiple frameworks.
Passing Props to Framework ComponentsSection titled Passing Props to Framework Components
You can pass props from Astro components to framework components:
You can pass a function as a prop to a framework component, but it only works during server rendering. If you try to use the function in a hydrated component (for example, as an event handler), an error will occur.
This is because functions can’t be serialized (transferred from the server to the client) by Astro.
Passing Children to Framework ComponentsSection titled Passing Children to Framework Components
Inside of an Astro component, you can pass children to framework components. Each framework has its own patterns for how to reference these children: React, Preact, and Solid all use a special prop named
children, while Svelte and Vue use the
<slot /> element.
Additionally, you can use Named Slots to group specific children together.
For React, Preact, and Solid, these slots will be converted to a top-level prop. Slot names using
kebab-case will be converted to
For Svelte and Vue these slots can be referenced using a
<slot> element with the
name attribute. Slot names using
kebab-case will be preserved.
Nesting Framework ComponentsSection titled Nesting Framework Components
Inside of an Astro file, framework component children can also be hydrated components. This means that you can recursively nest components from any of these frameworks.
Remember: framework component files themselves (e.g.
.svelte) cannot mix multiple frameworks.
Astro components are always rendered to static HTML, even when they include framework components that are hydrated. This means that you can only pass props that don’t do any HTML rendering. Passing React’s “render props” to framework components from an Astro component will not work, because Astro components can’t provide the client runtime behavior that this pattern requires. Instead, use named slots.
Can I use Astro Components inside my Framework Components?Section titled Can I use Astro Components inside my Framework Components?
Any UI framework component becomes an “island” of that framework. These components must be written entirely as valid code for that framework, using only its own imports and packages. You cannot import
.astro components in a UI framework component (e.g.
You can, however, use the Astro
<slot /> pattern to pass static content generated by Astro components as children to your framework components inside an
Can I Hydrate Astro Components?Section titled Can I Hydrate Astro Components?
If you try to hydrate an Astro component with a
client: modifier, you will get an error.
Astro components are HTML-only templating components with no client-side runtime. But, you can use a
<script> tags in Astro components