Find out how to use Nuxt.js with Storyblok

Learn how to develop your own Nuxt.js applications that uses Storyblok APIs to retrieve and manage content.

Getting started

A hello world example built with Nuxt.js and Storyblok.

View the project
Create a multilanguage Website

This article offers a complete guide to building a multilanguage website using Nuxt.js and Storyblok.

Read the Article
Nuxt.js Module

To quickly integrate Storyblok with Nuxt.js use our Nuxj.js module and you are done in seconds.

View the Github repository

Your learning journey with Storyblok starts here

Need Help?

Storyblok Discord

Real time discussions are often the best way to resolve a problem.
Awesome Storyblok

A curated list of awesome things related to Storyblok CMS.
Request Features or Report Bugs

Feature requests or bugs can be opened and discussed with our development team.

Basic topics

Perfect for anyone just getting started with Nuxt.js.
- How to start with Nuxt.js
  
  If you’re new to Nuxt.js we recommend that you start here.
- Routing in Nuxt.js
  
  Nuxt.js has a file-system based router built on the concept of pages.
- Your first Nuxt.js and Storyblok project
  
  This demo is built using Nuxt.js: Configure the Storyblok bridge between your Storyblok space and the project.
Advanced Topics

This guide is for developers who want to learn about using Nuxt.js and Storyblok together.
- Build a Multilanguage Website with Nuxt.js
  
  This guide is for the beginners and the professionals who want to build a full-blown multilanguage website using Nuxt.js and Storyblok.
- 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.
A complete guide to build the VueDose blog

We collaborated with VueDose to create a full series of tutorials on how to create a full static site using Nuxt.js 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
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.

View all 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!

Get Started

Nuxt.js Cheatsheet

We’ve included the shortcuts for the most commonly used aspects of Storyblok with Nuxt.js. Our cheat sheet is available in pdf A4 format.

Download Cheatsheet

Choose a better way to
manage your content

Get Started Talk to Us

No strings attached

Find out how to use Nuxt.js with Storyblok

Samuel Snopko and his talk on how to use Storyblok with Nuxt.js

Getting started

Create a multilanguage Website

Nuxt.js Module

Your learning journey with Storyblok starts here

Need Help?

Basic topics

Advanced Topics

A complete guide to build the VueDose blog

Experts Topics

Tools & Modules

Made with Storyblok and Nuxt.js

Case Studies

UPC Business

Degenesis

Unzer

Europ Assistance

Nuxt.js Demo Project

Nuxt.js Cheatsheet

Choose a better way to manage your content

Choose a better way to
manage your content