# Astro + Vue Installation

Use Starwind Vue components in your Astro pages. Run the commands below from your project folder.
Need a project first? Follow the [Astro setup guide](/docs/frameworks/astro/).

## Install with the CLI

This installs the Vue integration and adds a Button to your project.

```bash
npx starwind@latest init --framework vue --defaults
npx starwind@latest add button --framework vue
```

## Add a Vue Component

Create this file:

```vue title="src/components/WelcomeButton.vue"
<script setup lang="ts">
import { Button } from "@/components/starwind-vue/button";
</script>

<template>
  <Button>Hello from Vue</Button>
</template>
```

## Render the Island

Add it to an Astro page, using your existing page layout:

```astro title="src/pages/index.astro"
<Layout>
  <WelcomeButton client:load />
</Layout>
```

`client:load` makes the component interactive in the browser.

## Adding More Components

Choose the Vue tab on a [component page](/docs/components/) and copy its installation command.
Keep `--framework vue` on the command so the CLI installs the Vue version.

## What the CLI Does

The CLI adds the Astro Vue integration and installs the required Starwind packages. It records
where to put Vue components and connects the shared stylesheet. Add the component to a page with
`client:load`, as shown above. For saved themes, add the
[Astro theme script](/docs/frameworks/astro/#stylesheet-and-theme-initialization) to your layout.

## Manual Setup

For setup by hand, complete [Astro manual setup](/docs/frameworks/astro/#manual-setup), then install
the Vue package from [Manual Setup](/docs/getting-started/manual-setup/). Configure the Astro
Vue integration and use the component directory below. Keep `framework: "astro"` in
`starwind.config.json` and set `componentDirs.vue` to `src/components/starwind-vue`.

## Configuration Details

Components are installed in `src/components/starwind-vue`. Astro and Vue share
`src/styles/starwind.css`; your layout should import it once. See the
[Astro layout example](/docs/frameworks/astro/#stylesheet-and-theme-initialization) for styles and theme setup.

Keep related parts, such as a Dialog’s trigger and content, together in a `.vue` component.
Import that component into your Astro page and add `client:load` to make it interactive.

[Report an issue](https://github.com/starwind-ui/starwind-ui/issues) if you run into a problem.