Styleframe Logo

Manual Nuxt Installation

Installation instructions for a custom Nuxt setup with styleframe. Get started with styleframe in your Nuxt project

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.

pnpm 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.

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:

main.ts
import 'virtual:styleframe.css';

Create a styleframe theme file

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

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 15 minutes.