feat: bump version

BREAKING CHANGE

README.md

@@ -27,174 +27,163 @@
   </a>
 </p>
 
-**Note**: This plugin is for Nuxt 2. [Check out the @next version for Nuxt 3](https://github.com/storyblok/storyblok-nuxt/tree/next)
+**Note**: This module is for Nuxt 2. [Check out `@storyblok/nuxt-beta` for Nuxt 3](https://github.com/storyblok/storyblok-nuxt-beta)
 
 ## 🚀 Usage
 
 > If you are first-time user of the Storyblok, read the [Getting Started](https://www.storyblok.com/docs/guide/getting-started?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-nuxt) guide to get a project ready in less than 5 minutes.
 
 ### Installation
 
-Install `@storyblok/nuxt` and `axios` as its peer dependency:
+Install `@storyblok/nuxt`:
 
 ```bash
-npm install --save-dev @storyblok/nuxt axios
-# yarn add -D @storyblok/nuxt axios
+npm install @storyblok/nuxt
+# yarn add @storyblok/nuxt
 ```
 
-> _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.
+Initialize the module by adding it to buildModules section of `nuxt.config.js` and replace the accessToken with API token from Storyblok space.
 
 ```js
 {
-  modules: [
-    [
-      "@storyblok/nuxt",
-      {
-        accessToken: "YOUR_PREVIEW_TOKEN",
-        cacheProvider: "memory",
-      },
-    ],
+  buildModules: [
+    // ...
+    ["@storyblok/nuxt/module", { accessToken: "<your-access-token>" }],
   ];
 }
 ```
 
-### Getting started
+#### Options
 
-This module adds two objects to the the Nuxt.js context.
+When you initialize the module, you can pass all [_@storyblok/vue_ options](https://github.com/storyblok/storyblok-vue#storyblok-api) plus a `useApiClient` options:
 
-1. $storyapi: The [Storyblok API client](https://github.com/storyblok/storyblok-nuxt).
-2. $storybridge: A loader for the [Storyblok JS bridge](https://www.storyblok.com/docs/Guides/storyblok-latest-js?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-nuxt) that is responsible for adding the editing interface to your website.
+```js
+// Defaults
+["@storyblok/nuxt/module", {
+  {
+    accessToken: "<your-access-token>",
+    bridge: process.env.NODE_ENV !== "production", // bridge is disabled in production by default
+    apiOptions: {}, // storyblok-js-client options
+    useApiClient: true
+  }
+}]
+```
 
-Example of fetching data of the homepage and listening to the change events of the JS bridge:
+## Getting started
 
-```js
-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,
-          });
-        }
-      });
-  },
-};
+### 1. Creating and linking your components to Storyblok Visual Editor
+
+To link your Vue components to their equivalent you created in Storyblok:
+
+- First, you need to load them globally. If you use Nuxt 2.13+, you can just place them on the `~/components/storyblok` directory, otherwise you can load them globally (for example, by [using a Nuxt plugin](https://stackoverflow.com/questions/43040692/global-components-in-vue-nuxt)).
+
+- For each components, use the `v-editable` directive on its root element, passing the `blok` property that they receive:
+
+```html
+<div v-editable="blok" / >
 ```
 
-> _Hint: Find out more how to use Nuxt together with Storyblok in [Nuxt Technology Hub](https://www.storyblok.com/tc/nuxtjs?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-nuxt)_
+- Finally, use `<StoryblokComponent>` which available globally in the Nuxt app:
 
-### API
+```html
+<StoryblokComponent blok="blok" />
+```
 
-Like described above, this package includes two objects into Nuxt.js context:
+> The `blok` is the actual blok data coming from [Storblok's Content Delivery API](https://www.storyblok.com/docs/api/content-delivery/v2?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-nuxt).
 
-#### $storyapi
+### 2. Getting Storyblok Stories and listen to Visual Editor events
 
-This object is a instance of StoryblokClient. You can check the documentation about StoryblokClient in the repository: https://github.com/storyblok/storyblok-nuxt
+#### Composition API
 
-#### $storybridge(successCallback, errorCallback)
+> To use Nuxt 2 with Composition API, make sure you installed the [@nuxtjs/composition-api](https://composition-api.nuxtjs.org/) plugin.
 
-You can use this object to load the [Storyblok JS Bridge](https://www.storyblok.com/docs/Guides/storyblok-latest-js?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-nuxt). In the success callback you will it have available in the window variable StoryblokBridge.
+The simplest way is by using the `useStoryblok` one-liner composable:
 
-### Migrate from 1.x to 2.x
+```html
+<script setup>
+  import { useStoryblok } from "@storyblok/nuxt";
+  const story = useStoryblok("vue/test", { version: "draft" });
+</script>
 
-#### Listening to Visual Editor events in 1.x
+<template>
+  <StoryblokComponent v-if="story" :blok="story.content" />
+</template>
+```
 
-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.**
+Which is the short-hand equivalent to using `useStoryblokApi` and `useStoryblokBridge` functions separately:
 
-```js
-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,
-      });
+```html
+<script setup>
+  import { onMounted, ref } from "@nuxtjs/composition-api";
+  import { useStoryblokBridge, useStoryblokApi } from "@storyblok/nuxt";
+
+  const story = ref(null);
+
+  onMounted(async () => {
+    const storyblokApi = useStoryblokApi();
+    const { data } = await storyblokApi.get("cdn/stories/vue/test", {
+      version: "draft",
     });
-  },
-};
+    story.value = data.story;
+
+    useStoryblokBridge(story.value.id, (evStory) => (story.value = evStory));
+  });
+</script>
+
+<template>
+  <StoryblokComponent v-if="story" :blok="story.content" />
+</template>
 ```
 
-#### Listening to Visual Editor events in 2.x
+#### Options API
 
-The recommended approach for 2.x storyblok-nuxt plugin.
+You can still use the `useStoryblokApi` and `useStoryblokBridge` as follows:
 
-```js
-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);
-      }
-    );
-  },
-};
+```html
+<script>
+  import { useStoryblokBridge, useStoryblokApi } from "@storyblok/nuxt";
+
+  export default {
+    asyncData: async ({ app }) => {
+      const storyblokApi = useStoryblokApi();
+      const { data } = await storyblokApi.get("cdn/stories/vue", {
+        version: "draft",
+      });
+      // OR: const { data } = await app.$storyapi.get("cdn/stories/vue", { version: "draft" });
+
+      return { story: data.story };
+    },
+    mounted() {
+      useStoryblokBridge(this.story.id, (newStory) => (this.story = newStory));
+    },
+  };
+</script>
+
+<template>
+  <StoryblokComponent v-if="story" :blok="story.content" />
+</template>
 ```
 
+> _As you see in the comment, you can also use `app.$storyapi` if that's more comfortable for you. It's injected into Nuxt context and available in the components instance via `this.$storyapi` as well._
+
+### API
+
+#### useStoryblok(slug, apiOptions, bridgeOptions)
+
+Check the available [apiOptions](https://github.com/storyblok/storyblok-js-client#class-storyblok) (passed to `storyblok-js-client`) and [bridgeOptions](https://www.storyblok.com/docs/Guides/storyblok-latest-js?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-nuxt) (passed to the Storyblok Bridge).
+
+#### useStoryblokApi()
+
+Returns the instance of the `storyblok-js-client`.
+
+#### useStoryblokBridge(storyId, callback, bridgeOptions)
+
+Use this one-line function to cover the most common use case: updating the story when any kind of change happens on Storyblok Visual Editor.
+
+#### $storyapi
+
+Equivalent to the client that `useStoryblokApi` returns, but accessible in the Nuxt context and components instance.
+
 ## 🔗 Related Links
 
 - **[Nuxt.js Hub](https://www.storyblok.com/tc/nuxtjs?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-nuxt)**: Learn how to develop your own Nuxt.js applications that use Storyblok APIs to retrieve and manage content;

lib/module/index.js

@@ -7,6 +7,12 @@ module.exports = function nuxtStoryblok(moduleOptions) {
     options,
   });
 
+  const nuxtConfig = this.nuxt.options;
+  const componentsPath = "~/components/storyblok";
+  if (Array.isArray(nuxtConfig.components))
+    nuxtConfig.components.push(componentsPath);
+  else nuxtConfig.components = [componentsPath];
+
   // Disable Webpack 4 mjs support (has issues)
   this.extendBuild((config) => {
     if (!config.module) return;

lib/module/plugin.js

@@ -11,7 +11,7 @@ export default (ctx) => {
 
   Vue.use(StoryblokVue, {
     accessToken: "<%= options.accessToken %>",
-    bridge: <%= options.bridge === false ? false : options.bridge %>,
+    bridge: <%= 'process.env.NODE_ENV !== "production"' %>,
     apiOptions: <%- JSON.stringify(options.apiOptions || {}) %>,
     <% if (options.useApiClient !== false) { %>
     use: [apiPlugin]

playground/nuxt.config.js

@@ -1,6 +1,5 @@
 export default {
   target: "server",
-  components: true,
   head: {
     title: "playground",
     htmlAttrs: {