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.

Featured Partners

Related Videos

Building Better with Nuxt 341:22

Building Better with Nuxt 3

Daniel Roe

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 for the Edge - Crafting a Next-Gen Framework43:41

Building for the Edge - Crafting a Next-Gen Framework

Daniel Roe

Modern Web Development with Nuxt341:43

Modern Web Development with Nuxt3

Alexander Lichter

The Eternal Sunshine of the Zero Build Pipeline50:10

The Eternal Sunshine of the Zero Build Pipeline

M4dz

petite-vue - Progressively enhancing every application?44:40

petite-vue - Progressively enhancing every application?

Alexander Lichter

TresJS a new declarative ThreeJS as Vue components59:15

TresJS a new declarative ThreeJS as Vue components

Alvaro Saburido

Why I Recommend Svelte to Every New Web Developer31:21

Why I Recommend Svelte to Every New Web Developer

Markus Hatvan

From learning to earning

Jobs that call for the skills explored in this talk.