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
pnpm install @styleframe/runtime

Add styleframe to Nuxt

Next, add styleframe to your Nuxt configuration file.

nuxt.config.ts
export default defineNuxtConfig({
  modules: ['styleframe/plugin/nuxt'],
});

Configure TypeScript

Styleframe generates TypeScript declarations for type-safe imports. Update your tsconfig.json to include the generated files:

tsconfig.json
{
  "compilerOptions": {
    "moduleResolution": "bundler",
    "noEmit": true
  },
  "include": [
    "styleframe.config.ts",
    "*.styleframe.ts",
    ".styleframe/**/*.d.ts"
  ]
}

Add the generated directory to your .gitignore:

.gitignore
.styleframe/

Import styleframe in your project

Open your app.vue file and import the auto-generated virtual module:

app.vue
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.