Official deprecation announcement Storyblok Vue 2 & Nuxt 2 SDKs

Dear community,

We want to announce some changes to the Storyblok Vue 2 SDK & Storyblok Nuxt 2 SDK.

The future of the Vue Ecosystem: Vue 2 & Nuxt 2 Deprecation

Following the official end-of-life (EOL) for Vue 2 on December 31st, 2022, we will end Storyblok Vue 2 SDK support by August 31st, 2024.  During this extended support period, we will be solving bug fixes and supporting customers and community members. After August 2024, we will discontinue all support for this package, and all the efforts will be centered on the repository for the latest version of Vue (3.x): Storyblok Vue SDK.

For Nuxt 2 users, the official EOL is June 30th, 2024. From the Storyblok Nuxt 2 SDK, the support will continue until December 31st, 2024. After 2024, we will stop maintaining it, and the official Nuxt (3.x) SDK will be Storyblok Nuxt SDK.

With these changes, we want to ensure that our open-source SDKs for the Vue ecosystem are in sync with the latest trends.

For detailed insights into the Vue 2 & Nuxt 2 depreciation, the latest changes, and technical recommendations, we recommend exploring the following resources:

• Deprecation pages for both frameworks: official Vue 2 deprecation and official Nuxt 2 deprecation.

• Migration guides: official Vue 3 migration guide and official Nuxt 3 upgrade guide.

Migrating to Vue 3 & Nuxt 3 Storyblok SDKs

1 - New packages names

• For Vue projects, instead of installing the package by npm i -D @storyblok/vue-2, you should now run npm install @storyblok/vue

• For Nuxt projects, the old way was npm install @storyblok/nuxt-2. Now you should run npx nuxi@latest module add storyblok

2 - How to register them in your project

• For Vue, you should still register the plugin at main.js:

The old way in Vue 2 SDK:

import Vue from "vue";
import { StoryblokVue, apiPlugin } from "@storyblok/vue-2";
import App from "./App.vue";

Vue.use(StoryblokVue, {
  accessToken: "<your-token>",
  use: [apiPlugin],
});

New way at Vue SDK (v3.x):

import { createApp } from "vue";
import { StoryblokVue, apiPlugin } from "@storyblok/vue";
import App from "./App.vue";

const app = createApp(App);

app.use(StoryblokVue, {
  accessToken: "YOUR_ACCESS_TOKEN",
  use: [apiPlugin],
});

• For Nuxt, you should still register the module inside nuxt.config.js:

The old way in Nuxt 2 SDK: (check config options available)

{
  buildModules: [
    // ...
    ["@storyblok/nuxt-2/module", { accessToken: "<your-access-token>" }],
  ],
  // or set the accessToken as publicRuntimeConfig (take priority if both are set) 
  publicRuntimeConfig: {
    storyblok: {
      accessToken: process.env.STORYBLOK_ACCESS_TOKEN;
    }
  }
}

New way at Nuxt SDK (v3.x): (check config options available)

import { defineNuxtConfig } from "nuxt";

export default defineNuxtConfig({
  modules: ["@storyblok/nuxt"],
  storyblok: {
    accessToken: process.env.STORYBLOK_ACCESS_TOKEN
  }
});

3 - Linking components between Storyblok Block Library and your Nuxt project

In Nuxt 2, the folder used was ~/components/storyblok; for Nuxt 3, by default is ~/storyblok, but you can change it as stated in the Storyblok Nuxt SDK README.

The rest can be used and implemented the same way as in Vue 2 & Nuxt 2 SDKs.

Always consider that the preferred way of using the composables available inside the SDKs is using .

If you have any questions or concerns not addressed in this communication and provided links, please submit a support ticket, and we will be happy to provide additional details.

Looking forward to a future of innovation and collaboration!

Warm regards,

The Storyblok DevRel Team