storyblok-nuxt

Nuxt module for the Storyblok, Headless CMS.

Note: This plugin is for Nuxt 2. Check out the @next version for Nuxt 3

🚀 Usage

If you are first-time user of the Storyblok, read the Getting Started guide to get a project ready in less than 5 minutes.

Installation

Install @storyblok/nuxt and axios as its peer dependency:

npm install --save-dev @storyblok/nuxt axios
# yarn add -D @storyblok/nuxt axios

Hint: You don't have to install Axios if you already installed Axios module of Nuxt.

Add following code to modules section of nuxt.config.js and replace the accessToken with API token from Storyblok space.

{
  modules: [
    [
      "@storyblok/nuxt",
      {
        accessToken: "YOUR_PREVIEW_TOKEN",
        cacheProvider: "memory",
      },
    ],
  ];
}

Getting started

This module adds two objects to the the Nuxt.js context.

$storyapi: The Storyblok API client.
$storybridge: A loader for the Storyblok JS bridge that is responsible for adding the editing interface to your website.

Example of fetching data of the homepage and listening to the change events of the JS bridge:

export default {
  data() {
    return {
      story: { content: {} },
    };
  },
  mounted() {
    this.$storybridge(
      () => {
        const storyblokInstance = new StoryblokBridge();

        storyblokInstance.on(["input", "published", "change"], (event) => {
          if (event.action == "input") {
            if (event.story.id === this.story.id) {
              this.story.content = event.story.content;
            }
          } else {
            window.location.reload();
          }
        });
      },
      (error) => {
        console.error(error);
      }
    );
  },
  asyncData(context) {
    return context.app.$storyapi
      .get("cdn/stories/home", {
        version: "draft",
      })
      .then((res) => {
        return res.data;
      })
      .catch((res) => {
        if (!res.response) {
          console.error(res);
          context.error({
            statusCode: 404,
            message: "Failed to receive content form api",
          });
        } else {
          console.error(res.response.data);
          context.error({
            statusCode: res.response.status,
            message: res.response.data,
          });
        }
      });
  },
};

Hint: Find out more how to use Nuxt together with Storyblok in Nuxt Technology Hub

API

Like described above, this package includes two objects into Nuxt.js context:

$storyapi

This object is a instance of StoryblokClient. You can check the documentation about StoryblokClient in the repository: https://github.com/storyblok/storyblok-nuxt

$storybridge(successCallback, errorCallback)

You can use this object to load the Storyblok JS Bridge. In the success callback you will it have available in the window variable StoryblokBridge.

Migrate from 1.x to 2.x

Listening to Visual Editor events in 1.x

Most of our tutorials and recordings still using following deprecated approach for real-time editing and listening to Storyblok's Visual Editor events. This approach can be used only with 1.x version of the storyblok-nuxt.

export default {
  mounted() {
    // Use the input event for instant update of content
    this.$storybridge.on("input", (event) => {
      if (event.story.id === this.story.id) {
        this.story.content = event.story.content;
      }
    });
    // Use the bridge to listen the events
    this.$storybridge.on(["published", "change"], (event) => {
      this.$nuxt.$router.go({
        path: this.$nuxt.$router.currentRoute,
        force: true,
      });
    });
  },
};

Listening to Visual Editor events in 2.x

The recommended approach for 2.x storyblok-nuxt plugin.

export default {
  mounted() {
    this.$storybridge(
      () => {
        const storyblokInstance = new StoryblokBridge();

        storyblokInstance.on(["input", "published", "change"], (event) => {
          if (event.action == "input") {
            if (event.story.id === this.story.id) {
              this.story.content = event.story.content;
            }
          } else {
            this.$nuxt.$router.go({
              path: this.$nuxt.$router.currentRoute,
              force: true,
            });
          }
        });
      },
      (error) => {
        console.error(error);
      }
    );
  },
};

🔗 Related Links

Nuxt.js Hub: Learn how to develop your own Nuxt.js applications that use Storyblok APIs to retrieve and manage content;
Storyblok & Nuxt.js on GitHub: Check all of our Nuxt.js open source repos;
Storyblok CLI: A simple CLI for scaffolding Storyblok projects and fieldtypes.

ℹ️ More Resources

Support

Bugs or Feature Requests? Submit an issue;
Do you have questions about Storyblok or you need help? Join our Discord Community.

Contributing

Please see our contributing guidelines and our code of conduct. This project use semantic-release for generate new versions by using commit messages and we use the Angular Convention to naming the commits. Check this question about it in semantic-release FAQ.

License

This repository is published under the MIT license.

CodeDredd / storyblok-nuxt