Samuel Snopko

Fast & Furious - Going headless with Nuxt.js!

What if your content team could visually edit your headless Nuxt app in real-time? This live-coding session shows you exactly how to build it.

Fast & Furious - Going headless with Nuxt.js!
#1about 3 minutes

Scaffolding a new Nuxt.js project from scratch

Use the create-nuxt-app CLI to quickly generate a new project with preferred settings like Tailwind CSS and Axios.

#2about 3 minutes

Setting up a new content space in Storyblok

Create a new space in the Storyblok dashboard and explore the default content structure, including stories and components.

#3about 3 minutes

Connecting a Nuxt.js app to the Storyblok API

Install and configure the storyblok-nuxt module in nuxt.config.js using an API access token to link the frontend application.

#4about 3 minutes

Configuring the real-time visual editor preview

Set the preview URL in Storyblok to your local development server to enable a live, editable preview of your Nuxt.js site.

#5about 6 minutes

Mapping content blocks to dynamic Vue components

Create a Vue component for each Storyblok component and use Vue's dynamic component to render them based on the API response.

#6about 4 minutes

Fetching and rendering content with asyncData

Use the asyncData hook in a Nuxt page to fetch story data from the Storyblok API before the component is rendered.

#7about 2 minutes

Enabling live updates with the Storyblok Bridge

Implement the Storyblok Bridge in the mounted hook to listen for content changes and update the UI in real-time within the visual editor.

#8about 3 minutes

Modeling a new article content type in Storyblok

Define a new 'article' content type with custom fields like image, title, intro, and author to structure your blog content.

#9about 8 minutes

Referencing content using relationship fields

Use relationship fields to link different content entries and fetch the nested data efficiently with the resolve_relations API parameter.

#10about 7 minutes

Answering questions on headless architecture

Address common questions regarding the use of GraphQL vs REST, SEO strategies for dynamic content, and integrating third-party data sources.

Related jobs
Jobs that call for the skills explored in this talk.

Angular Developer

Picnic Technologies B.V.

Picnic Technologies B.V.
Amsterdam, Netherlands

Intermediate
Senior
TypeScript
Angular
+1

Matching moments

Using content channels to build an event community
04:49 MIN

Using content channels to build an event community

Cat Herding with Lions and Tigers - Christian Heilmann

Organizing a developer conference for 15,000 attendees
01:32 MIN

Organizing a developer conference for 15,000 attendees

Cat Herding with Lions and Tigers - Christian Heilmann

Increasing the value of talk recordings post-event
04:57 MIN

Increasing the value of talk recordings post-event

Cat Herding with Lions and Tigers - Christian Heilmann

Automating video post-production with local scripts
02:54 MIN

Automating video post-production with local scripts

Cat Herding with Lions and Tigers - Christian Heilmann

Selecting strategic partners and essential event tools
03:17 MIN

Selecting strategic partners and essential event tools

Cat Herding with Lions and Tigers - Christian Heilmann

Establishing a single source of truth for all data
02:39 MIN

Establishing a single source of truth for all data

Cat Herding with Lions and Tigers - Christian Heilmann

Rapid-fire thoughts on the future of work
02:44 MIN

Rapid-fire thoughts on the future of work

What 2025 Taught Us: A Year-End Special with Hung Lee

The only frontend stack that truly matters
11:10 MIN

The only frontend stack that truly matters

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

Featured Partners

Related Videos

See all videos
Nuxt.js - Just Vue 3 and a bit of magic?26:32

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

Alexander Lichter

Building Better with Nuxt 341:22

Building Better with Nuxt 3

Daniel Roe

Modern Web Development with Nuxt341:43

Modern Web Development with Nuxt3

Alexander Lichter

Building for the Edge - Crafting a Next-Gen Framework43:41

Building for the Edge - Crafting a Next-Gen Framework

Daniel Roe

Jamstack and Web Performance, a match made in heaven42:04

Jamstack and Web Performance, a match made in heaven

Tamas Piros

Web development: where are we, and where are we going?32:56

Web development: where are we, and where are we going?

Laurie Voss

1, 2, 3... Fastify!42:08

1, 2, 3... Fastify!

Matteo Collina

WeAreDevelopers LIVE - Whats Nuxt and Next for app development, 20 years AJAX and more1:03:53

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

Chris Heilmann & Daniel Cranney & Alexander Lichter

Related Articles

View all articles
BR
Benjamin Ruschin
The HTML Elements That You’re Probably Over-Engineering
As frameworks have become more and more commonplace in the world of web development, so too has the over-engineering of features made possible by our humble old friend, HTML. The mental models that come with using state management in React, Vue and o...
The HTML Elements That You’re Probably Over-Engineering

From learning to earning

Jobs that call for the skills explored in this talk.