@storyblok/nuxt 5.3.3 → 5.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +32 -3
- package/dist/module.d.ts +1 -0
- package/dist/module.mjs +14 -0
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -77,8 +77,7 @@ export default defineNuxtConfig({
|
|
|
77
77
|
#### Options
|
|
78
78
|
|
|
79
79
|
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).
|
|
80
|
-
|
|
81
|
-
> Note: For spaces created in the United States, you have to set the `region` parameter accordingly `{ apiOptions: { region: 'us' } }`.
|
|
80
|
+
If you want to use Storyblok inside `nuxt-devtools` you can use the option `devtools`, if enabled, make sure to have installed the @nuxt/devtools module and enable it on your nuxt config.
|
|
82
81
|
|
|
83
82
|
```js
|
|
84
83
|
// Defaults
|
|
@@ -86,11 +85,35 @@ When you initialize the module, you can pass all [_@storyblok/vue_ options](http
|
|
|
86
85
|
{
|
|
87
86
|
accessToken: "<your-access-token>",
|
|
88
87
|
bridge: true,
|
|
88
|
+
devtools: true,
|
|
89
89
|
apiOptions: {}, // storyblok-js-client options
|
|
90
90
|
}
|
|
91
91
|
}]
|
|
92
92
|
```
|
|
93
93
|
|
|
94
|
+
#### Region parameter
|
|
95
|
+
|
|
96
|
+
Possible values:
|
|
97
|
+
|
|
98
|
+
- `eu` (default): For spaces created in the EU
|
|
99
|
+
- `us`: For spaces created in the US
|
|
100
|
+
- `cn`: For spaces created in China
|
|
101
|
+
|
|
102
|
+
Full example for a space created in the US:
|
|
103
|
+
|
|
104
|
+
```js
|
|
105
|
+
["@storyblok/nuxt", {
|
|
106
|
+
{
|
|
107
|
+
accessToken: "<your-access-token>",
|
|
108
|
+
apiOptions: {
|
|
109
|
+
region: "us"
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
}]
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
> Note: For spaces created in the United States or China, the `region` parameter **must** be specified.
|
|
116
|
+
|
|
94
117
|
### Getting started
|
|
95
118
|
|
|
96
119
|
### 1. Creating and linking your components to Storyblok Visual Editor
|
|
@@ -172,7 +195,9 @@ You can easily render rich text by using the `renderRichText` function that come
|
|
|
172
195
|
|
|
173
196
|
<script setup>
|
|
174
197
|
const props = defineProps({ blok: Object });
|
|
175
|
-
const articleContent = computed(() =>
|
|
198
|
+
const articleContent = computed(() =>
|
|
199
|
+
renderRichText(props.blok.articleContent)
|
|
200
|
+
);
|
|
176
201
|
</script>
|
|
177
202
|
```
|
|
178
203
|
|
|
@@ -236,6 +261,10 @@ Returns the instance of the `storyblok-js-client`.
|
|
|
236
261
|
|
|
237
262
|
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.
|
|
238
263
|
|
|
264
|
+
## The Storyblok JavaScript SDK Ecosystem
|
|
265
|
+
|
|
266
|
+
|
|
267
|
+
|
|
239
268
|
## 🔗 Related Links
|
|
240
269
|
|
|
241
270
|
- **[Live Demo on Stackblitz](https://stackblitz.com/edit/nuxt-3-sdk-demo?file=pages%2Findex.vue&terminal=dev)**
|
package/dist/module.d.ts
CHANGED
package/dist/module.mjs
CHANGED
|
@@ -9,6 +9,7 @@ const module = defineNuxtModule({
|
|
|
9
9
|
accessToken: "",
|
|
10
10
|
usePlugin: true,
|
|
11
11
|
bridge: true,
|
|
12
|
+
devtools: false,
|
|
12
13
|
apiOptions: {}
|
|
13
14
|
},
|
|
14
15
|
setup(options, nuxt) {
|
|
@@ -35,6 +36,19 @@ const module = defineNuxtModule({
|
|
|
35
36
|
addImports({ name, as: name, from: "@storyblok/vue" });
|
|
36
37
|
}
|
|
37
38
|
addImportsDir(resolver.resolve("./runtime/composables"));
|
|
39
|
+
if (options.devtools) {
|
|
40
|
+
nuxt.hook("devtools:customTabs", (iframeTabs) => {
|
|
41
|
+
iframeTabs.push({
|
|
42
|
+
name: "storyblok",
|
|
43
|
+
title: "Storyblok",
|
|
44
|
+
icon: "i-logos-storyblok-icon",
|
|
45
|
+
view: {
|
|
46
|
+
type: "iframe",
|
|
47
|
+
src: "https://app.storyblok.com/#!/me/spaces/"
|
|
48
|
+
}
|
|
49
|
+
});
|
|
50
|
+
});
|
|
51
|
+
}
|
|
38
52
|
}
|
|
39
53
|
});
|
|
40
54
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@storyblok/nuxt",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.4.0",
|
|
4
4
|
"description": "Storyblok Nuxt module",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"exports": {
|
|
@@ -28,15 +28,15 @@
|
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
30
|
"@nuxt/kit": "^3.3.2",
|
|
31
|
-
"@storyblok/vue": "^7.1.
|
|
31
|
+
"@storyblok/vue": "^7.1.3"
|
|
32
32
|
},
|
|
33
33
|
"devDependencies": {
|
|
34
|
-
"@babel/core": "^7.21.
|
|
34
|
+
"@babel/core": "^7.21.4",
|
|
35
35
|
"@cypress/vite-dev-server": "^5.0.5",
|
|
36
36
|
"@nuxt/module-builder": "latest",
|
|
37
37
|
"babel-jest": "^29.4.3",
|
|
38
|
-
"cypress": "^12.
|
|
39
|
-
"eslint-plugin-cypress": "^2.
|
|
38
|
+
"cypress": "^12.9.0",
|
|
39
|
+
"eslint-plugin-cypress": "^2.13.2",
|
|
40
40
|
"jest": "^29.4.3",
|
|
41
41
|
"start-server-and-test": "^2.0.0",
|
|
42
42
|
"vite": "^4.2.1"
|