@storyblok/nuxt 6.0.10 → 6.0.11

package/README.md

@@ -21,25 +21,19 @@
    </a>
   <a href="https://twitter.com/intent/follow?screen_name=storyblok">
     <img src="https://img.shields.io/badge/Follow-%40storyblok-09b3af?style=appveyor&logo=twitter" alt="Follow @Storyblok" />
-  </a><br/>
+  </a><br />
   <a href="https://app.storyblok.com/#!/signup?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-nuxt">
     <img src="https://img.shields.io/badge/Try%20Storyblok-Free-09b3af?style=appveyor&logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAHqADAAQAAAABAAAAHgAAAADpiRU/AAACRElEQVRIDWNgGGmAEd3D3Js3LPrP8D8WXZwSPiMjw6qvPoHhyGYwIXNAbGpbCjbzP0MYuj0YFqMroBV/wCxmIeSju64eDNzMBJUxvP/9i2Hnq5cM1devMnz984eQsQwETeRhYWHgIcJiXqC6VHlFBjUeXgav40cIWkz1oLYXFmGwFBImaDFBHyObcOzdW4aSq5eRhRiE2dgYlpuYoYSKJi8vw3GgWnyAJIs/AuPu4scPGObd/fqVQZ+PHy7+6udPOBsXgySLDfn5GRYYmaKYJcXBgWLpsx8/GPa8foWiBhuHJIsl2DkYQqWksZkDFgP5PObcKYYff//iVAOTIDlx/QPqRMb/YSYBaWlOToZIaVkGZmAZSQiQ5OPtwHwacuo4iplMQEu6tXUZMhSUGDiYmBjylFQYvv/7x9B04xqKOnQOyT5GN+Df//8M59ASXKyMHLoyDD5JPtbj42OYrm+EYgg70JfuYuIoYmLs7AwMjIzA+uY/zjAnyWJpDk6GOFnCvrn86SOwmsNtKciVFAc1ileBHFDC67lzG10Yg0+SjzF0ownsf/OaofvOLYaDQJoQIGix94ljv1gIZI8Pv38zPvj2lQWYf3HGKbpDCFp85v07NnRN1OBTPY6JdRSGxcCw2k6sZuLVMZ5AV4s1TozPnGGFKbz+/PE7IJsHmC//MDMyhXBw8e6FyRFLv3Z0/IKuFqvFyIqAzd1PwBzJw8jAGPfVx38JshwlbIygxmYY43/GQmpais0ODDHuzevLMARHBcgIAQAbOJHZW0/EyQAAAABJRU5ErkJggg==" alt="Follow @Storyblok" />
   </a>
 </p>
 
-### Live Demo
+## Kickstart a new project
+Are you eager to dive into coding? **[Follow these steps to kickstart a new project with Storyblok and Nuxt](https://www.storyblok.com/technologies#nuxt?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-nuxt)**, and get started in just a few minutes!
 
-If you are in a hurry, check out our official **[live demo](https://stackblitz.com/edit/nuxt-3-sdk-demo?file=pages/index.vue)** on Stackblitz.
+## Ultimate Tutorial
+Are you looking for a hands-on, step-by-step tutorial? The **[Nuxt Ultimate Tutorial](https://www.storyblok.com/tp/storyblok-nuxt-ultimate-tutorial?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-nuxt)** has you covered! It provides comprehensive instructions on building a complete, multilingual website using Storyblok and Nuxt from start to finish.
 
-## 🚀 Usage
-
-> **Note**
-> This module is for Nuxt 3. [Check out `@storyblok/nuxt-2` for Nuxt 2](https://github.com/storyblok/storyblok-nuxt-2).
-
-> **Important**
-> 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
+## Installation
 
 Install `@storyblok/nuxt`:
 
@@ -76,7 +70,7 @@ export default defineNuxtConfig({
 > **Warning**
 > This SDK uses the Fetch API under the hood. If your environment doesn't support it, you need to install a polyfill like [isomorphic-fetch](https://github.com/matthew-andrews/isomorphic-fetch). More info on [storyblok-js-client docs](https://github.com/storyblok/storyblok-js-client#fetch-use-polyfill-if-needed---version-5).
 
-#### Options
+### Options
 
 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) and a `enableSudoMode` option to define your own plugin (see below).
 
@@ -95,7 +89,7 @@ When you initialize the module, you can pass all [_@storyblok/vue_ options](http
 }]
 ```
 
-#### Define your own plugin
+### Define your own plugin
 
 While the recommended approach covers most cases, there are specific instances where you may need to use the `enableSudoMode` option and disable our plugin, allowing you to incorporate your own.
 
@@ -136,7 +130,7 @@ export default defineNuxtPlugin(({ vueApp }) => {
 });
 ```
 
-#### Region parameter
+## Region parameter
 
 Possible values:
 
@@ -162,9 +156,9 @@ Full example for a space created in the US:
 > **Important**
 > For spaces created in the United States or China, the `region` parameter **must** be specified.
 
-### Getting started
+## Getting started
 
-### 1. Creating and linking your components to Storyblok Visual Editor
+### 1. Creating and linking your components to the Storyblok Visual Editor
 
 To link your Vue components to the equivalent one in your Storyblok space:
 
@@ -179,7 +173,7 @@ To link your Vue components to the equivalent one in your Storyblok space:
       "@storyblok/nuxt",
       {
         accessToken: "<your-access-token>",
-        componentsDir: false,
+        componentsDir: '~/components',
       }
     ]
   ],
@@ -201,7 +195,7 @@ To link your Vue components to the equivalent one in your Storyblok space:
 - For each component, use the `v-editable` directive on its root element, passing the `blok` property that they receive:
 
 ```html
-<div v-editable="blok" / >
+<div v-editable="blok"></div>
 ```
 
 - Finally, use `<StoryblokComponent>` which is available globally in the Nuxt app:
@@ -251,7 +245,7 @@ Which is the short-hand equivalent to using `useStoryblokApi` inside `useState`
   const story = useState();
   const storyblokApi = useStoryblokApi();
 
-  const { data } = await storyblokApiInstance.get(
+  const { data } = await storyblokApi.get(
     `cdn/stories/vue`,
     {
       version: "draft"
@@ -275,7 +269,7 @@ Which is the short-hand equivalent to using `useStoryblokApi` inside `useState`
 
 > The `useState` is an SSR-friendly `ref` replacement. Its value will be preserved after server-side rendering (during client-side hydration).
 
-#### Rendering Rich Text
+## Rendering Rich Text
 
 You can easily render rich text by using the `renderRichText` function that comes with `@storyblok/nuxt` and a Vue computed property:
 
@@ -320,7 +314,7 @@ You can also set a **custom Schema and component resolver** by passing the optio
 </script>
 ```
 
-### 3. Working with preview and/or production environments
+## 3. Working with preview and/or production environments
 
 Remember that the bridge only works using `version: 'draft'` and the _Preview Access Token_.
 
@@ -331,25 +325,62 @@ For the production site, NOT used as a preview for content editors, `version: 'p
 
 Check the official docs on how to [access different content versions](https://www.storyblok.com/docs/guide/essentials/accessing-data#content-versions).
 
-### API
+The recommended way to handle different content versions with Nuxt is by using environment variables in combination with [Nuxt runtime config](https://nuxt.com/docs/guide/going-further/runtime-config) to expose configuration and secrets within your application
+
+In your `nuxt.config.ts`:
+
+```ts
+export default defineNuxtConfig({
+  runtimeConfig: {
+    public: {
+      storyblokVersion: process.env.STORYBLOK_VERSION || "published"
+    }
+  }
+});
+```
+
+Then you can access the runtime config in your components:
+
+```ts
+const config = useRuntimeConfig();
+
+const story = await useAsyncStoryblok(
+  "blog",
+  {
+    version: config.public.storyblokVersion,
+    resolve_relations: "overview.featured_story"
+  },
+  { resolveRelations: "overview.featured_story" }
+);
+
+//or
 
-#### useAsyncStoryblok(slug, apiOptions, bridgeOptions)
+const { data: articles } = await storyblokApi.get("cdn/stories", {
+  version: config.public.storyblokVersion,
+  starts_with: "blog",
+  is_startpage: false
+});
+```
+
+## API
+
+### useAsyncStoryblok(slug, apiOptions, bridgeOptions)
 
 (Recommended Option) Uses [`useState`](https://v3.nuxtjs.org/api/composables/use-state) under the hood to help with SSR compatibility.
 
 Check the available [apiOptions](https://www.storyblok.com/docs/api/content-delivery/v2#core-resources/stories/retrieve-one-story?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-nuxt) (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).
 
-#### useStoryblok(slug, apiOptions, bridgeOptions)
+### useStoryblok(slug, apiOptions, bridgeOptions)
 
 It could be helpful to use `useStoryblok` instead of `useAsyncStoryblok` when we need to make full client-side requests, for example, getting personalized data for a logged user.
 
 Check the available [apiOptions](https://www.storyblok.com/docs/api/content-delivery/v2#core-resources/stories/retrieve-one-story?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-nuxt) (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()
+### useStoryblokApi()
 
 Returns the instance of the `storyblok-js-client`.
 
-#### useStoryblokBridge(storyId, callback, bridgeOptions)
+### 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.
 
@@ -357,22 +388,20 @@ Use this one-line function to cover the most common use case: updating the story
 
 ![A visual representation of the Storyblok JavaScript SDK Ecosystem](https://a.storyblok.com/f/88751/2400x1350/be4a4a4180/sdk-ecosystem.png/m/1200x0)
 
-## 🔗 Related Links
-
-- **[Live Demo on Stackblitz](https://stackblitz.com/edit/nuxt-3-sdk-demo?file=pages%2Findex.vue&terminal=dev)**
-- **[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;
-- **[Storyblok & Nuxt.js on GitHub](https://github.com/search?q=org%3Astoryblok+topic%3Anuxt)**: Check all of our Nuxt.js open source repos;
-- **[Storyblok CLI](https://github.com/storyblok/storyblok)**: A simple CLI for scaffolding Storyblok projects and fieldtypes.
+## Further Resources
 
-## ℹ️ More Resources
+- [Quick Start](https://www.storyblok.com/technologies?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-nuxt)
+- [API Documentation](https://www.storyblok.com/docs/api?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-nuxt)
+- [Developer Tutorials](https://www.storyblok.com/tutorials?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-nuxt)
+- [Developer Guides](https://www.storyblok.com/docs/guide/introduction?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-nuxt)
+- [FAQs](https://www.storyblok.com/faqs?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-nuxt)
 
-### Support
+## Support
 
 - Bugs or Feature Requests? [Submit an issue](/../../issues/new);
-
 - Do you have questions about Storyblok or you need help? [Join our Discord Community](https://discord.gg/jKrbAMz).
 
-### Contributing
+## Contributing
 
 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.

package/dist/module.d.mts

@@ -9,6 +9,6 @@ interface ModuleOptions {
     apiOptions: any;
     componentsDir: string;
 }
-declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 
 export { type ModuleOptions, _default as default };

package/dist/module.d.ts

@@ -9,6 +9,6 @@ interface ModuleOptions {
     apiOptions: any;
     componentsDir: string;
 }
-declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 
 export { type ModuleOptions, _default as default };

package/dist/module.json

@@ -1,5 +1,9 @@
 {
   "name": "@storyblok/nuxt",
   "configKey": "storyblok",
-  "version": "6.0.10"
+  "version": "6.0.11",
+  "builder": {
+    "@nuxt/module-builder": "0.8.3",
+    "unbuild": "2.0.0"
+  }
 }

package/dist/runtime/composables/useAsyncStoryblok.d.ts

@@ -1,2 +1,4 @@
-import type { ISbStoriesParams, StoryblokBridgeConfigV2 } from '@storyblok/vue';
-export declare const useAsyncStoryblok: (url: string, apiOptions?: ISbStoriesParams, bridgeOptions?: StoryblokBridgeConfigV2) => Promise<any>;
+import type { ISbStoriesParams, StoryblokBridgeConfigV2, ISbStoryData } from '@storyblok/vue';
+export declare const useAsyncStoryblok: (url: string, apiOptions?: ISbStoriesParams, bridgeOptions?: StoryblokBridgeConfigV2) => Promise<import("vue").Ref<ISbStoryData<import("storyblok-js-client").ISbComponentType<string> & {
+    [index: string]: any;
+}>>>;

package/dist/runtime/plugin.d.ts

@@ -1,2 +1,2 @@
-declare const _default: any;
+declare const _default: import("#app").Plugin<Record<string, unknown>> & import("#app").ObjectPlugin<Record<string, unknown>>;
 export default _default;

package/dist/types.d.mts

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

package/dist/types.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storyblok/nuxt",
-  "version": "6.0.10",
+  "version": "6.0.11",
   "description": "Storyblok Nuxt module",
   "type": "module",
   "main": "./dist/module.cjs",
@@ -16,13 +16,13 @@
     "dist"
   ],
   "scripts": {
-    "prepack": "nuxt-module-build",
-    "build": "nuxt-module-build",
+    "prepack": "nuxt-module-build build",
+    "build": "nuxt-module-build build",
     "dev": "nuxi dev playground",
     "dev:build": "nuxi build playground",
     "dev:preview": "nuxi preview playground",
     "prepare:playground": "nuxi prepare playground",
-    "dev:prepare": "nuxt-module-build --stub && nuxi prepare playground",
+    "dev:prepare": "nuxt-module-build build --stub && nuxi prepare playground",
     "prepare": "husky install",
     "cy:open": "cypress open",
     "cy:run": "cypress run",
@@ -36,21 +36,21 @@
     "@commitlint/cli": "^19.0.3",
     "@commitlint/config-conventional": "^19.0.3",
     "@cypress/vite-dev-server": "^5.0.6",
-    "@nuxt/eslint-config": "^0.3.6",
-    "@nuxt/kit": "^3.8.0",
-    "@nuxt/module-builder": "^0.5.2",
-    "@nuxt/schema": "^3.8.0",
-    "@nuxt/test-utils": "^3.8.0",
+    "@nuxt/eslint-config": "^0.5.2",
+    "@nuxt/kit": "^3.13.0",
+    "@nuxt/module-builder": "^0.8.3",
+    "@nuxt/schema": "^3.13.0",
+    "@nuxt/test-utils": "^3.14.1",
     "@nuxtjs/eslint-config-typescript": "latest",
     "@types/node": "^20.8.10",
     "cypress": "^13.4.0",
     "eslint": "^8.52.0",
     "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-cypress": "^2.15.1",
+    "eslint-plugin-cypress": "^3.0.0",
     "eslint-plugin-vue": "^9.18.1",
     "husky": "^9.0.6",
     "lint-staged": "^15.0.2",
-    "nuxt": "^3.8.0",
+    "nuxt": "^3.13.0",
     "prettier": "^3.0.3",
     "start-server-and-test": "^2.0.1"
   },