@storyblok/nuxt 4.0.0 → 4.1.1

package/README.md

@@ -46,13 +46,13 @@ npm install @storyblok/nuxt
 # yarn add @storyblok/nuxt
 ```
 
-Add following code to buildModules section of `nuxt.config.js` and replace the accessToken with API token from Storyblok space.
+Add following code to modules section of `nuxt.config.js` and replace the accessToken with API token from Storyblok space.
 
 ```js
 import { defineNuxtConfig } from "nuxt";
 
 export default defineNuxtConfig({
-  buildModules: [
+  modules: [
     ["@storyblok/nuxt", { accessToken: "<your-access-token>" }]
     // ...
   ]
@@ -65,7 +65,7 @@ You can also use the `storyblok` config if you prefer:
 import { defineNuxtConfig } from "nuxt";
 
 export default defineNuxtConfig({
-  buildModules: ["@storyblok/nuxt"],
+  modules: ["@storyblok/nuxt"],
   storyblok: {
     accessToken: "<your-access-token>"
   }
@@ -102,7 +102,7 @@ To link your Vue components to their equivalent you created in Storyblok:
 <div v-editable="blok" / >
 ```
 
-- Finally, use `<StoryblokComponent>` which available globally in the Nuxt app:
+- Finally, use `<StoryblokComponent>` which is available globally in the Nuxt app:
 
 ```html
 <StoryblokComponent :blok="blok" />
@@ -114,7 +114,7 @@ To link your Vue components to their equivalent you created in Storyblok:
 
 #### Composition API
 
-The simplest way is by using the `useStoryblok` one-liner composable (it's autoimported):
+The simplest way is by using the `useStoryblok` 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`):
 
 ```html
 <script setup>
@@ -147,6 +147,20 @@ Which is the short-hand equivalent to using `useStoryblokApi` and `useStoryblokB
 </template>
 ```
 
+#### Rendering Rich Text
+
+You can easily render rich text by using the `renderRichText` function that comes with `@storyblok/nuxt` and a Vue computed property:
+
+```html
+<template>
+  <div v-html="articleContent"></div>
+</template>
+
+<script setup>
+  const articleContent = computed(() => renderRichText(blok.articleContent));
+</script>
+```
+
 ### API
 
 #### useStoryblok(slug, apiOptions, bridgeOptions)

package/dist/module.cjs

@@ -0,0 +1,5 @@
+module.exports = function(...args) {
+  return import('./module.mjs').then(m => m.default.call(this, ...args))
+}
+const _meta = module.exports.meta = require('./module.json')
+module.exports.getMeta = () => Promise.resolve(_meta)

package/dist/module.d.ts

@@ -0,0 +1,42 @@
+import { resolve } from 'path';
+import { fileURLToPath } from 'url';
+import { defineNuxtModule, addComponentsDir, addPlugin, addAutoImport } from '@nuxt/kit';
+
+// -- Unbuild CommonJS Shims --
+import __cjs_url__ from 'url';
+import __cjs_path__ from 'path';
+import __cjs_mod__ from 'module';
+const __filename = __cjs_url__.fileURLToPath(import.meta.url);
+const __dirname = __cjs_path__.dirname(__filename);
+const require = __cjs_mod__.createRequire(import.meta.url);
+
+
+var module = defineNuxtModule({
+  meta: {
+    name: "@storyblok/nuxt-beta",
+    configKey: "storyblok"
+  },
+  defaults: {},
+  setup(options, nuxt) {
+    const axiosIndex = nuxt.options.build.transpile.indexOf("axios");
+    if (axiosIndex !== -1) {
+      nuxt.options.build.transpile.splice(axiosIndex, 1);
+    }
+    nuxt.options.vite.optimizeDeps.include = nuxt.options.vite.optimizeDeps.include || [];
+    nuxt.options.vite.optimizeDeps.include.push("axios");
+    addComponentsDir({ path: "~/storyblok", global: true, pathPrefix: false });
+    const runtimeDir = fileURLToPath(new URL("./runtime", import.meta.url));
+    nuxt.options.build.transpile.push(runtimeDir);
+    nuxt.options.runtimeConfig.public.storyblok = options;
+    addPlugin(resolve(__dirname, "runtime", `./plugin`));
+    const names = [
+      "useStoryblok",
+      "useStoryblokApi",
+      "useStoryblokBridge",
+      "renderRichText"
+    ];
+    names.forEach((name) => addAutoImport({ name, as: name, from: "@storyblok/vue" }));
+  }
+});
+
+export { module as default };

package/dist/module.json

@@ -0,0 +1,5 @@
+{
+  "name": "@storyblok/nuxt-beta",
+  "configKey": "storyblok",
+  "version": "0.0.1"
+}

package/dist/module.mjs

@@ -0,0 +1,42 @@
+import { resolve } from 'path';
+import { fileURLToPath } from 'url';
+import { defineNuxtModule, addComponentsDir, addPlugin, addAutoImport } from '@nuxt/kit';
+
+// -- Unbuild CommonJS Shims --
+import __cjs_url__ from 'url';
+import __cjs_path__ from 'path';
+import __cjs_mod__ from 'module';
+const __filename = __cjs_url__.fileURLToPath(import.meta.url);
+const __dirname = __cjs_path__.dirname(__filename);
+const require = __cjs_mod__.createRequire(import.meta.url);
+
+
+const module = defineNuxtModule({
+  meta: {
+    name: "@storyblok/nuxt-beta",
+    configKey: "storyblok"
+  },
+  defaults: {},
+  setup(options, nuxt) {
+    const axiosIndex = nuxt.options.build.transpile.indexOf("axios");
+    if (axiosIndex !== -1) {
+      nuxt.options.build.transpile.splice(axiosIndex, 1);
+    }
+    nuxt.options.vite.optimizeDeps.include = nuxt.options.vite.optimizeDeps.include || [];
+    nuxt.options.vite.optimizeDeps.include.push("axios");
+    addComponentsDir({ path: "~/storyblok", global: true, pathPrefix: false });
+    const runtimeDir = fileURLToPath(new URL("./runtime", import.meta.url));
+    nuxt.options.build.transpile.push(runtimeDir);
+    nuxt.options.runtimeConfig.public.storyblok = options;
+    addPlugin(resolve(__dirname, "runtime", `./plugin`));
+    const names = [
+      "useStoryblok",
+      "useStoryblokApi",
+      "useStoryblokBridge",
+      "renderRichText"
+    ];
+    names.forEach((name) => addAutoImport({ name, as: name, from: "@storyblok/vue" }));
+  }
+});
+
+export { module as default };

package/dist/runtime/plugin.d.ts

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

package/dist/runtime/plugin.mjs

@@ -0,0 +1,7 @@
+import { StoryblokVue, apiPlugin } from "@storyblok/vue";
+import { defineNuxtPlugin, useRuntimeConfig } from "#app";
+
+export default defineNuxtPlugin(({ vueApp }) => {
+  const { storyblok } = useRuntimeConfig();
+  vueApp.use(StoryblokVue, { ...storyblok, use: [apiPlugin] });
+});

package/dist/types.d.ts

@@ -0,0 +1,6 @@
+
+import {  } from './module'
+
+
+
+export { default } from './module'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storyblok/nuxt",
-  "version": "4.0.0",
+  "version": "4.1.1",
   "description": "Storyblok Nuxt.js module",
   "main": "./src/module.js",
   "module": "./src/module.js",
@@ -11,7 +11,8 @@
     }
   },
   "files": [
-    "src"
+    "src",
+    "dist"
   ],
   "repository": "https://github.com/storyblok/storyblok-nuxt",
   "scripts": {
@@ -27,12 +28,12 @@
   },
   "dependencies": {
     "@nuxt/kit": "^3.0.0-rc.2",
-    "@storyblok/vue": "^6.0.3"
+    "@storyblok/vue": "^6.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.15.0",
     "@nuxt/module-builder": "latest",
-    "babel-jest": "^26.6.3",
+    "babel-jest": "^28.1.3",
     "cypress": "^8.3.0",
     "eslint-plugin-cypress": "^2.12.1",
     "jest": "^26.6.3",

package/src/module.js

@@ -36,7 +36,12 @@ export default defineNuxtModule({
     addPlugin(resolve(__dirname, "runtime", `./plugin`));
 
     // Autoimports
-    const names = ["useStoryblok", "useStoryblokApi", "useStoryblokBridge"];
+    const names = [
+      "useStoryblok",
+      "useStoryblokApi",
+      "useStoryblokBridge",
+      "renderRichText"
+    ];
     names.forEach((name) =>
       addAutoImport({ name, as: name, from: "@storyblok/vue" })
     );