Find out how to use Nuxt.js with Storyblok
Learn how to develop your own Nuxt.js applications that use Storyblok APIs to retrieve and manage content.
Samuel Snopko and his talk on how to use Storyblok with Nuxt.js
-
![The Ultimate Tutorial]()
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]()
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
Need Help?
-
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
-
-
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
-
-
Videos
Watch our recordings and discover how your project could work and look like.
-
Going headless with Nuxt
This 30 minutes long video will show you the fastest possible way to connect your Nuxt project to Storyblok.
-
eCommerce with Vuestorefront & Commercetool
Get a sneak-peek into the future headless eCommerce with Storyblok, Vuestorefront, and Commercetools.
-
Debbie tries Nuxt with Storyblok
Watch Debbie O’Brien, Nuxt Ambassador, try the Nuxt and Storyblok together for the first time.
-
-
Advanced Topics
This guide is for developers who want to learn about using Nuxt.js and Storyblok together.
-
Build a Storefront with BigCommerce & Nuxt
Learn in detailed step by step guide how to create your own storefront with Nuxt & BigCommerce.
-
Integrate with VueStorefront - Docs
Learn directly in the VueStorefront documentation how to use Storyblok together with VueStorefront without any hassle.
-
Generate routes for Nuxt.js with Storyblok
Nuxt.js allows you to export your application as a static generated website. To do so it will need to know every route available.
-
Our API Documentation Journey with Nuxt.js, Netlify, and Github
A story behind the Storyblok documentation and how we use Storyblok internally for it.
-
Configuring the Storyblok Bridge in TypeScript
Katie Adams explains how to use Storyblok Bridge with TypeScript.
-
Routing in Nuxt.js
Nuxt.js has a file-system based router built on the concept of pages.
-
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.
-
-
Experts Topics
These are the articles for the experienced Nuxt.js & Storybklok developers.
-
How to Create a Custom App for Storyblok with Nuxt.js
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 build a shop with Nuxt, Storyblok and Snipcart
In this tutorial we will implement a Product detail and Product Overview using Nuxt and Storyblok. To let you buy your products we will integrate Snipcart buy buttons and cart.
-
How to schedule content with Nuxt.js 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 and Nuxt.js
In this article we’ll show you how to easily set-up dynamic forms with custom validation using Storyblok, Nuxt.js, Vuelidate & TailwindCSS.
-
-
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 which is lightweight and convenient to use.
-
Dynamic blok module for Nuxt.js
Dynamically load components from Storyblok blok schemes in a Nuxt.js project. Create by Julian Derungs.
-
Nuxt.js Storyblok Queries
Nuxt.js module to simplify queries to the Storyblok API.
-
Nuxt.js Storyblok Router
Nuxt.js module to use storyblok routes instead of pages/directory.
-
Made with Storyblok and Nuxt.js
With customers in nearly every industry and country, Storyblok helps thousands of people to manage their content.
Case Studies
Nuxt.js Demo Project
Too busy to start from scratch, but excited to start learning how to use Nuxt.js and Storyblok? Get a website or blog up and running in minutes. Modify and adapt it to your liking, it’s all yours!
Nuxt 3 CheatSheet
We have created a Storyblok Nuxt 3 CheatSheet for you! It provides all the information you need to get started right away. Our cheat sheet is available as a PDF (A4 format).
Build a Storefront
with Nuxt and BigCommerce
Learn in detailed step by step guide how to create your own storefront with Nuxt & BigCommerce.