
Samuel Snopko
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
 41:22
41:22Building Better with Nuxt 3
Daniel Roe
 26:32
26:32Nuxt.js - Just Vue 3 and a bit of magic?
Alexander Lichter
 43:41
43:41Building for the Edge - Crafting a Next-Gen Framework
Daniel Roe
 41:43
41:43Modern Web Development with Nuxt3
Alexander Lichter
 50:10
50:10The Eternal Sunshine of the Zero Build Pipeline
M4dz
 44:40
44:40petite-vue - Progressively enhancing every application?
Alexander Lichter
 59:15
59:15TresJS a new declarative ThreeJS as Vue components
Alvaro Saburido
 31:21
31:21Why I Recommend Svelte to Every New Web Developer
Markus Hatvan
From learning to earning
Jobs that call for the skills explored in this talk.


Fullstack developer (Laravel, Vue, Nuxt, NextJS) bij AI development agency
SevenLab
Amsterdam, Netherlands
Intermediate
CSS
HTML
REST
Vue.js
Laravel
+5
Senior Full-Stack Engineer (Python + Vue 3/Nuxt)
Oxigent Technologies
Municipality of Marbella, Spain
Remote
€52K
Senior
API
JIRA
Kafka
+7
[HR106] Senior Front-End Developer - Vue, Nuxt - (Remote, Full-Time) Asia
Smart Working Solutions
Nesseaue, Germany
Remote
Senior
CSS
HTML
REST
Vue.js
+6
Full Stack Developer - VUE.JS
Nexo Ingeniería Informática
Municipality of Madrid, Spain
Junior
PHP
API
CSS
Vue.js
JavaScript
+3
Développeur Fullstack Sénior - Vue Js, Node Js, Mongo DB - Transition alimentaire - Paris
nona
Paris, France
Vue.js
MongoDB
Node.js
Continuous Integration





