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

From learning to earning

Jobs that call for the skills explored in this talk.