@storyblok/nuxt 2.0.5 → 2.1.0

package/README.md

@@ -27,7 +27,7 @@
   </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
 
@@ -35,166 +35,155 @@
 
 ### 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;
@@ -212,7 +201,3 @@ export default {
 
 Please see our [contributing guidelines](https://github.com/storyblok/.github/blob/master/contributing.md) and our [code of conduct](https://www.storyblok.com/trust-center#code-of-conduct?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-nuxt).
 This project use [semantic-release](https://semantic-release.gitbook.io/semantic-release/) for generate new versions by using commit messages and we use the Angular Convention to naming the commits. Check [this question](https://semantic-release.gitbook.io/semantic-release/support/faq#how-can-i-change-the-type-of-commits-that-trigger-a-release) about it in semantic-release FAQ.
-
-### License
-
-This repository is published under the [MIT](./LICENSE) license.

package/dist/storyblok-nuxt.js

@@ -0,0 +1,6 @@
+(function(h,y){typeof exports=="object"&&typeof module!="undefined"?y(exports,require("axios"),require("@vue/composition-api")):typeof define=="function"&&define.amd?define(["exports","axios","@vue/composition-api"],y):(h=typeof globalThis!="undefined"?globalThis:h||self,y(h.storyblokNuxt={},h.t,h.VueCompositionAPI))})(this,function(h,y,_){"use strict";function N(s){return s&&typeof s=="object"&&"default"in s?s:{default:s}}var V=N(y),q=Object.defineProperty,x=Object.defineProperties,B=Object.getOwnPropertyDescriptors,w=Object.getOwnPropertySymbols,L=Object.prototype.hasOwnProperty,U=Object.prototype.propertyIsEnumerable,T=(s,e,t)=>e in s?q(s,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):s[e]=t,f=(s,e)=>{for(var t in e||(e={}))L.call(e,t)&&T(s,t,e[t]);if(w)for(var t of w(e))U.call(e,t)&&T(s,t,e[t]);return s},k=(s,e)=>x(s,B(e));let R=!1;const S=[],z=s=>new Promise((e,t)=>{if(typeof window=="undefined"||(window.storyblokRegisterEvent=o=>{if(window.location===window.parent.location){console.warn("You are not in Draft Mode or in the Visual Editor.");return}R?o():S.push(o)},document.getElementById("storyblok-javascript-bridge")))return;const r=document.createElement("script");r.async=!0,r.src=s,r.id="storyblok-javascript-bridge",r.onerror=o=>t(o),r.onload=o=>{S.forEach(n=>n()),R=!0,e(o)},document.getElementsByTagName("head")[0].appendChild(r)});/*!
+ * storyblok-js-client v0.0.0-development
+ * Universal JavaScript SDK for Storyblok's API
+ * (c) 2020-2022 Stobylok Team
+ */function O(s){return typeof s=="number"&&s==s&&s!==1/0&&s!==-1/0}function E(s,e,t){if(!O(e))throw new TypeError("Expected `limit` to be a finite number");if(!O(t))throw new TypeError("Expected `interval` to be a finite number");var r=[],o=[],n=0,i=function(){n++;var a=setTimeout(function(){n--,r.length>0&&i(),o=o.filter(function(u){return u!==a})},t);o.indexOf(a)<0&&o.push(a);var c=r.shift();c.resolve(s.apply(c.self,c.args))},l=function(){var a=arguments,c=this;return new Promise(function(u,p){r.push({resolve:u,reject:p,args:a,self:c}),n<e&&i()})};return l.abort=function(){o.forEach(clearTimeout),o=[],r.forEach(function(a){a.reject(new throttle.AbortError)}),r.length=0},l}E.AbortError=function(){Error.call(this,"Throttled function aborted"),this.name="AbortError"};const D=function(s,e){if(!s)return null;let t={};for(let r in s){let o=s[r];e.indexOf(r)>-1&&o!==null&&(t[r]=o)}return t};var J={nodes:{horizontal_rule:s=>({singleTag:"hr"}),blockquote:s=>({tag:"blockquote"}),bullet_list:s=>({tag:"ul"}),code_block:s=>({tag:["pre",{tag:"code",attrs:s.attrs}]}),hard_break:s=>({singleTag:"br"}),heading:s=>({tag:"h"+s.attrs.level}),image:s=>({singleTag:[{tag:"img",attrs:D(s.attrs,["src","alt","title"])}]}),list_item:s=>({tag:"li"}),ordered_list:s=>({tag:"ol"}),paragraph:s=>({tag:"p"})},marks:{bold:()=>({tag:"b"}),strike:()=>({tag:"strike"}),underline:()=>({tag:"u"}),strong:()=>({tag:"strong"}),code:()=>({tag:"code"}),italic:()=>({tag:"i"}),link(s){const e=f({},s.attrs),{linktype:t="url"}=s.attrs;return t==="email"&&(e.href="mailto:"+e.href),e.anchor&&(e.href=`${e.href}#${e.anchor}`,delete e.anchor),{tag:[{tag:"a",attrs:e}]}},styled:s=>({tag:[{tag:"span",attrs:s.attrs}]})}};class Y{constructor(e){e||(e=J),this.marks=e.marks||[],this.nodes=e.nodes||[]}addNode(e,t){this.nodes[e]=t}addMark(e,t){this.marks[e]=t}render(e={}){if(e.content&&Array.isArray(e.content)){let t="";return e.content.forEach(r=>{t+=this.renderNode(r)}),t}return console.warn("The render method must receive an object with a content field, which is an array"),""}renderNode(e){let t=[];e.marks&&e.marks.forEach(o=>{const n=this.getMatchingMark(o);n&&t.push(this.renderOpeningTag(n.tag))});const r=this.getMatchingNode(e);return r&&r.tag&&t.push(this.renderOpeningTag(r.tag)),e.content?e.content.forEach(o=>{t.push(this.renderNode(o))}):e.text?t.push(function(o){const n={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"},i=/[&<>"']/g,l=RegExp(i.source);return o&&l.test(o)?o.replace(i,a=>n[a]):o}(e.text)):r&&r.singleTag?t.push(this.renderTag(r.singleTag," /")):r&&r.html&&t.push(r.html),r&&r.tag&&t.push(this.renderClosingTag(r.tag)),e.marks&&e.marks.slice(0).reverse().forEach(o=>{const n=this.getMatchingMark(o);n&&t.push(this.renderClosingTag(n.tag))}),t.join("")}renderTag(e,t){return e.constructor===String?`<${e}${t}>`:e.map(r=>{if(r.constructor===String)return`<${r}${t}>`;{let o="<"+r.tag;if(r.attrs)for(let n in r.attrs){let i=r.attrs[n];i!==null&&(o+=` ${n}="${i}"`)}return`${o}${t}>`}}).join("")}renderOpeningTag(e){return this.renderTag(e,"")}renderClosingTag(e){return e.constructor===String?`</${e}>`:e.slice(0).reverse().map(t=>t.constructor===String?`</${t}>`:`</${t.tag}>`).join("")}getMatchingNode(e){if(typeof this.nodes[e.type]=="function")return this.nodes[e.type](e)}getMatchingMark(e){if(typeof this.marks[e.type]=="function")return this.marks[e.type](e)}}const F=(s=0,e=s)=>{const t=Math.abs(e-s)||0,r=s<e?1:-1;return((o=0,n)=>[...Array(o)].map(n))(t,(o,n)=>n*r+s)},v=(s,e,t)=>{const r=[];for(const o in s){if(!Object.prototype.hasOwnProperty.call(s,o))continue;const n=s[o],i=t?"":encodeURIComponent(o);let l;l=typeof n=="object"?v(n,e?e+encodeURIComponent("["+i+"]"):i,Array.isArray(n)):(e?e+encodeURIComponent("["+i+"]"):i)+"="+encodeURIComponent(n),r.push(l)}return r.join("&")};let m={},g={};class X{constructor(e,t){if(!t){let n=e.region?"-"+e.region:"",i=e.https===!1?"http":"https";t=e.oauthToken===void 0?`${i}://api${n}.storyblok.com/v2`:`${i}://api${n}.storyblok.com/v1`}let r=Object.assign({},e.headers),o=5;e.oauthToken!==void 0&&(r.Authorization=e.oauthToken,o=3),e.rateLimit!==void 0&&(o=e.rateLimit),this.richTextResolver=new Y(e.richTextSchema),typeof e.componentResolver=="function"&&this.setComponentResolver(e.componentResolver),this.maxRetries=e.maxRetries||5,this.throttle=E(this.throttledRequest,o,1e3),this.accessToken=e.accessToken,this.relations={},this.links={},this.cache=e.cache||{clear:"manual"},this.client=V.default.create({baseURL:t,timeout:e.timeout||0,headers:r,proxy:e.proxy||!1}),e.responseInterceptor&&this.client.interceptors.response.use(n=>e.responseInterceptor(n))}setComponentResolver(e){this.richTextResolver.addNode("blok",t=>{let r="";return t.attrs.body.forEach(o=>{r+=e(o.component,o)}),{html:r}})}parseParams(e={}){return e.version||(e.version="published"),e.token||(e.token=this.getToken()),e.cv||(e.cv=g[e.token]),Array.isArray(e.resolve_relations)&&(e.resolve_relations=e.resolve_relations.join(",")),e}factoryParamOptions(e,t={}){return((r="")=>r.indexOf("/cdn/")>-1)(e)?this.parseParams(t):t}makeRequest(e,t,r,o){const n=this.factoryParamOptions(e,((i={},l=25,a=1)=>k(f({},i),{per_page:l,page:a}))(t,r,o));return this.cacheResponse(e,n)}get(e,t){let r="/"+e;const o=this.factoryParamOptions(r,t);return this.cacheResponse(r,o)}async getAll(e,t={},r){const o=t.per_page||25,n="/"+e,i=n.split("/");r=r||i[i.length-1];const l=await this.makeRequest(n,t,o,1),a=Math.ceil(l.total/o);return((c=[],u)=>c.map(u).reduce((p,d)=>[...p,...d],[]))([l,...await(async(c=[],u)=>Promise.all(c.map(u)))(F(1,a),async c=>this.makeRequest(n,t,o,c+1))],c=>Object.values(c.data[r]))}post(e,t){let r="/"+e;return this.throttle("post",r,t)}put(e,t){let r="/"+e;return this.throttle("put",r,t)}delete(e,t){let r="/"+e;return this.throttle("delete",r,t)}getStories(e){return this.get("cdn/stories",e)}getStory(e,t){return this.get("cdn/stories/"+e,t)}setToken(e){this.accessToken=e}getToken(){return this.accessToken}_cleanCopy(e){return JSON.parse(JSON.stringify(e))}_insertLinks(e,t){const r=e[t];r&&r.fieldtype=="multilink"&&r.linktype=="story"&&typeof r.id=="string"&&this.links[r.id]?r.story=this._cleanCopy(this.links[r.id]):r&&r.linktype==="story"&&typeof r.uuid=="string"&&this.links[r.uuid]&&(r.story=this._cleanCopy(this.links[r.uuid]))}_insertRelations(e,t,r){if(r.indexOf(e.component+"."+t)>-1){if(typeof e[t]=="string")this.relations[e[t]]&&(e[t]=this._cleanCopy(this.relations[e[t]]));else if(e[t].constructor===Array){let o=[];e[t].forEach(n=>{this.relations[n]&&o.push(this._cleanCopy(this.relations[n]))}),e[t]=o}}}iterateTree(e,t){let r=o=>{if(o!=null){if(o.constructor===Array)for(let n=0;n<o.length;n++)r(o[n]);else if(o.constructor===Object){if(o._stopResolving)return;for(let n in o)(o.component&&o._uid||o.type==="link")&&(this._insertRelations(o,n,t),this._insertLinks(o,n)),r(o[n])}}};r(e.content)}async resolveLinks(e,t){let r=[];if(e.link_uuids){const o=e.link_uuids.length;let n=[];const i=50;for(let l=0;l<o;l+=i){const a=Math.min(o,l+i);n.push(e.link_uuids.slice(l,a))}for(let l=0;l<n.length;l++)(await this.getStories({per_page:i,language:t.language,version:t.version,by_uuids:n[l].join(",")})).data.stories.forEach(a=>{r.push(a)})}else r=e.links;r.forEach(o=>{this.links[o.uuid]=k(f({},o),{_stopResolving:!0})})}async resolveRelations(e,t){let r=[];if(e.rel_uuids){const o=e.rel_uuids.length;let n=[];const i=50;for(let l=0;l<o;l+=i){const a=Math.min(o,l+i);n.push(e.rel_uuids.slice(l,a))}for(let l=0;l<n.length;l++)(await this.getStories({per_page:i,language:t.language,version:t.version,by_uuids:n[l].join(",")})).data.stories.forEach(a=>{r.push(a)})}else r=e.rels;r.forEach(o=>{this.relations[o.uuid]=k(f({},o),{_stopResolving:!0})})}async resolveStories(e,t){let r=[];t.resolve_relations!==void 0&&t.resolve_relations.length>0&&(r=t.resolve_relations.split(","),await this.resolveRelations(e,t)),["1","story","url"].indexOf(t.resolve_links)>-1&&await this.resolveLinks(e,t);for(const o in this.relations)this.iterateTree(this.relations[o],r);e.story?this.iterateTree(e.story,r):e.stories.forEach(o=>{this.iterateTree(o,r)})}cacheResponse(e,t,r){return r===void 0&&(r=0),new Promise(async(o,n)=>{let i=v({url:e,params:t}),l=this.cacheProvider();if(this.cache.clear==="auto"&&t.version==="draft"&&await this.flushCache(),t.version==="published"&&e!="/cdn/spaces/me"){const c=await l.get(i);if(c)return o(c)}try{let c=await this.throttle("get",e,{params:t,paramsSerializer:p=>v(p)}),u={data:c.data,headers:c.headers};if(c.headers["per-page"]&&(u=Object.assign({},u,{perPage:parseInt(c.headers["per-page"]),total:parseInt(c.headers.total)})),c.status!=200)return n(c);(u.data.story||u.data.stories)&&await this.resolveStories(u.data,t),t.version==="published"&&e!="/cdn/spaces/me"&&l.set(i,u),u.data.cv&&(t.version=="draft"&&g[t.token]!=u.data.cv&&this.flushCache(),g[t.token]=u.data.cv),o(u)}catch(c){if(c.response&&c.response.status===429&&(r+=1)<this.maxRetries)return console.log(`Hit rate limit. Retrying in ${r} seconds.`),await(a=1e3*r,new Promise(u=>setTimeout(u,a))),this.cacheResponse(e,t,r).then(o).catch(n);n(c)}var a})}throttledRequest(e,t,r){return this.client[e](t,r)}cacheVersions(){return g}cacheVersion(){return g[this.accessToken]}setCacheVersion(e){this.accessToken&&(g[this.accessToken]=e)}cacheProvider(){switch(this.cache.type){case"memory":return{get:e=>m[e],getAll:()=>m,set(e,t){m[e]=t},flush(){m={}}};default:return{get(){},getAll(){},set(){},flush(){}}}}async flushCache(){return await this.cacheProvider().flush(),this}}var H=(s={})=>{const{apiOptions:e}=s;if(!e.accessToken){console.error("You need to provide an access token to interact with Storyblok API. Read https://www.storyblok.com/docs/api/content-delivery#topics/authentication");return}return{storyblokApi:new X(e)}},W=s=>{if(typeof s!="object"||typeof s._editable=="undefined")return{};const e=JSON.parse(s._editable.replace(/^<!--#storyblok#/,"").replace(/-->$/,""));return{"data-blok-c":JSON.stringify(e),"data-blok-uid":e.id+"-"+e.uid}};const P=(s,e,t={})=>{if(typeof window!="undefined"){if(typeof window.storyblokRegisterEvent=="undefined"){console.error("Storyblok Bridge is disabled. Please enable it to use it. Read https://github.com/storyblok/storyblok-js");return}window.storyblokRegisterEvent(()=>{new window.StoryblokBridge(t).on(["input","published","change"],o=>{o.action=="input"&&o.story.id===s?e(o.story):window.location.reload()})})}},G=(s={})=>{const{bridge:e,accessToken:t,use:r=[],apiOptions:o={}}=s;o.accessToken=o.accessToken||t;const n={bridge:e,apiOptions:o};let i={};return r.forEach(l=>{i=f(f({},i),l(n))}),e!==!1&&z("https://app.storyblok.com/f/storyblok-v2-latest.js"),i};var K=function(){var s=this,e=s.$createElement,t=s._self._c||e;return t(s.blok.component,s._g(s._b({tag:"component"},"component",Object.assign({},s.$props,s.$attrs),!1),s.$listeners))},Q=[];function Z(s,e,t,r,o,n,i,l){var a=typeof s=="function"?s.options:s;e&&(a.render=e,a.staticRenderFns=t,a._compiled=!0),r&&(a.functional=!0),n&&(a._scopeId="data-v-"+n);var c;if(i?(c=function(d){d=d||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,!d&&typeof __VUE_SSR_CONTEXT__!="undefined"&&(d=__VUE_SSR_CONTEXT__),o&&o.call(this,d),d&&d._registeredComponents&&d._registeredComponents.add(i)},a._ssrRegister=c):o&&(c=l?function(){o.call(this,(a.functional?this.parent:this).$root.$options.shadowRoot)}:o),c)if(a.functional){a._injectStyles=c;var u=a.render;a.render=function(ne,I){return c.call(I),u(ne,I)}}else{var p=a.beforeCreate;a.beforeCreate=p?[].concat(p,c):[c]}return{exports:s,options:a}}const ee={props:{blok:{type:Object}}},C={};var te=Z(ee,K,Q,!1,re,null,null,null);function re(s){for(let e in C)this[e]=C[e]}var $=function(){return te.exports}();const j=s=>{console.error(`You can't use ${s} if you're not loading apiPlugin. Please provide it on StoryblokVue initialization.
+    `)};var oe=(s,e={},t={})=>{const r=_.ref(null),o=A();return _.onMounted(async()=>{if(o){const{data:n}=await o.get(`cdn/stories/${s}`,e);r.value=n.story}else j("useStoryblok");r.value&&r.value.id&&P(r.value.id,n=>r.value=n,t)}),r};const se={bind(s,e){if(e.value){const t=W(e.value);s.setAttribute("data-blok-c",t["data-blok-c"]),s.setAttribute("data-blok-uid",t["data-blok-uid"]),s.classList.add("storyblok__outline")}}};let b=null;const A=()=>(b||j("useStoryblokApi"),b),M={install(s,e={}){s.directive("editable",se),s.component("StoryblokComponent",$);const{storyblokApi:t}=G(e);b=t,s.prototype.$storyblokApi=t}};typeof window!="undefined"&&window.Vue&&window.Vue.use(M),h.StoryblokComponent=$,h.StoryblokVue=M,h.apiPlugin=H,h.useStoryblok=oe,h.useStoryblokApi=A,h.useStoryblokBridge=P,Object.defineProperty(h,"__esModule",{value:!0}),h[Symbol.toStringTag]="Module"});

package/dist/storyblok-nuxt.mjs

@@ -0,0 +1,564 @@
+import t from "axios";
+import { ref, onMounted } from "@vue/composition-api";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a2, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a2, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a2, prop, b[prop]);
+    }
+  return a2;
+};
+var __spreadProps = (a2, b) => __defProps(a2, __getOwnPropDescs(b));
+let loaded = false;
+const callbacks = [];
+const loadBridge = (src) => {
+  return new Promise((resolve, reject) => {
+    if (typeof window === "undefined")
+      return;
+    window.storyblokRegisterEvent = (cb) => {
+      if (window.location === window.parent.location) {
+        console.warn("You are not in Draft Mode or in the Visual Editor.");
+        return;
+      }
+      if (!loaded)
+        callbacks.push(cb);
+      else
+        cb();
+    };
+    if (document.getElementById("storyblok-javascript-bridge"))
+      return;
+    const script = document.createElement("script");
+    script.async = true;
+    script.src = src;
+    script.id = "storyblok-javascript-bridge";
+    script.onerror = (error) => reject(error);
+    script.onload = (ev) => {
+      callbacks.forEach((cb) => cb());
+      loaded = true;
+      resolve(ev);
+    };
+    document.getElementsByTagName("head")[0].appendChild(script);
+  });
+};
+/*!
+ * storyblok-js-client v0.0.0-development
+ * Universal JavaScript SDK for Storyblok's API
+ * (c) 2020-2022 Stobylok Team
+ */
+function e(t2) {
+  return typeof t2 == "number" && (t2 == t2 && t2 !== 1 / 0 && t2 !== -1 / 0);
+}
+function r(t2, r2, s2) {
+  if (!e(r2))
+    throw new TypeError("Expected `limit` to be a finite number");
+  if (!e(s2))
+    throw new TypeError("Expected `interval` to be a finite number");
+  var n2 = [], i2 = [], o2 = 0, a2 = function() {
+    o2++;
+    var e2 = setTimeout(function() {
+      o2--, n2.length > 0 && a2(), i2 = i2.filter(function(t3) {
+        return t3 !== e2;
+      });
+    }, s2);
+    i2.indexOf(e2) < 0 && i2.push(e2);
+    var r3 = n2.shift();
+    r3.resolve(t2.apply(r3.self, r3.args));
+  }, l2 = function() {
+    var t3 = arguments, e2 = this;
+    return new Promise(function(s3, i3) {
+      n2.push({ resolve: s3, reject: i3, args: t3, self: e2 }), o2 < r2 && a2();
+    });
+  };
+  return l2.abort = function() {
+    i2.forEach(clearTimeout), i2 = [], n2.forEach(function(t3) {
+      t3.reject(new throttle.AbortError());
+    }), n2.length = 0;
+  }, l2;
+}
+r.AbortError = function() {
+  Error.call(this, "Throttled function aborted"), this.name = "AbortError";
+};
+const s = function(t2, e2) {
+  if (!t2)
+    return null;
+  let r2 = {};
+  for (let s2 in t2) {
+    let n2 = t2[s2];
+    e2.indexOf(s2) > -1 && n2 !== null && (r2[s2] = n2);
+  }
+  return r2;
+};
+var n = { nodes: { horizontal_rule: (t2) => ({ singleTag: "hr" }), blockquote: (t2) => ({ tag: "blockquote" }), bullet_list: (t2) => ({ tag: "ul" }), code_block: (t2) => ({ tag: ["pre", { tag: "code", attrs: t2.attrs }] }), hard_break: (t2) => ({ singleTag: "br" }), heading: (t2) => ({ tag: "h" + t2.attrs.level }), image: (t2) => ({ singleTag: [{ tag: "img", attrs: s(t2.attrs, ["src", "alt", "title"]) }] }), list_item: (t2) => ({ tag: "li" }), ordered_list: (t2) => ({ tag: "ol" }), paragraph: (t2) => ({ tag: "p" }) }, marks: { bold: () => ({ tag: "b" }), strike: () => ({ tag: "strike" }), underline: () => ({ tag: "u" }), strong: () => ({ tag: "strong" }), code: () => ({ tag: "code" }), italic: () => ({ tag: "i" }), link(t2) {
+  const e2 = __spreadValues({}, t2.attrs), { linktype: r2 = "url" } = t2.attrs;
+  return r2 === "email" && (e2.href = "mailto:" + e2.href), e2.anchor && (e2.href = `${e2.href}#${e2.anchor}`, delete e2.anchor), { tag: [{ tag: "a", attrs: e2 }] };
+}, styled: (t2) => ({ tag: [{ tag: "span", attrs: t2.attrs }] }) } };
+class i {
+  constructor(t2) {
+    t2 || (t2 = n), this.marks = t2.marks || [], this.nodes = t2.nodes || [];
+  }
+  addNode(t2, e2) {
+    this.nodes[t2] = e2;
+  }
+  addMark(t2, e2) {
+    this.marks[t2] = e2;
+  }
+  render(t2 = {}) {
+    if (t2.content && Array.isArray(t2.content)) {
+      let e2 = "";
+      return t2.content.forEach((t3) => {
+        e2 += this.renderNode(t3);
+      }), e2;
+    }
+    return console.warn("The render method must receive an object with a content field, which is an array"), "";
+  }
+  renderNode(t2) {
+    let e2 = [];
+    t2.marks && t2.marks.forEach((t3) => {
+      const r3 = this.getMatchingMark(t3);
+      r3 && e2.push(this.renderOpeningTag(r3.tag));
+    });
+    const r2 = this.getMatchingNode(t2);
+    return r2 && r2.tag && e2.push(this.renderOpeningTag(r2.tag)), t2.content ? t2.content.forEach((t3) => {
+      e2.push(this.renderNode(t3));
+    }) : t2.text ? e2.push(function(t3) {
+      const e3 = { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }, r3 = /[&<>"']/g, s2 = RegExp(r3.source);
+      return t3 && s2.test(t3) ? t3.replace(r3, (t4) => e3[t4]) : t3;
+    }(t2.text)) : r2 && r2.singleTag ? e2.push(this.renderTag(r2.singleTag, " /")) : r2 && r2.html && e2.push(r2.html), r2 && r2.tag && e2.push(this.renderClosingTag(r2.tag)), t2.marks && t2.marks.slice(0).reverse().forEach((t3) => {
+      const r3 = this.getMatchingMark(t3);
+      r3 && e2.push(this.renderClosingTag(r3.tag));
+    }), e2.join("");
+  }
+  renderTag(t2, e2) {
+    if (t2.constructor === String)
+      return `<${t2}${e2}>`;
+    return t2.map((t3) => {
+      if (t3.constructor === String)
+        return `<${t3}${e2}>`;
+      {
+        let r2 = "<" + t3.tag;
+        if (t3.attrs)
+          for (let e3 in t3.attrs) {
+            let s2 = t3.attrs[e3];
+            s2 !== null && (r2 += ` ${e3}="${s2}"`);
+          }
+        return `${r2}${e2}>`;
+      }
+    }).join("");
+  }
+  renderOpeningTag(t2) {
+    return this.renderTag(t2, "");
+  }
+  renderClosingTag(t2) {
+    if (t2.constructor === String)
+      return `</${t2}>`;
+    return t2.slice(0).reverse().map((t3) => t3.constructor === String ? `</${t3}>` : `</${t3.tag}>`).join("");
+  }
+  getMatchingNode(t2) {
+    if (typeof this.nodes[t2.type] == "function")
+      return this.nodes[t2.type](t2);
+  }
+  getMatchingMark(t2) {
+    if (typeof this.marks[t2.type] == "function")
+      return this.marks[t2.type](t2);
+  }
+}
+const o = (t2 = 0, e2 = t2) => {
+  const r2 = Math.abs(e2 - t2) || 0, s2 = t2 < e2 ? 1 : -1;
+  return ((t3 = 0, e3) => [...Array(t3)].map(e3))(r2, (e3, r3) => r3 * s2 + t2);
+}, a = (t2, e2, r2) => {
+  const s2 = [];
+  for (const n2 in t2) {
+    if (!Object.prototype.hasOwnProperty.call(t2, n2))
+      continue;
+    const i2 = t2[n2], o2 = r2 ? "" : encodeURIComponent(n2);
+    let l2;
+    l2 = typeof i2 == "object" ? a(i2, e2 ? e2 + encodeURIComponent("[" + o2 + "]") : o2, Array.isArray(i2)) : (e2 ? e2 + encodeURIComponent("[" + o2 + "]") : o2) + "=" + encodeURIComponent(i2), s2.push(l2);
+  }
+  return s2.join("&");
+};
+let l = {}, c = {};
+class StoryblokClient {
+  constructor(e2, s2) {
+    if (!s2) {
+      let t2 = e2.region ? "-" + e2.region : "", r2 = e2.https === false ? "http" : "https";
+      s2 = e2.oauthToken === void 0 ? `${r2}://api${t2}.storyblok.com/v2` : `${r2}://api${t2}.storyblok.com/v1`;
+    }
+    let n2 = Object.assign({}, e2.headers), o2 = 5;
+    e2.oauthToken !== void 0 && (n2.Authorization = e2.oauthToken, o2 = 3), e2.rateLimit !== void 0 && (o2 = e2.rateLimit), this.richTextResolver = new i(e2.richTextSchema), typeof e2.componentResolver == "function" && this.setComponentResolver(e2.componentResolver), this.maxRetries = e2.maxRetries || 5, this.throttle = r(this.throttledRequest, o2, 1e3), this.accessToken = e2.accessToken, this.relations = {}, this.links = {}, this.cache = e2.cache || { clear: "manual" }, this.client = t.create({ baseURL: s2, timeout: e2.timeout || 0, headers: n2, proxy: e2.proxy || false }), e2.responseInterceptor && this.client.interceptors.response.use((t2) => e2.responseInterceptor(t2));
+  }
+  setComponentResolver(t2) {
+    this.richTextResolver.addNode("blok", (e2) => {
+      let r2 = "";
+      return e2.attrs.body.forEach((e3) => {
+        r2 += t2(e3.component, e3);
+      }), { html: r2 };
+    });
+  }
+  parseParams(t2 = {}) {
+    return t2.version || (t2.version = "published"), t2.token || (t2.token = this.getToken()), t2.cv || (t2.cv = c[t2.token]), Array.isArray(t2.resolve_relations) && (t2.resolve_relations = t2.resolve_relations.join(",")), t2;
+  }
+  factoryParamOptions(t2, e2 = {}) {
+    return ((t3 = "") => t3.indexOf("/cdn/") > -1)(t2) ? this.parseParams(e2) : e2;
+  }
+  makeRequest(t2, e2, r2, s2) {
+    const n2 = this.factoryParamOptions(t2, ((t3 = {}, e3 = 25, r3 = 1) => __spreadProps(__spreadValues({}, t3), { per_page: e3, page: r3 }))(e2, r2, s2));
+    return this.cacheResponse(t2, n2);
+  }
+  get(t2, e2) {
+    let r2 = "/" + t2;
+    const s2 = this.factoryParamOptions(r2, e2);
+    return this.cacheResponse(r2, s2);
+  }
+  async getAll(t2, e2 = {}, r2) {
+    const s2 = e2.per_page || 25, n2 = "/" + t2, i2 = n2.split("/");
+    r2 = r2 || i2[i2.length - 1];
+    const a2 = await this.makeRequest(n2, e2, s2, 1), l2 = Math.ceil(a2.total / s2);
+    return ((t3 = [], e3) => t3.map(e3).reduce((t4, e4) => [...t4, ...e4], []))([a2, ...await (async (t3 = [], e3) => Promise.all(t3.map(e3)))(o(1, l2), async (t3) => this.makeRequest(n2, e2, s2, t3 + 1))], (t3) => Object.values(t3.data[r2]));
+  }
+  post(t2, e2) {
+    let r2 = "/" + t2;
+    return this.throttle("post", r2, e2);
+  }
+  put(t2, e2) {
+    let r2 = "/" + t2;
+    return this.throttle("put", r2, e2);
+  }
+  delete(t2, e2) {
+    let r2 = "/" + t2;
+    return this.throttle("delete", r2, e2);
+  }
+  getStories(t2) {
+    return this.get("cdn/stories", t2);
+  }
+  getStory(t2, e2) {
+    return this.get("cdn/stories/" + t2, e2);
+  }
+  setToken(t2) {
+    this.accessToken = t2;
+  }
+  getToken() {
+    return this.accessToken;
+  }
+  _cleanCopy(t2) {
+    return JSON.parse(JSON.stringify(t2));
+  }
+  _insertLinks(t2, e2) {
+    const r2 = t2[e2];
+    r2 && r2.fieldtype == "multilink" && r2.linktype == "story" && typeof r2.id == "string" && this.links[r2.id] ? r2.story = this._cleanCopy(this.links[r2.id]) : r2 && r2.linktype === "story" && typeof r2.uuid == "string" && this.links[r2.uuid] && (r2.story = this._cleanCopy(this.links[r2.uuid]));
+  }
+  _insertRelations(t2, e2, r2) {
+    if (r2.indexOf(t2.component + "." + e2) > -1) {
+      if (typeof t2[e2] == "string")
+        this.relations[t2[e2]] && (t2[e2] = this._cleanCopy(this.relations[t2[e2]]));
+      else if (t2[e2].constructor === Array) {
+        let r3 = [];
+        t2[e2].forEach((t3) => {
+          this.relations[t3] && r3.push(this._cleanCopy(this.relations[t3]));
+        }), t2[e2] = r3;
+      }
+    }
+  }
+  iterateTree(t2, e2) {
+    let r2 = (t3) => {
+      if (t3 != null) {
+        if (t3.constructor === Array)
+          for (let e3 = 0; e3 < t3.length; e3++)
+            r2(t3[e3]);
+        else if (t3.constructor === Object) {
+          if (t3._stopResolving)
+            return;
+          for (let s2 in t3)
+            (t3.component && t3._uid || t3.type === "link") && (this._insertRelations(t3, s2, e2), this._insertLinks(t3, s2)), r2(t3[s2]);
+        }
+      }
+    };
+    r2(t2.content);
+  }
+  async resolveLinks(t2, e2) {
+    let r2 = [];
+    if (t2.link_uuids) {
+      const s2 = t2.link_uuids.length;
+      let n2 = [];
+      const i2 = 50;
+      for (let e3 = 0; e3 < s2; e3 += i2) {
+        const r3 = Math.min(s2, e3 + i2);
+        n2.push(t2.link_uuids.slice(e3, r3));
+      }
+      for (let t3 = 0; t3 < n2.length; t3++) {
+        (await this.getStories({ per_page: i2, language: e2.language, version: e2.version, by_uuids: n2[t3].join(",") })).data.stories.forEach((t4) => {
+          r2.push(t4);
+        });
+      }
+    } else
+      r2 = t2.links;
+    r2.forEach((t3) => {
+      this.links[t3.uuid] = __spreadProps(__spreadValues({}, t3), { _stopResolving: true });
+    });
+  }
+  async resolveRelations(t2, e2) {
+    let r2 = [];
+    if (t2.rel_uuids) {
+      const s2 = t2.rel_uuids.length;
+      let n2 = [];
+      const i2 = 50;
+      for (let e3 = 0; e3 < s2; e3 += i2) {
+        const r3 = Math.min(s2, e3 + i2);
+        n2.push(t2.rel_uuids.slice(e3, r3));
+      }
+      for (let t3 = 0; t3 < n2.length; t3++) {
+        (await this.getStories({ per_page: i2, language: e2.language, version: e2.version, by_uuids: n2[t3].join(",") })).data.stories.forEach((t4) => {
+          r2.push(t4);
+        });
+      }
+    } else
+      r2 = t2.rels;
+    r2.forEach((t3) => {
+      this.relations[t3.uuid] = __spreadProps(__spreadValues({}, t3), { _stopResolving: true });
+    });
+  }
+  async resolveStories(t2, e2) {
+    let r2 = [];
+    e2.resolve_relations !== void 0 && e2.resolve_relations.length > 0 && (r2 = e2.resolve_relations.split(","), await this.resolveRelations(t2, e2)), ["1", "story", "url"].indexOf(e2.resolve_links) > -1 && await this.resolveLinks(t2, e2);
+    for (const t3 in this.relations)
+      this.iterateTree(this.relations[t3], r2);
+    t2.story ? this.iterateTree(t2.story, r2) : t2.stories.forEach((t3) => {
+      this.iterateTree(t3, r2);
+    });
+  }
+  cacheResponse(t2, e2, r2) {
+    return r2 === void 0 && (r2 = 0), new Promise(async (s2, n2) => {
+      let i2 = a({ url: t2, params: e2 }), o2 = this.cacheProvider();
+      if (this.cache.clear === "auto" && e2.version === "draft" && await this.flushCache(), e2.version === "published" && t2 != "/cdn/spaces/me") {
+        const t3 = await o2.get(i2);
+        if (t3)
+          return s2(t3);
+      }
+      try {
+        let r3 = await this.throttle("get", t2, { params: e2, paramsSerializer: (t3) => a(t3) }), l3 = { data: r3.data, headers: r3.headers };
+        if (r3.headers["per-page"] && (l3 = Object.assign({}, l3, { perPage: parseInt(r3.headers["per-page"]), total: parseInt(r3.headers.total) })), r3.status != 200)
+          return n2(r3);
+        (l3.data.story || l3.data.stories) && await this.resolveStories(l3.data, e2), e2.version === "published" && t2 != "/cdn/spaces/me" && o2.set(i2, l3), l3.data.cv && (e2.version == "draft" && c[e2.token] != l3.data.cv && this.flushCache(), c[e2.token] = l3.data.cv), s2(l3);
+      } catch (i3) {
+        if (i3.response && i3.response.status === 429 && (r2 += 1) < this.maxRetries)
+          return console.log(`Hit rate limit. Retrying in ${r2} seconds.`), await (l2 = 1e3 * r2, new Promise((t3) => setTimeout(t3, l2))), this.cacheResponse(t2, e2, r2).then(s2).catch(n2);
+        n2(i3);
+      }
+      var l2;
+    });
+  }
+  throttledRequest(t2, e2, r2) {
+    return this.client[t2](e2, r2);
+  }
+  cacheVersions() {
+    return c;
+  }
+  cacheVersion() {
+    return c[this.accessToken];
+  }
+  setCacheVersion(t2) {
+    this.accessToken && (c[this.accessToken] = t2);
+  }
+  cacheProvider() {
+    switch (this.cache.type) {
+      case "memory":
+        return { get: (t2) => l[t2], getAll: () => l, set(t2, e2) {
+          l[t2] = e2;
+        }, flush() {
+          l = {};
+        } };
+      default:
+        return { get() {
+        }, getAll() {
+        }, set() {
+        }, flush() {
+        } };
+    }
+  }
+  async flushCache() {
+    return await this.cacheProvider().flush(), this;
+  }
+}
+var api = (options = {}) => {
+  const { apiOptions } = options;
+  if (!apiOptions.accessToken) {
+    console.error("You need to provide an access token to interact with Storyblok API. Read https://www.storyblok.com/docs/api/content-delivery#topics/authentication");
+    return;
+  }
+  const storyblokApi = new StoryblokClient(apiOptions);
+  return { storyblokApi };
+};
+var editable = (blok) => {
+  if (typeof blok !== "object" || typeof blok._editable === "undefined") {
+    return {};
+  }
+  const options = JSON.parse(blok._editable.replace(/^<!--#storyblok#/, "").replace(/-->$/, ""));
+  return {
+    "data-blok-c": JSON.stringify(options),
+    "data-blok-uid": options.id + "-" + options.uid
+  };
+};
+const useStoryblokBridge = (id, cb, options = {}) => {
+  if (typeof window === "undefined") {
+    return;
+  }
+  if (typeof window.storyblokRegisterEvent === "undefined") {
+    console.error("Storyblok Bridge is disabled. Please enable it to use it. Read https://github.com/storyblok/storyblok-js");
+    return;
+  }
+  window.storyblokRegisterEvent(() => {
+    const sbBridge = new window.StoryblokBridge(options);
+    sbBridge.on(["input", "published", "change"], (event) => {
+      if (event.action == "input" && event.story.id === id) {
+        cb(event.story);
+      } else {
+        window.location.reload();
+      }
+    });
+  });
+};
+const storyblokInit = (pluginOptions = {}) => {
+  const { bridge, accessToken, use = [], apiOptions = {} } = pluginOptions;
+  apiOptions.accessToken = apiOptions.accessToken || accessToken;
+  const options = { bridge, apiOptions };
+  let result = {};
+  use.forEach((pluginFactory) => {
+    result = __spreadValues(__spreadValues({}, result), pluginFactory(options));
+  });
+  if (bridge !== false) {
+    loadBridge("https://app.storyblok.com/f/storyblok-v2-latest.js");
+  }
+  return result;
+};
+var render = function() {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c(_vm.blok.component, _vm._g(_vm._b({ tag: "component" }, "component", Object.assign({}, _vm.$props, _vm.$attrs), false), _vm.$listeners));
+};
+var staticRenderFns = [];
+function normalizeComponent(scriptExports, render2, staticRenderFns2, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
+  var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
+  if (render2) {
+    options.render = render2;
+    options.staticRenderFns = staticRenderFns2;
+    options._compiled = true;
+  }
+  if (functionalTemplate) {
+    options.functional = true;
+  }
+  if (scopeId) {
+    options._scopeId = "data-v-" + scopeId;
+  }
+  var hook;
+  if (moduleIdentifier) {
+    hook = function(context) {
+      context = context || this.$vnode && this.$vnode.ssrContext || this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext;
+      if (!context && typeof __VUE_SSR_CONTEXT__ !== "undefined") {
+        context = __VUE_SSR_CONTEXT__;
+      }
+      if (injectStyles) {
+        injectStyles.call(this, context);
+      }
+      if (context && context._registeredComponents) {
+        context._registeredComponents.add(moduleIdentifier);
+      }
+    };
+    options._ssrRegister = hook;
+  } else if (injectStyles) {
+    hook = shadowMode ? function() {
+      injectStyles.call(this, (options.functional ? this.parent : this).$root.$options.shadowRoot);
+    } : injectStyles;
+  }
+  if (hook) {
+    if (options.functional) {
+      options._injectStyles = hook;
+      var originalRender = options.render;
+      options.render = function renderWithStyleInjection(h, context) {
+        hook.call(context);
+        return originalRender(h, context);
+      };
+    } else {
+      var existing = options.beforeCreate;
+      options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
+    }
+  }
+  return {
+    exports: scriptExports,
+    options
+  };
+}
+const __vue2_script = {
+  props: {
+    blok: {
+      type: Object
+    }
+  }
+};
+const __cssModules = {};
+var __component__ = /* @__PURE__ */ normalizeComponent(__vue2_script, render, staticRenderFns, false, __vue2_injectStyles, null, null, null);
+function __vue2_injectStyles(context) {
+  for (let o2 in __cssModules) {
+    this[o2] = __cssModules[o2];
+  }
+}
+var StoryblokComponent = /* @__PURE__ */ function() {
+  return __component__.exports;
+}();
+const printError = (fnName) => {
+  console.error(`You can't use ${fnName} if you're not loading apiPlugin. Please provide it on StoryblokVue initialization.
+    `);
+};
+var useStoryblok = (url, apiOptions = {}, bridgeOptions = {}) => {
+  const story = ref(null);
+  const storyblokApiInstance2 = useStoryblokApi();
+  onMounted(async () => {
+    if (storyblokApiInstance2) {
+      const { data } = await storyblokApiInstance2.get(`cdn/stories/${url}`, apiOptions);
+      story.value = data.story;
+    } else
+      printError("useStoryblok");
+    if (story.value && story.value.id) {
+      useStoryblokBridge(story.value.id, (evStory) => story.value = evStory, bridgeOptions);
+    }
+  });
+  return story;
+};
+const vEditableDirective = {
+  bind(el, binding) {
+    if (binding.value) {
+      const options = editable(binding.value);
+      el.setAttribute("data-blok-c", options["data-blok-c"]);
+      el.setAttribute("data-blok-uid", options["data-blok-uid"]);
+      el.classList.add("storyblok__outline");
+    }
+  }
+};
+let storyblokApiInstance = null;
+const useStoryblokApi = () => {
+  if (!storyblokApiInstance)
+    printError("useStoryblokApi");
+  return storyblokApiInstance;
+};
+const StoryblokVue = {
+  install(app, pluginOptions = {}) {
+    app.directive("editable", vEditableDirective);
+    app.component("StoryblokComponent", StoryblokComponent);
+    const { storyblokApi } = storyblokInit(pluginOptions);
+    storyblokApiInstance = storyblokApi;
+    app.prototype.$storyblokApi = storyblokApi;
+  }
+};
+if (typeof window !== "undefined" && window.Vue) {
+  window.Vue.use(StoryblokVue);
+}
+export { StoryblokComponent, StoryblokVue, api as apiPlugin, useStoryblok, useStoryblokApi, useStoryblokBridge };

package/module/index.js

@@ -0,0 +1,34 @@
+const path = require("path");
+
+module.exports = function nuxtStoryblok(moduleOptions) {
+  let options = Object.assign({}, this.options.storyblok, moduleOptions);
+  this.addPlugin({
+    src: path.resolve(__dirname, "plugin.js"),
+    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;
+
+    config.module.rules.forEach((rule) => {
+      if (rule.test instanceof RegExp && rule.test.test("index.mjs")) {
+        rule.type = "javascript/auto";
+      }
+    });
+
+    config.module.rules.unshift({
+      test: /\.mjs$/,
+      type: "javascript/auto",
+      include: [/node_modules/],
+    });
+  });
+};
+
+module.exports.meta = require("../package.json");

package/module/plugin.js

@@ -0,0 +1,29 @@
+/* eslint-disable */
+
+import Vue from 'vue'
+import { StoryblokVue, useStoryblokApi, useStoryblokBridge } from "@storyblok/nuxt";
+<% if (options.useApiClient !== false) { %>
+import { apiPlugin } from "@storyblok/nuxt";
+<% } %>
+
+export default (ctx) => {
+  const { app, store } = ctx
+
+  Vue.use(StoryblokVue, {
+    accessToken: "<%= options.accessToken %>",
+    bridge: <%= 'process.env.NODE_ENV !== "production"' %>,
+    apiOptions: <%- JSON.stringify(options.apiOptions || {}) %>,
+    <% if (options.useApiClient !== false) { %>
+    use: [apiPlugin]
+    <% } %>
+  });
+
+  const api = useStoryblokApi()
+
+  app.$storyapi = api
+  ctx.$storyapi = api
+  app.$storybridge = useStoryblokBridge
+  ctx.$storybridge = useStoryblokBridge
+
+  if (store) store.$storyapi = api
+}

package/package.json

@@ -1,16 +1,22 @@
 {
   "name": "@storyblok/nuxt",
-  "version": "2.0.5",
+  "version": "2.1.0",
   "description": "Storyblok Nuxt.js module",
-  "license": "MIT",
-  "contributors": [
-    {
-      "name": "Alexander Feiglstorfer <delooks@gmail.com>"
-    }
+  "exports": {
+    ".": {
+      "import": "./dist/storyblok-nuxt.mjs",
+      "require": "./dist/storyblok-nuxt.js"
+    },
+    "./module": "./module/index.js"
+  },
+  "main": "./dist/storyblok-nuxt.js",
+  "module": "./dist/storyblok-nuxt.mjs",
+  "files": [
+    "dist",
+    "module"
   ],
-  "main": "./module.js",
-  "repository": "https://github.com/storyblok/storyblok-nuxt",
   "scripts": {
+    "build": "vite build",
     "cy:open": "cypress open",
     "cy:run": "cypress run",
     "playground:run": "cd ../playground && npm run start",
@@ -19,13 +25,8 @@
     "test:e2e-watch": "start-server-and-test playground:run http://localhost:3000 cy:open",
     "prepublishOnly": "cp ../README.md ./"
   },
-  "files": [
-    "module.js",
-    "templates"
-  ],
   "dependencies": {
-    "@storyblok/vue": "^2.0.0",
-    "storyblok-js-client": "^4.1.5"
+    "@storyblok/vue-2": "^1.0.2"
   },
   "devDependencies": {
     "@babel/core": "^7.15.0",
@@ -33,21 +34,18 @@
     "cypress": "^8.3.0",
     "eslint-plugin-cypress": "^2.12.1",
     "jest": "^26.6.3",
-    "start-server-and-test": "^1.14.0"
-  },
-  "eslintConfig": {
-    "env": {
-      "node": true
-    }
+    "start-server-and-test": "^1.14.0",
+    "vite": "^2.8.4"
   },
   "release": {
     "branches": [
-      "master",
-      {
-        "name": "next",
-        "channel": "next",
-        "prerelease": "beta"
-      }
+      "main"
     ]
-  }
+  },
+  "repository": "https://github.com/storyblok/storyblok-nuxt",
+  "contributors": [
+    {
+      "name": "Alexander Feiglstorfer <delooks@gmail.com>"
+    }
+  ]
 }

package/module.js

@@ -1,12 +0,0 @@
-const path = require("path");
-
-module.exports = function nuxtStoryblok(moduleOptions) {
-  let options = Object.assign({}, this.options.storyblok, moduleOptions);
-
-  this.addPlugin({
-    src: path.resolve(__dirname, "templates/plugin.js"),
-    options,
-  });
-};
-
-module.exports.meta = require("./package.json");

package/templates/plugin.js

@@ -1,82 +0,0 @@
-import Vue from 'vue'
-import StoryblokClient from 'storyblok-js-client'
-import StoryblokVue from '@storyblok/vue'
-
-const loadScript = function(src, cb) {
-  if (document.getElementById('storyblok-javascript-bridge')) {
-    return cb()
-  }
-
-  var script = document.createElement('script')
-  script.async = true
-  script.src = src
-  script.id = 'storyblok-javascript-bridge'
-
-  script.onerror = function() {
-    cb(new Error('Failed to load' + src))
-  }
-
-  script.onload = function() {
-    cb()
-  }
-
-  document.getElementsByTagName('head')[0].appendChild(script)
-}
-
-let doLoadScript = true
-
-const Client = {
-  install () {
-    if (!Vue.prototype.$storyapi) {
-      Vue.prototype.$storyapi = new StoryblokClient({
-        accessToken: '<%= options.accessToken %>',
-        cache: {
-          clear: 'auto',
-          type: '<%= options.cacheProvider || 'memory' %>'
-        },
-        timeout: <%= options.timeout || 0 %><% if (options.region) { %>,
-        region: '<%= options.region %>'<% } %><% if (typeof options.https !== 'undefined') { %>,
-        https: <%= options.https %><% } %>
-      }<% if (typeof options.endpoint !== 'undefined') { %>, '<%= options.endpoint %>'<% } %>)
-
-      Vue.prototype.$storybridge = function(cb, errorCb) {
-        if (typeof errorCb !== 'function') {
-          errorCb = function() {}
-        }
-
-        if (window.location == window.parent.location) {
-          errorCb('You are not in the edit mode.')
-          return
-        }
-
-        if (!doLoadScript) {
-          if (!window.StoryblokBridge) {
-            errorCb('The Storyblok bridge script is already loading.')
-            return
-          }
-          cb()
-          return
-        }
-
-        doLoadScript = false
-        loadScript('https://app.storyblok.com/f/storyblok-v2-latest.js', cb)
-      }
-    }
-  }
-}
-
-Vue.use(Client)
-Vue.use(StoryblokVue)
-
-export default (ctx) => {
-  const { app, store } = ctx
-
-  app.$storyapi = Vue.prototype.$storyapi
-  ctx.$storyapi = Vue.prototype.$storyapi
-  app.$storybridge = Vue.prototype.$storybridge
-  ctx.$storybridge = Vue.prototype.$storybridge
-
-  if (store) {
-    store.$storyapi = Vue.prototype.$storyapi
-  }
-}