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.
Matching moments
01:02 MIN
Summary of Nuxt's benefits and advanced features
Nuxt.js - Just Vue 3 and a bit of magic?
04:25 MIN
Rethinking frameworks with Nuxt, Nitro, and UnJS
Building for the Edge - Crafting a Next-Gen Framework
03:37 MIN
The motivation behind Nuxt 3 and the UnJS ecosystem
Modern Web Development with Nuxt3
05:13 MIN
Using static site generators and Jamstack for efficiency
How Your Bundle Size Affects The Climate
05:42 MIN
Understanding Nuxt as a Vue-based meta-framework
WeAreDevelopers LIVE - Whats Nuxt and Next for app development, 20 years AJAX and more
03:20 MIN
Combining JAMstack with a headless CMS for e-commerce
Headless and JAMstack - The State of Commerce Today
05:53 MIN
Introducing the core concepts of Jamstack architecture
Jamstack and Web Performance, a match made in heaven
05:38 MIN
Live coding: Initializing an app and creating pages
Modern Web Development with Nuxt3
Featured Partners
Related Videos
26:32Nuxt.js - Just Vue 3 and a bit of magic?
Alexander Lichter
41:22Building Better with Nuxt 3
Daniel Roe
41:43Modern Web Development with Nuxt3
Alexander Lichter
43:41Building for the Edge - Crafting a Next-Gen Framework
Daniel Roe
42:04Jamstack and Web Performance, a match made in heaven
Tamas Piros
42:081, 2, 3... Fastify!
Matteo Collina
46:46The Lean Web
Chris Ferdinandi
1:03:53WeAreDevelopers LIVE - Whats Nuxt and Next for app development, 20 years AJAX and more
Chris Heilmann & Daniel Cranney & Alexander Lichter
Related Articles
View all articles
From learning to earning
Jobs that call for the skills explored in this talk.
infomax websolutions GmbH
Grassau, Germany
Senior
Vue.js
Angular
JavaScript
TypeScript
Aditus GmbH
HTML
Vue.js
ASP.NET
TypeScript
Microsoft SQL Server
doinstruct Software GmbH
Berlin, Germany
Senior
GIT
JavaScript
TypeScript
norisk Group
Munich, Germany
Intermediate
Senior
Nuxt.js
JavaScript
Die Socialisten
Vienna, Austria
Senior
Jest
React
Redux
JavaScript