The CLI

To start a new Qwik Astro project, run the command in your preferred package manager.

npm create @qwik.dev/astro@latest

# or with pnpm
pnpm create @qwik.dev/astro@latest

# or with bun
bun create @qwik.dev/astro@latest

Existing projects

To install @qwik.dev/astro in an existing project, run the following from your project directory and follow the prompts.

npx astro add @qwik.dev/astro

# or with pnpm
pnpm astro add @qwik.dev/astro

TypeScript config

The integration needs the following in tsconfig.json for TypeScript to recognize Qwik’s JSX types.

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "@qwik.dev/core"
  }
}

If you don’t intend to use Qwik as your primary jsxImportSource, add the following at the top of each Qwik component file:

/** @jsxImportSource @qwik.dev/core */

Manual installation

Install the integration and Qwik core:

npm install @qwik.dev/astro @qwik.dev/core

Then add the integration to your astro.config.mjs:

import { defineConfig } from 'astro/config';
import qwik from '@qwik.dev/astro';

export default defineConfig({
  integrations: [qwik()],
});