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.

Matching moments

Rethinking frameworks with Nuxt, Nitro, and UnJS
01:26 MIN

Rethinking frameworks with Nuxt, Nitro, and UnJS

Building for the Edge - Crafting a Next-Gen Framework

The motivation behind Nuxt 3 and the UnJS ecosystem
02:29 MIN

The motivation behind Nuxt 3 and the UnJS ecosystem

Modern Web Development with Nuxt3

Using static site generators and Jamstack for efficiency
36:31 MIN

Using static site generators and Jamstack for efficiency

How Your Bundle Size Affects The Climate

Understanding Nuxt as a Vue-based meta-framework
00:53 MIN

Understanding Nuxt as a Vue-based meta-framework

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

Live coding: Initializing an app and creating pages
26:45 MIN

Live coding: Initializing an app and creating pages

Modern Web Development with Nuxt3

Built-in performance optimizations in Nuxt 3
12:17 MIN

Built-in performance optimizations in Nuxt 3

Modern Web Development with Nuxt3

Combining JAMstack with a headless CMS for e-commerce
27:24 MIN

Combining JAMstack with a headless CMS for e-commerce

Headless and JAMstack - The State of Commerce Today

A practical demonstration of the nuxt-security module
16:37 MIN

A practical demonstration of the nuxt-security module

Security in modern Web Applications - OWASP to the rescue!

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

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

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

Laurie Voss

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

Jamstack and Web Performance, a match made in heaven

Tamas Piros

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
S
SciChart
The Fastest JavaScript Charts - Built for React and Beyond
For most developers, browser charting works fine — until it doesn’t. Once you push beyond tens of thousands of points, add live streaming, or need advanced interactions, the story changes: frame drops, frozen dashboards, memory issues. That’s where S...
The Fastest JavaScript Charts - Built for React and Beyond
CH
Chris Heilmann
All the videos of Halfstack London 2024!
Last month was Halfstack London, a conference about the web, JavaScript and half a dozen other things. We were there to deliver a talk, but also to record all the sessions and we're happy to share them with you. It took a bit as we had to wait for th...
All the videos of Halfstack London 2024!
BR
Benjamin Ruschin
What Developers Really Need to Create Great Code Demos
Every developer on earth has, at some point, had another developer to thank for a breakthrough, a success, an aha moment they wouldn’t have had without coming across that blog post, that open-source contribution, that reply on socials or that humble ...
What Developers Really Need to Create Great Code Demos

From learning to earning

Jobs that call for the skills explored in this talk.