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.

Install with the CLI

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

pnpx starwind@latest init --framework vue --defaults
pnpx starwind@latest add button --framework vue

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

yarn dlx starwind@latest init --framework vue --defaults
yarn dlx starwind@latest add button --framework vue

Add a Vue Component

Create this file:

<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:

---
import Layout from "@/layouts/Layout.astro";
import WelcomeButton from "@/components/WelcomeButton.vue";
---

<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 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 to your layout.

Manual Setup

For setup by hand, complete Astro manual setup, then install the Vue package from 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 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 if you run into a problem.