WeAreDevelopers Logo WeAreDevelopers
Sign in
For You LIVE
JavaScript Congress • Nov 24, 2021

Fast & Furious - Going headless with Nuxt.js!

Samuel Snopko

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.

Pause
Mute Enter Fullscreen
#1 about 3 min

Scaffolding a new Nuxt application from scratch

Initializing a basic Nuxt project using the command line generator establishes the frontend foundation.

#2 about 4 min

Initializing a headless content workspace in Storyblok

Creating a new space provides a centralized environment for structuring and managing raw content.

#3 about 3 min

Connecting Nuxt to the Storyblok API module

Integrating the official module and access token allows the application to authenticate and pull content securely.

#4 about 3 min

Configuring local preview inside the visual editor

Pointing the CMS environment to a localhost server enables developers to view exact rendering behavior during development.

#5 about 3 min

Defining content types and nestable atomic components

Structuring data into nestable block components allows for deep architectural flexibility and atomic design patterns.

#6 about 4 min

Mapping headless components to dynamic Vue components

Using dynamic rendering logic maps incoming JSON block structures directly to specific frontend Vue components.

#7 about 5 min

Fetching page content using the asyncData hook

Requesting JSON payloads during the asynchronous lifecycle pulls actual CMS data into the frontend markup.

#8 about 2 min

Enabling real-time updates with the Storyblok Bridge

Listening to editor events dynamically updates the interface without requiring explicit page reloads.

#9 about 4 min

Building a custom article type with custom fields

Designing custom field schemas for articles accommodates unique data types like rich text and optimized images.

#10 about 5 min

Resolving nested content relations for featured articles

Using relational query parameters fetches the full content payload of referenced articles instead of just their unique IDs.

#11 about 3 min

Exploring upcoming interface features in Storyblok version two

Upcoming workflow enhancements and streamlined interface elements offer tighter collaboration controls for content teams.

#12 about 7 min

Addressing GraphQL, SEO, and headless e-commerce integrations

Strategies for static site generation resolve SEO concerns while management APIs allow seamless e-commerce integration.

Matching moments

4:05 min

Core features of the Nuxt meta-framework for Vue

Chris Heilmann Chris Heilmann +2 · LIVE

2:32 min

Introduction to Nuxt 3 and its core framework capabilities

Alexander Lichter · World Congress 2023

1:45 min

Implementing server-rendered Vue apps using the Nuxt framework

Marius Obert Marius Obert · World Congress 2022

2:32 min

Introduction to modern web development with Nuxt two

Alexander Lichter · JS Congress

43 sec

Leveraging the JAMstack concept for content-driven web applications

Sasha Shynkevich · LIVE

11:28 min

Managing application content with a headless GraphQL CMS

Dávid Lévai · LIVE

More from JavaScript Congress

The Eternal Sunshine of the Zero Build Pipeline thumbnail
50:10
almost 5 years ago

The Eternal Sunshine of the Zero Build Pipeline

Teini - an extremely small webshop leveraging awesome and free tech thumbnail
40:45
almost 5 years ago

Teini - an extremely small webshop leveraging awesome and free tech

Christian K

Native Web Apps: Are We There Yet? thumbnail
44:40
almost 5 years ago

Native Web Apps: Are We There Yet?

Maxim Salnikov

Modern Web Development with Nuxt3 thumbnail
41:43
almost 5 years ago

Modern Web Development with Nuxt3

Alexander Lichter

Making neural networks portable with ONNX thumbnail
54:49
almost 5 years ago

Making neural networks portable with ONNX

Ron Dagdag

JavaScript the Grumpy Parts thumbnail
46:08
almost 5 years ago

JavaScript the Grumpy Parts

Rob Richardson

Related videos

Nuxt.js - Just Vue 3 and a bit of magic? thumbnail
26:32
World Congress 2023 • almost 3 years ago

Nuxt.js - Just Vue 3 and a bit of magic?

Alexander Lichter

Modern Web Development with Nuxt3 thumbnail
41:43
JS Congress • almost 5 years ago

Modern Web Development with Nuxt3

Alexander Lichter

Building Better with Nuxt 3 thumbnail
41:22
JS Congress • almost 5 years ago

Building Better with Nuxt 3

Daniel Roe

WeAreDevelopers LIVE - Whats Nuxt and Next for app development, 20 years AJAX and more thumbnail
1:03:53
LIVE • over 1 year ago

WeAreDevelopers LIVE - Whats Nuxt and Next for app development, 20 years AJAX and more

Chris Heilmann, Daniel Cranney, Alexander Lichter

Modern Headless Commerce with Vendure thumbnail
29:19
World Congress 2022 • over 4 years ago

Modern Headless Commerce with Vendure

Michael Bromley

Lessons learned from building a thriving Vue.js SaaS application thumbnail
30:02
World Congress 2025 • about 1 year ago

Lessons learned from building a thriving Vue.js SaaS application

Abdelrahman Awad

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.