Layers Unwrapped

~ A Fresh Approach to Architect Nuxt 3 Apps ~

By @KrutiePatel

1

Extending Nuxt

Nuxt Module

import { defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule((options, nuxt) => {
  // `nuxt` provides build-time context
  // console.log(nuxt)
})

Nuxt Plugin

const nuxtApp = useNuxtApp()
// `nuxtApp` provides a runtime 
// console.log(nuxtApp)

2

Extending Nuxt with Layers ✨

3

Modules vs Layers


Nuxt Modules	Nuxt Layers
Brings external libraries in Nuxt (Integrations)	Isolate re-usable parts of Nuxt App
Low-level construct (extends Nuxt core)	High-level construct (extend user features, i.e. UI)

addComponentsDir(dir)
extendPages (callback: pages => void)
addPlugin(pluginOptions, { append? })
addServerPlugin()
Nuxt Kit

Nuxt Kit: https://nuxt.com/docs/api/advanced/kit

4

Layer-able parts

https://github.com/nuxt/nuxt/issues/13367

5

How do Layers work?

It’s a two-step process: create & extend

6

Two-step process to layer-up

Ref: https://github.com/unjs/c12


✅	Create layers
✅	Extend them in the `nuxt.config.ts`

// nuxt.config.ts (Nuxt app that consumes layers)

export default defineNuxtConfig({
  extends: [
    '../base',                     // Local layer
    '@my-themes/awesome',          // NPM package
    'github:my-themes/awesome#v1' // Git repository
  ]
})

7

Starter Template

npx nuxi init --template layer [layer-name]

8

Demo

9

Demo Repo

Github Repo

10

Thinking in Layers

11

Thank you

@KrutiePatel

12