@storyblok/nuxt 5.1.0 → 5.3.0

package/README.md

@@ -76,7 +76,9 @@ export default defineNuxtConfig({
 
 #### Options
 
-When you initialize the module, you can pass all [_@storyblok/vue_ options](https://github.com/storyblok/storyblok-vue#storyblok-api) plus a `useApiClient` option. For spaces created in the United States, you have to set the `region` parameter accordingly `{ apiOptions: { region: 'us' } }`.
+When you initialize the module, you can pass all [_@storyblok/vue_ options](https://github.com/storyblok/storyblok-vue#storyblok-api) plus a `bridge` option explained in our [JS SDK Storyblok bridge section](https://github.com/storyblok/storyblok-js#storyblok-bridge).
+
+> Note: For spaces created in the United States, you have to set the `region` parameter accordingly `{ apiOptions: { region: 'us' } }`.
 
 ```js
 // Defaults
@@ -85,7 +87,6 @@ When you initialize the module, you can pass all [_@storyblok/vue_ options](http
     accessToken: "<your-access-token>",
     bridge: true,
     apiOptions: {}, // storyblok-js-client options
-    useApiClient: true
   }
 }]
 ```
@@ -94,9 +95,13 @@ When you initialize the module, you can pass all [_@storyblok/vue_ options](http
 
 ### 1. Creating and linking your components to Storyblok Visual Editor
 
-To link your Vue components to their equivalent you created in Storyblok:
+To link your Vue components to the equivalent one in your Storyblok space:
+
+- First, you need to load them globally adding them to the `~/storyblok` directory. It's important to name them with Pascal case in your code `ExampleComponent.vue` and with a hyphen inside your Storyblok space `example-component`, so they will be imported automatically.
+
+  Otherwise, you can set another directory and load them manually (for example, by [using a Nuxt plugin](https://stackoverflow.com/questions/43040692/global-components-in-vue-nuxt)).
 
-- First, you need to load them globally. You can just place them on the `~/storyblok` directory and will be discovered automagically, otherwise you set another directory can load them manually (for example, by [using a Nuxt plugin](https://stackoverflow.com/questions/43040692/global-components-in-vue-nuxt)).
+  > Take into account that if you name a component inside the `storyblok` folder the same as another in the `components` folder, it won't work properly. Tip: Keep the components in your Nuxt project with different names.
 
 - For each components, use the `v-editable` directive on its root element, passing the `blok` property that they receive:
 
@@ -118,6 +123,8 @@ To link your Vue components to their equivalent you created in Storyblok:
 
 The simplest way is by using the `useAsyncStoryblok` one-liner composable (it's autoimported) and passing as a first parameter a name of your content page from Storyblok (in this case, our content page name is `vue`, by default you get a content page named `home`):
 
+> If you want to know more about versioning `{ version: "draft" /* or "publish" */ }` then go to the section [Working with preview and/or production environments](#3-working-with-preview-andor-production-environments)
+
 ```html
 <script setup>
   const story = await useAsyncStoryblok("vue", { version: "draft" });
@@ -197,6 +204,16 @@ You can also set a **custom Schema and component resolver** by passing the optio
 </script>
 ```
 
+### 3. Working with preview and/or production environments
+
+Remember that the bridge only works using `version: { 'draft' }` and the _Preview Access Token_.
+
+For the production site, NOT used as a preview for content editors, `version: { 'published' }` and _Public Access Token_ should be used.
+
+> If you're using production as a preview for marketeers and your public site, you will need a plugin to handle different .env variables, or versions using the _Preview Access Token_, checking if you are inside Storyblok or not. For example, something like `if (window.location.search.includes(_storyblok_tk[token]=<YOUR_TOKEN>)`.
+
+Check the official docs on how to [access different content versions](https://www.storyblok.com/docs/guide/essentials/accessing-data#content-versions).
+
 ### API
 
 #### useAsyncStoryblok(slug, apiOptions, bridgeOptions)

package/dist/module.d.ts

@@ -1,38 +1,11 @@
-import { defineNuxtModule, createResolver, addComponentsDir, addPlugin, addImports, addImportsDir } from '@nuxt/kit';
+import * as _nuxt_schema from '@nuxt/schema';
 
-var module = defineNuxtModule({
-  meta: {
-    name: "@storyblok/nuxt",
-    configKey: "storyblok"
-  },
-  defaults: {
-    usePlugin: true
-  },
-  setup(options, nuxt) {
-    const resolver = createResolver(import.meta.url);
-    nuxt.options.vite.optimizeDeps.include = nuxt.options.vite.optimizeDeps.include || [];
-    nuxt.options.vite.optimizeDeps.include.push("@storyblok/nuxt");
-    nuxt.options.vite.optimizeDeps.include.push("@storyblok/vue");
-    addComponentsDir({ path: "~/storyblok", global: true, pathPrefix: false });
-    nuxt.options.build.transpile.push(resolver.resolve("./runtime"));
-    nuxt.options.build.transpile.push("@storyblok/nuxt");
-    nuxt.options.build.transpile.push("@storyblok/vue");
-    nuxt.options.runtimeConfig.public.storyblok = options;
-    if (options.usePlugin !== false) {
-      addPlugin(resolver.resolve("./runtime/plugin"));
-    }
-    const names = [
-      "useStoryblok",
-      "useStoryblokApi",
-      "useStoryblokBridge",
-      "renderRichText",
-      "RichTextSchema"
-    ];
-    for (const name of names) {
-      addImports({ name, as: name, from: "@storyblok/vue" });
-    }
-    addImportsDir(resolver.resolve("./runtime/composables"));
-  }
-});
+interface ModuleOptions {
+    accessToken: string;
+    usePlugin: boolean;
+    bridge: boolean;
+    apiOptions: any;
+}
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
 
-export { module as default };
+export { ModuleOptions, _default as default };

package/dist/module.mjs

@@ -6,7 +6,10 @@ const module = defineNuxtModule({
     configKey: "storyblok"
   },
   defaults: {
-    usePlugin: true
+    accessToken: "",
+    usePlugin: true,
+    bridge: true,
+    apiOptions: {}
   },
   setup(options, nuxt) {
     const resolver = createResolver(import.meta.url);

package/dist/runtime/plugin.d.ts

@@ -1,2 +1,2 @@
-declare var _default: any;
+declare const _default: any;
 export default _default;

package/dist/runtime/plugin.mjs

@@ -1,6 +1,5 @@
 import { StoryblokVue, apiPlugin } from "@storyblok/vue";
 import { defineNuxtPlugin, useRuntimeConfig } from "#app";
-
 export default defineNuxtPlugin(({ vueApp }) => {
   let { storyblok } = useRuntimeConfig();
   storyblok = JSON.parse(JSON.stringify(storyblok));

package/dist/types.d.ts

@@ -1,6 +1,10 @@
 
-import {  } from './module'
+import { ModuleOptions } from './module'
 
+declare module '@nuxt/schema' {
+  interface NuxtConfig { ['storyblok']?: Partial<ModuleOptions> }
+  interface NuxtOptions { ['storyblok']?: ModuleOptions }
+}
 
 
 export { default } from './module'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storyblok/nuxt",
-  "version": "5.1.0",
+  "version": "5.3.0",
   "description": "Storyblok Nuxt module",
   "type": "module",
   "exports": {