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

Why you might not need JavaScript for everything
02:33 MIN

Why you might not need JavaScript for everything

WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More

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

Navigating the growing complexity of modern CSS
09:00 MIN

Navigating the growing complexity of modern CSS

WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More

Exploring modern JavaScript performance and new CSS features
08:07 MIN

Exploring modern JavaScript performance and new CSS features

WeAreDevelopers LIVE – AI, Freelancing, Keeping Up with Tech and More

The value of progressive enhancement and semantic HTML
03:31 MIN

The value of progressive enhancement and semantic HTML

WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More

How a broken frontend culture impacts the web
04:02 MIN

How a broken frontend culture impacts the web

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

The origin story of the Polypane developer browser
05:28 MIN

The origin story of the Polypane developer browser

Developer Time Is Valuable - Use the Right Tools - Kilian Valkhof

The challenge of keeping up with modern CSS
07:46 MIN

The challenge of keeping up with modern CSS

WeAreDevelopers LIVE – AI, Freelancing, Keeping Up with Tech 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

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

From Zero to Hero: NextJS 13 and Tailwind CSS for Beginners29:01

From Zero to Hero: NextJS 13 and Tailwind CSS for Beginners

Marius Obert

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
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!

From learning to earning

Jobs that call for the skills explored in this talk.