@storyblok/nuxt 5.6.5 → 5.6.6
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 +12 -4
- package/dist/module.json +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -33,8 +33,10 @@ If you are in a hurry, check out our official **[live demo](https://stackblitz.c
|
|
|
33
33
|
|
|
34
34
|
## 🚀 Usage
|
|
35
35
|
|
|
36
|
-
|
|
36
|
+
> **Note**
|
|
37
|
+
> This module is for Nuxt 3. [Check out `@storyblok/nuxt-2` for Nuxt 2](https://github.com/storyblok/storyblok-nuxt-2).
|
|
37
38
|
|
|
39
|
+
> **Important**
|
|
38
40
|
> 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.
|
|
39
41
|
|
|
40
42
|
### Installation
|
|
@@ -72,12 +74,14 @@ export default defineNuxtConfig({
|
|
|
72
74
|
});
|
|
73
75
|
```
|
|
74
76
|
|
|
75
|
-
>
|
|
77
|
+
> **Warning**
|
|
78
|
+
> 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).
|
|
76
79
|
|
|
77
80
|
#### Options
|
|
78
81
|
|
|
79
82
|
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).
|
|
80
83
|
|
|
84
|
+
> **Note**
|
|
81
85
|
> 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
86
|
|
|
83
87
|
```js
|
|
@@ -154,7 +158,8 @@ Full example for a space created in the US:
|
|
|
154
158
|
}]
|
|
155
159
|
```
|
|
156
160
|
|
|
157
|
-
>
|
|
161
|
+
> **Important**
|
|
162
|
+
> For spaces created in the United States or China, the `region` parameter **must** be specified.
|
|
158
163
|
|
|
159
164
|
### Getting started
|
|
160
165
|
|
|
@@ -166,6 +171,7 @@ To link your Vue components to the equivalent one in your Storyblok space:
|
|
|
166
171
|
|
|
167
172
|
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)).
|
|
168
173
|
|
|
174
|
+
> **Warning**
|
|
169
175
|
> 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.
|
|
170
176
|
|
|
171
177
|
- For each component, use the `v-editable` directive on its root element, passing the `blok` property that they receive:
|
|
@@ -190,6 +196,7 @@ The simplest way is by using the `useAsyncStoryblok` one-liner composable (it's
|
|
|
190
196
|
|
|
191
197
|
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) in our API docs 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.
|
|
192
198
|
|
|
199
|
+
> **Note**
|
|
193
200
|
> 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)
|
|
194
201
|
|
|
195
202
|
```html
|
|
@@ -242,7 +249,7 @@ Which is the short-hand equivalent to using `useStoryblokApi` inside `useState`
|
|
|
242
249
|
</template>
|
|
243
250
|
```
|
|
244
251
|
|
|
245
|
-
> `useState` is an SSR-friendly `ref` replacement. Its value will be preserved after server-side rendering (during client-side hydration).
|
|
252
|
+
> The `useState` is an SSR-friendly `ref` replacement. Its value will be preserved after server-side rendering (during client-side hydration).
|
|
246
253
|
|
|
247
254
|
#### Rendering Rich Text
|
|
248
255
|
|
|
@@ -295,6 +302,7 @@ Remember that the bridge only works using `version: 'draft'` and the _Preview Ac
|
|
|
295
302
|
|
|
296
303
|
For the production site, NOT used as a preview for content editors, `version: 'published'` and _Public Access Token_ should be used.
|
|
297
304
|
|
|
305
|
+
> **Note**
|
|
298
306
|
> 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>)`.
|
|
299
307
|
|
|
300
308
|
Check the official docs on how to [access different content versions](https://www.storyblok.com/docs/guide/essentials/accessing-data#content-versions).
|
package/dist/module.json
CHANGED