@storyblok/nuxt 5.1.0 → 5.2.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/package.json

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