A reusable foundation for building modern websites with Nuxt, delivered as Nuxt layers: accessible unstyled primitives, a design system, or both.
Build once, reuse everywhere.
Every new website solves the same problems again: buttons, forms, navigation, responsive layouts, typography, colours, spacing, accessibility, animations, SEO, common sections. Nuxt Core turns them into building blocks that are developed and tested once, then combined into new sites.
Nuxt Core
│
├── UI components
├── Layouts
├── Website sections
├── Features
├── Themes
└── Templates
│
▼
New website
Nuxt Core is in early development, before 1.0.0. The project foundation, styling foundation, layout system and core UI components are done; forms come next. The roadmap shows every phase and what is done.
- Nuxt 4 and Vue 3
- TypeScript, in strict mode
- Sass (SCSS) and CSS custom properties
- Vitest
The UI is built from scratch rather than on a component library. The primitives carry the behaviour and accessibility; the design system, in SCSS, carries the look. They meet only through documented class and data-* hooks, so either can be replaced.
Nuxt Core comes in independent parts. A site picks what it needs:
| Part | extends |
For |
|---|---|---|
| Everything | @modulane/nuxt-core |
The components, styled by the design system |
| Primitives | @modulane/nuxt-core/primitives |
Accessible, unstyled components to style with your own CSS, Tailwind or anything else |
| Design | @modulane/nuxt-core/design |
The design tokens and styles, with your own or another library's components |
A site installs a release from GitHub and extends a part:
yarn add @modulane/nuxt-core@github:modulane/nuxt-core#v0.9.0// nuxt.config.ts
export default defineNuxtConfig({
extends: ['@modulane/nuxt-core'],
})The site can override any style with plain CSS, and any component, composable or layout with a file of the same name. Using Nuxt Core covers npm and pnpm, styling the primitives, using the design system with other components, and overrides.
Requirements: Node.js 22.22.3, 24.15, or 26 and later, and Corepack (included with Node.js 24 and earlier).
git clone https://github.com/modulane/nuxt-core.git
cd nuxt-core
corepack enable
yarn install
yarn devyarn dev runs the playground, a development app that extends the layer as a site does, at http://localhost:3000. Getting started lists every command and how to fix common setup problems.
| Guide | Covers |
|---|---|
| Using Nuxt Core | Installing the parts, styling, overriding |
| Getting started | Requirements, installation, commands |
| Architecture | Folder structure and configuration files |
| Conventions | Coding rules applied in review |
| Styling | SCSS architecture, design tokens, breakpoints |
| Components | Every component and its API |
| Composables | Every composable and its API |
| Testing | Running and writing tests |
| Theming | How themes will work |
The documentation index explains how the guides are kept up to date.
- Reusable: a component earns its place by serving several projects.
- Simple: solve the problem without unnecessary complexity.
- Accessible: usable with a keyboard and assistive technology.
- Responsive by default: works on every screen size.
- Consistent: similar problems get similar solutions.
- Few dependencies: add one only when it brings significant value.
- Built for real needs: grow from actual projects, not predictions.
Bug reports, feature ideas and pull requests are welcome. Issues labelled good first issue and help wanted are ready to pick up. CONTRIBUTING.md describes how to claim one, the workflow, labels and release process.