> Markdown version of [/videos/315-fast-furious-going-headless-with-nuxt-js](https://www.wearedevelopers.com/videos/315-fast-furious-going-headless-with-nuxt-js). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# Fast & Furious - Going headless with Nuxt.js!

Tired of monolithic CMS constraints? Bridge the gap between developer freedom and marketer usability. Learn to build a lightning-fast headless architecture using Nuxt.js and Storyblok.

- **Speakers:** Samuel Snopko
- **Event:** JavaScript Congress
- **Published:** November 24, 2021
- **Duration:** 42:21
- **URL:** https://www.wearedevelopers.com/videos/315-fast-furious-going-headless-with-nuxt-js

## Summary

Building a headless architecture bridges the gap between developer freedom and marketer usability. This walkthrough demonstrates how to construct a dynamic, fast-rendering web application from scratch using Nuxt.js and Storyblok. The workflow begins by scaffolding a Nuxt app, connecting it to a CMS space via a dedicated Nuxt module and an access token, and configuring a local environment to leverage a real-time visual editor.

A core advantage of this headless stack is the ability to create infinitely nested, reusable components. By defining content types—like grids, features, and teasers—within the CMS and mirroring them in Nuxt, engineering teams can use Vue's dynamic component rendering to map JSON payloads directly to UI elements. This atomic design approach allows content editors to visually assemble pages, reorder sections, and preview changes across device breakpoints without triggering rebuilds or touching code.

Moving beyond basic layouts, robust content structures require efficient data fetching and asset management. Implementing an article schema highlights the use of built-in image optimization services and relational data. A critical optimization is utilizing the API's relational resolution parameters, which fetch nested reference content—such as hand-picked featured articles—in a single request rather than returning isolated UUIDs. Furthermore, pairing this headless setup with static site generation (SSG) ensures that SEO metadata can be seamlessly injected at build time, bypassing the constraints of traditional monolithic plugins. Ultimately, this decoupled architecture empowers developers with strict content schemas and framework choice while delivering a highly intuitive, page-builder-like experience for non-technical teams.

**Keywords:** headless cms, nuxt.js, storyblok integration, visual content editing, dynamic component rendering, atomic design, content modeling, api relation resolution, static site generation, headless seo, nested components, frontend decoupling, content schemas

## Chapters

1. **Scaffolding a new Nuxt application from scratch** (01:37) — Initializing a basic Nuxt project using the command line generator establishes the frontend foundation.
1. **Initializing a headless content workspace in Storyblok** (04:28) — Creating a new space provides a centralized environment for structuring and managing raw content.
1. **Connecting Nuxt to the Storyblok API module** (07:48) — Integrating the official module and access token allows the application to authenticate and pull content securely.
1. **Configuring local preview inside the visual editor** (10:04) — Pointing the CMS environment to a localhost server enables developers to view exact rendering behavior during development.
1. **Defining content types and nestable atomic components** (13:02) — Structuring data into nestable block components allows for deep architectural flexibility and atomic design patterns.
1. **Mapping headless components to dynamic Vue components** (15:55) — Using dynamic rendering logic maps incoming JSON block structures directly to specific frontend Vue components.
1. **Fetching page content using the asyncData hook** (19:05) — Requesting JSON payloads during the asynchronous lifecycle pulls actual CMS data into the frontend markup.
1. **Enabling real-time updates with the Storyblok Bridge** (23:10) — Listening to editor events dynamically updates the interface without requiring explicit page reloads.
1. **Building a custom article type with custom fields** (24:54) — Designing custom field schemas for articles accommodates unique data types like rich text and optimized images.
1. **Resolving nested content relations for featured articles** (28:01) — Using relational query parameters fetches the full content payload of referenced articles instead of just their unique IDs.
1. **Exploring upcoming interface features in Storyblok version two** (32:52) — Upcoming workflow enhancements and streamlined interface elements offer tighter collaboration controls for content teams.
1. **Addressing GraphQL, SEO, and headless e-commerce integrations** (35:35) — Strategies for static site generation resolve SEO concerns while management APIs allow seamless e-commerce integration.

## Related Moments

- [Core features of the Nuxt meta-framework for Vue](https://www.wearedevelopers.com/videos/1306-wearedevelopers-live-whats-nuxt-and-next-for-app-development-20-years-ajax-and-more) (from "WeAreDevelopers LIVE - Whats Nuxt and Next for app development, 20 years AJAX and more")
- [Introduction to Nuxt 3 and its core framework capabilities](https://www.wearedevelopers.com/videos/818-nuxt-js-just-vue-3-and-a-bit-of-magic) (from "Nuxt.js - Just Vue 3 and a bit of magic?")
- [Implementing server-rendered Vue apps using the Nuxt framework](https://www.wearedevelopers.com/videos/421-next-nest-nuxt-nust) (from "Next, Nest, Nuxt… Nust?")
- [Introduction to modern web development with Nuxt two](https://www.wearedevelopers.com/videos/294-modern-web-development-with-nuxt3) (from "Modern Web Development with Nuxt3")
- [Leveraging the JAMstack concept for content-driven web applications](https://www.wearedevelopers.com/videos/118-how-to-stop-choosing-javascript-frameworks-and-start-living) (from "How to Stop Choosing JavaScript Frameworks and Start Living")
- [Managing application content with a headless GraphQL CMS](https://www.wearedevelopers.com/videos/321-build-your-own-subscription-based-course-platform) (from "Build Your Own Subscription-based Course Platform")

## Related Articles

- [All the videos of Halfstack London 2024!](https://www.wearedevelopers.com/magazine/521-all-the-videos-of-halfstack-london-2024)
- [Dev Digest 104 - Fight for your right to 3rd party](https://www.wearedevelopers.com/magazine/390-dev-digest-104-fight-for-your-right-to-3rd-party)
- [Web Development Best Practices: What The Data Tells us](https://www.wearedevelopers.com/magazine/84-web-development-best-practices-what-the-data-tells-us)
- [3 JavaScript-Free Techniques for Accordions, Dialogs, and Table of Contents](https://www.wearedevelopers.com/magazine/684-3-javascript-free-techniques-for-accordions-dialogs-and-table-of-contents)

## Related Jobs

- [Frontend Engineer](https://www.wearedevelopers.com/jobs/ext/2731832-frontend-engineer) at **Almedia**
- [Mid/Senior Full-Stack Engineer (Web-first)](https://www.wearedevelopers.com/jobs/ext/1210833-mid-senior-full-stack-engineer-web-first) at **SMG Swiss Marketplace Group**
- [Staff Frontend Software Engineer](https://www.wearedevelopers.com/jobs/48370-staff-frontend-software-engineer) at **Bitdrift**
- [Founding Engineer (Front End)](https://www.wearedevelopers.com/jobs/48423-founding-engineer-front-end) at **Momentic**
- [Senior Software Engineer, React (Websites & Martech)](https://www.wearedevelopers.com/jobs/ext/1605272-senior-software-engineer-react-websites-martech) at **Bitpanda**
- [Senior Fullstack Engineer, Angular & Nestjs (Defi Wallet)](https://www.wearedevelopers.com/jobs/ext/1983681-senior-fullstack-engineer-angular-nestjs-defi-wallet) at **Bitpanda**