Rewriting Nord Docs with Nuxt
We've completely rewritten the Nord Design System documentation site from the ground up, replacing the previous Eleventy-based static site with a modern Nuxt 4 application.
Why the rewrite?
The original documentation site served us well, but as Nord Design System grew, we needed a platform that could keep up with our ambitions. The Eleventy setup was becoming increasingly difficult to extend with interactive features, and we wanted to unlock new capabilities that a Vue-based framework could offer.
Key motivations included:
- Nuxt Studio integration — enabling designers and content editors to contribute directly to the docs without touching code.
- Vue component ecosystem — leveraging Vue's component model for richer, more interactive documentation pages.
- AI support — laying the groundwork for AI-assisted tooling and integrations.
- Better developer experience — hot module replacement, TypeScript throughout, and a more maintainable codebase.
What's new
Built on Nuxt 4 with Content v3
The new docs site uses Nuxt 4 with @nuxt/content v3 for content management. All existing markdown content was migrated, and we've added custom MDC (Markdown Components) for interactive elements like callouts, component usage blocks, and live examples.
Full-text search
We've implemented client-side full-text search powered by MiniSearch, allowing you to quickly find components, guidelines, tokens, and documentation pages.
Component documentation from source
Component pages are now generated directly from the web component source code using nuxt-component-meta. Properties, events, slots, methods, and CSS custom properties are extracted automatically, ensuring the docs always match the latest release.
Live examples in iframes
Every component example runs in its own isolated iframe, providing a clean rendering environment that accurately represents how components behave in production. Examples are prerendered as part of the build for fast loading.
LLMs.txt support
We've added /llms.txt and /llms-full.txt routes that provide AI-friendly versions of our documentation, making it easier for large language models to understand and reference Nord Design System.
Sitemap, SEO and accessibility
The site includes automatic sitemap generation, structured data with Schema.org, and comprehensive meta tags. We've maintained our commitment to accessibility throughout the rebuild.
Theme Builder and Color Generator
The Theme Builder and Color Generator tools have been rebuilt as Vue pages, with full theme switching support and URL-based state persistence.
Technical highlights
- Nuxt 4 with Vue 3.5 and Vite
- @nuxt/content v3 with SQLite-backed content queries
- Tailwind CSS v4 with the Nord CSS utility layer
- Shiki for syntax highlighting with Nord-themed code blocks
- Server API routes for component metadata, examples, navigation, and assets
- Static generation with nearly 2,000 prerendered routes
- GitHub Pages deployment with PR preview support
What's next
This rewrite opens the door for several exciting improvements we have planned:
- Nuxt Studio for visual content editing
- Vue web component experiments
- Interactive playground with Storybook for trying components in the browser
- AI skills for integrating Nord Design System with AI-assisted development workflows
- MCP server for connecting Nord Design System directly to AI-powered development tools
We're excited about the foundation this provides and look forward to building on it.