Layers Unwrapped: A Fresh Approach to Nuxt App Architecture
summary
Claims Nuxt layers let you package reusable UI, theme and data features without low‑level module hooks and are easier to author; layers are standard Nuxt projects (must contain nuxt.config) and can be local, npm or GitHub, powered by the c12 package and referenced via the extends array. Demo builds a pnpm monorepo, creates a UI layer with app.config → plugin that converts palettes to CSS variables, wires those into Tailwind, lets the app override the palette, adds a tested input component and a GraphQL Yoga Nitro API — the theme variables render and overrides work. app.config → CSS variables pnpm monorepo with workspaces
AI-written summary · about
chapters (14)
- 0:00Welcome
- 1:07Nuxt layers purpose
- 2:35How Nuxt layers work
- 3:39First Nuxt layer
- 5:08Layer to monorepo
- 7:26Integrate layer into app
- 9:28Layer configuration
- 12:18Theming with CSS variables
- 17:04Tailwind with layer variables
- 19:57Test layer changes
- 21:03Component library with layers
- 23:18Layer use cases
- 24:45Layer types
- 25:27Q&A
related talks
24mMulti-variant apps with Nuxt 3
38mLarge Scale Nuxt Architecture
36mEfficient multisite setup with Nuxt Layers
22mMulti-Tenant Frontend Architecture with Nuxt.js
22mWays to architecture your vue/nuxt app
16mNuxt Architecture
32mDungeon Mastering Your Vue App From Chaos to Order
10mLightning talk: Domain Driven Design & Nuxt