WORK-090
ID:WORK-090Status:done

Create @refrakt-md/nuxt adapter package

Build the Nuxt framework adapter. Nuxt is Vite-based like SvelteKit, so the existing Vite plugin logic (virtual modules, content HMR) can be substantially reused.

Priority:mediumComplexity:moderateMilestone:v1.0.0
claude/align-sidenav-styling-4MuxV View source

Criteria completion

No incremental history — criteria tracking started on Apr 17.

Relationships

Implements 2
Related 2
Branches 3
claude/align-sidenav-styling-4MuxV current done
main doneclaude/file-naming-convention-LJdwR donechangeset-release/main done
History 5
  1. 4765c91
    Content editedby Claude
    Mark WORK-090, WORK-091, WORK-092 as done with resolution summaries
  2. b94f7d8
    Content editedby Claude
    Implement SPEC-030 Phases 2-4: Nuxt, Next.js, and Eleventy adapters
  3. 11e81a8
    Content editedby Claude
    Add framework work items to v1.0.0 milestone
  4. 982a9db
    Content editedby Claude
    Add documentation ACs to adapter work items and create WORK-093
  5. ead9531
    Created (done)by Claude
    Add work items WORK-088 through WORK-092 for framework adapter system

Acceptance Criteria

  • packages/nuxt/ package exists with correct package.json (peer dep nuxt@^3.0.0)
  • Nuxt module (module.ts) registers Vite plugin, injects CSS, configures build.transpile, sets Vue isCustomElement for rf-* tags
  • Adapted Vite plugin reuses virtual module and content HMR logic from SvelteKit plugin
  • RefraktContent.vue renders page tree via renderToHtml() + v-html
  • useRefraktMeta() composable maps page SEO data to Nuxt's useHead() (OG tags, JSON-LD)
  • Catch-all route pages/[...slug].vue loads content via useAsyncData() + loadContent()
  • Behavior init/cleanup handled via onMounted/onBeforeUnmount, re-init on route change via watcher
  • Lumina Nuxt adapter exports theme config + CSS entry point
  • Example site renders core runes, layouts, behaviors, and web components correctly
  • Adapter documentation page at site/content/docs/adapters/nuxt.md with installation, project structure, configuration, code examples (Nuxt module setup, RefraktContent usage, useRefraktMeta composable, route setup, behavior lifecycle, SEO injection), and getting-started guide matching the depth of existing SvelteKit adapter docs

Approach

Build a Nuxt module via defineNuxtModule that wraps an adapted version of the SvelteKit Vite plugin. The main adaptation is changing virtual module import paths from lumina/svelte to lumina/nuxt. Content HMR reuses the same server.watcher pattern. The RefraktContent.vue component is trivial — just renderToHtml() + v-html.

The SvelteKit plugin's CORE_NO_EXTERNAL list maps directly to nuxt.options.build.transpile.

Dependencies

  • WORK-088 (shared utility extraction)

References

  • SPEC-030 (Phase 2)
  • ADR-002 (Nuxt section)

Resolution

Completed: 2026-04-04

Branch: claude/implement-spec-030-F0LFn

What was done

  • Created packages/nuxt/ with Nuxt module, renderPage, buildRefraktHead composable, hasInteractiveRunes
  • Lumina Nuxt adapter at packages/lumina/nuxt/index.ts
  • Docs page at site/content/docs/adapters/nuxt.md

Notes

  • Uses defineNuxtModule with builder:watch for HMR and builder:generateApp for rebuild
  • Vue custom element config for rf-* tags handled in module setup
  • hasInteractiveRunes uses getBehaviorNames() from @refrakt-md/behaviors registry