Find out how to use Nuxt with Storyblok
Learn how to develop your own Nuxt applications that use Storyblok APIs to retrieve and manage content.
-
The Ultimate Tutorial
In this tutorial series, you will learn how to build a full-blown, multilingual website using Storyblok and Nuxt 3.
-
Nuxt Module
To quickly integrate Storyblok with Nuxt use our Nuxt module and you are done in seconds.
Your learning journey with Storyblok starts here
Helpful resources
-
Storyblok Discord
Join our supportive community of Storyblok and Nuxt developers in the #nuxtjs channel of our Discord server.
-
Official SDK
Learn how to make the most out of @storyblok/nuxt. Feel free to share your feature requests, issues, or code contributions.
-
Learning Hub
Comprehensive developer guides, API documentation, technology hubs and more.
-
Basic topics
Perfect for anyone just getting started with Nuxt.js.
-
The Storyblok Nuxt Ultimate Tutorial
In this tutorial series, you will learn how to build a full-blown, multilingual website using Storyblok and Nuxt 3.
-
Part 1
Add a headless CMS to Nuxt 3 in 5 minutes
-
Part 2
Render Storyblok Stories Dynamically in Nuxt
-
Part 3
Create Dynamic Menus in Storyblok and Nuxt
-
Part 4
Create Custom Components in Storyblok and Nuxt
-
Part 5
Create and Render Blog Articles in Storyblok and Nuxt
-
Part 6
Manage Multilingual Content in Storyblok and Nuxt
-
Part 7
Create a Preview Environment for Your Nuxt 3 Website
-
-
Videos
Watch our recordings and discover how your project could work and look like.
-
A 5-minute video on Nuxt & Storyblok
The well-known YouTube channel, LearnVue, created this quick overview of how they use Nuxt + Storyblok to manage their website content.
-
Build a BLOG with Nuxt 3 & Storyblok
A hands-on tutorial, from our ambassador Alexander Gekob, on how to build a blog using our Nuxt SDK.
-
Nuxt, Shopify, and Storyblok Crash Course
Jakub shows us how to build a Composable Commerce from scratch and deploy it to Vercel.
-
Complete series on how to connect Storyblok with Nuxt 3
A video playlist of tutorials, by Alvaro Dev Labs, on how to create a sushi recipes site from scratch 'till deployment using the Storyblok Nuxt SDK.
-
-
Tools & Modules
From developers for developers, extend and add functionalities to your Storyblok project.
-
Storyblok Nuxt Module
This module adds the Storyblok API client and Storyblok JS Bridge to your Nuxt.js project.
-
Storyblok Rich-Text Renderer Module
Our ambassador, Marvin, created a rich text renderer module for you that is lightweight and convenient.
-
TS types generator for Storyblok Blocks
Dohomi created a tool to generate TypeScript interface types based on Storyblok component schemas.
-
Extend Storyblok with this App Starter
A Nuxt 3, blok.ink and Tailwind Storyblok App Starter created by our partner Virtual Identity.
-
Nuxt.js 2 Storyblok Queries
Nuxt.js 2 module to simplify queries to the Storyblok API.
-
Nuxt.js 2 Storyblok Router
Nuxt.js 2 module to use storyblok routes instead of pages/directory.
-
-
A complete guide to build the VueDose blog
We collaborated with VueDose to create a full series of tutorials on how to create a fully static site using Nuxt 2 & Storyblok v1 for you.
-
Part 1: Full Static Nuxt Site
Setting up a full static nuxt site.
-
Part 2: UI Components
Creating UI components based on a Design System in Vue.js.
-
Part 3: Blog Structure
Setting up the blog content structure in Storyblok.
-
Part 4: Using the Storyblok API
Show the Blog Content in Nuxt.js Using Storyblok API.
-
Part 5: Adding a Search
Adding Tags and Search functionality in Nuxt.js using Storyblok API
-
Part 6: SEO & Social Sharing
Optimize SEO and Social Media Sharing in a Nuxt.js blog
-
Part 7: Generate & Deploy
Generate and deploy the blog as a full static Nuxt.js site
-
-
Advanced Topics
This guide is for developers who want to learn about using Nuxt.js and Storyblok together.
-
Generate routes for Nuxt v3 & v2 with Storyblok
Nuxt.js allows you to export your application as a statically generated website. To do so, it will need to know every route available.
-
Build a Storefront with BigCommerce & Nuxt
Learn in a detailed step-by-step guide how to create your storefront with Nuxt 3 & BigCommerce.
-
Integrate with VueStorefront - Docs
Learn directly in the VueStorefront documentation how to use Storyblok with VueStorefront, Vue 2, without hassle.
-
Routing in Nuxt
Nuxt has a file-system-based router built on the concept of pages.
-
Configuring the Storyblok Bridge in TypeScript
Katie Adams explains how to use Storyblok Bridge with TypeScript.
-
How to deploy Nuxt SPA to Netlify
This guide describes how to configure & deploy your single page application (SPA) built with Nuxt and Storyblok to Netlify.
-
Our API Documentation Journey with Nuxt.js 2, Netlify, and Github
A story behind the Storyblok documentation and how we use Storyblok internally for it.
-
-
Experts Topics
These are the articles for the experienced Nuxt.js & Storyblok developers.
-
How to Create a Custom App for Storyblok with Nuxt 2
This guide explains how to create a custom application in the context of a Storyblok UI using the Nuxt.js framework and OAuth2 for authentification.
-
How to schedule content with Nuxt.js 2 and Storyblok using Releases
Gary Siladi and Peter Guzma wrote down a short guide on how to schedule the bundle of changes using the Storyblok's Releases App and Nuxt.js.
-
How to create dynamic forms with custom validation in Storyblok v1 and Nuxt.js 2
In this article we’ll show you how to easily set-up dynamic forms with custom validation using Storyblok, Nuxt.js, Vuelidate & TailwindCSS.
-
How to build a shop with Nuxt 2, Storyblok and Snipcart
In this tutorial, we will implement a Product detail and Product Overview using Nuxt.js and Storyblok. To let you buy your products, we will integrate Snipcart buy buttons and cart.
-
Made with Storyblok and Nuxt
With customers in nearly every industry and country, Storyblok helps thousands of people to manage their content.
Case Studies
Build a Storefront
with Nuxt and BigCommerce
Learn in detailed step by step guide how to create your own storefront with Nuxt & BigCommerce.