vue-datocms 2.0.0-0 → 3.0.0-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 +30 -627
- package/dist/index.cjs.js +890 -0
- package/dist/index.d.ts +179 -11
- package/dist/index.esm.mjs +860 -0
- package/package.json +31 -21
- package/dist/index.esm.js +0 -435
- package/dist/index.min.js +0 -422
- package/dist/index.umd.js +0 -422
package/README.md
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
# vue-datocms
|
|
2
2
|
|
|
3
|
-
   [](https://github.com/datocms/vue-datocms/actions/workflows/node.js.yml)
|
|
4
4
|
|
|
5
5
|
A set of components and utilities to work faster with [DatoCMS](https://www.datocms.com/) in Vue.js environments. Integrates seamlessy with [DatoCMS's GraphQL Content Delivery API](https://www.datocms.com/docs/content-delivery-api).
|
|
6
6
|
|
|
7
|
-
- Works with
|
|
7
|
+
- Works with Vue 3 and Vue 2;
|
|
8
8
|
- TypeScript ready;
|
|
9
9
|
- Compatible with any data-fetching library (axios, Apollo);
|
|
10
10
|
- Usable both client and server side;
|
|
11
|
-
- Compatible with vanilla Vue
|
|
11
|
+
- Compatible with vanilla Vue and pretty much any other Vue-based solution.
|
|
12
12
|
|
|
13
13
|
<br /><br />
|
|
14
14
|
<a href="https://www.datocms.com/">
|
|
@@ -18,647 +18,50 @@ A set of components and utilities to work faster with [DatoCMS](https://www.dato
|
|
|
18
18
|
|
|
19
19
|
## Table of Contents
|
|
20
20
|
|
|
21
|
-
|
|
22
|
-
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
|
|
23
|
-
|
|
24
|
-
- [Demos](#demos)
|
|
21
|
+
- [Features](#features)
|
|
25
22
|
- [Installation](#installation)
|
|
26
|
-
- [
|
|
27
|
-
- [Progressive/responsive image](#progressiveresponsive-image)
|
|
28
|
-
- [Out-of-the-box features](#out-of-the-box-features)
|
|
29
|
-
- [Setup](#setup)
|
|
30
|
-
- [Usage](#usage)
|
|
31
|
-
- [Example](#example)
|
|
32
|
-
- [Props](#props)
|
|
33
|
-
- [The `ResponsiveImage` object](#the-responsiveimage-object)
|
|
34
|
-
- [Social share, SEO and Favicon meta tags](#social-share-seo-and-favicon-meta-tags)
|
|
35
|
-
- [Usage](#usage-1)
|
|
36
|
-
- [Example](#example-1)
|
|
37
|
-
- [Structured text](#structured-text)
|
|
38
|
-
- [Setup](#setup-1)
|
|
39
|
-
- [Basic usage](#basic-usage)
|
|
40
|
-
- [Custom renderers](#custom-renderers)
|
|
41
|
-
- [Props](#props-1)
|
|
42
|
-
|
|
43
|
-
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
|
|
44
|
-
|
|
45
|
-
## Demos
|
|
46
|
-
|
|
47
|
-
- Pure Vue: [https://vue-datocms-example.netlify.com/](https://vue-datocms-example.netlify.com/)
|
|
48
|
-
- Server side rendering with Nuxt.js: [https://vue-datocms-components.now.sh](https://vue-datocms-components.now.sh)
|
|
49
|
-
|
|
50
|
-
## Installation
|
|
51
|
-
|
|
52
|
-
```
|
|
53
|
-
npm install vue-datocms
|
|
54
|
-
```
|
|
55
|
-
|
|
56
|
-
In Vue 2, also install `@vue/composition-api` as a dependency. Everything else should be similar to the example above for Vue 3. Please note that with Vue 2 support is limited to JS-only projects. TypeScript + Vue 2 is not supported at the moment, sorry.
|
|
57
|
-
|
|
58
|
-
## Live real-time updates
|
|
59
|
-
|
|
60
|
-
Thanks to the `subscribeToQuery` helper provided by the [datocms-listen](https://www.npmjs.com/package/datocms-listen) package you can get real-time updates for the page when the content changes. This helper connects to the DatoCMS's [Real-time Updates API](https://www.datocms.com/docs/real-time-updates-api/api-reference) to receive the updated query results in real-time, and is able to reconnect in case of network failures.
|
|
61
|
-
|
|
62
|
-
Live updates are great both to get instant previews of your content while editing it inside DatoCMS, or to offer real-time updates of content to your visitors (ie. news site).
|
|
63
|
-
|
|
64
|
-
### Reference
|
|
65
|
-
|
|
66
|
-
`subscribeToQuery` provides a way to create a subscription to DatoCMS's [Real-time Updates API](https://www.datocms.com/docs/real-time-updates-api/api-reference).
|
|
67
|
-
|
|
68
|
-
Please consult the [datocms-listen package documentation](https://www.npmjs.com/package/datocms-listen) to learn more about how to configure `subscribeToQuery`.
|
|
69
|
-
|
|
70
|
-
In Vue.js v2, the subscription can be created inside of the [`mounted`](https://vuejs.org/v2/api/#mounted) lifecycle method. Please refer to the [query-subscription example](./examples/query-subscription/src/App.vue#L47) for a sample implementation.
|
|
71
|
-
|
|
72
|
-
In Vue.js v3, `subscribeToQuery` can be used to implement a custom hook. Please take a look at the [React.js one](https://github.com/datocms/react-datocms/blob/master/src/useQuerySubscription/index.ts) for a sample implementation.
|
|
73
|
-
|
|
74
|
-
## Progressive/responsive image
|
|
75
|
-
|
|
76
|
-
`<datocms-image>` is a Vue component specially designed to work seamlessly with DatoCMS’s [`responsiveImage` GraphQL query](https://www.datocms.com/docs/content-delivery-api/uploads#responsive-images) that optimizes image loading for your sites.
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
### Out-of-the-box features
|
|
81
|
-
|
|
82
|
-
- Offers WebP version of images for browsers that support the format
|
|
83
|
-
- Generates multiple smaller images so smartphones and tablets don’t download desktop-sized images
|
|
84
|
-
- Efficiently lazy loads images to speed initial page load and save bandwidth
|
|
85
|
-
- Holds the image position so your page doesn’t jump while images load
|
|
86
|
-
- Uses either blur-up or background color techniques to show a preview of the image while it loads
|
|
87
|
-
|
|
88
|
-
## Intersection Observer
|
|
89
|
-
|
|
90
|
-
Intersection Observer is the API used to determine if the image is inside the viewport or not. [Browser support is really good](https://caniuse.com/intersectionobserver) - With Safari adding support in 12.1, all major browsers now support Intersection Observers natively.
|
|
91
|
-
|
|
92
|
-
If the IntersectionObserver object is not available, the component treats the image as it's always visible in the viewport. Feel free to add a [polyfill](https://www.npmjs.com/package/intersection-observer) so that it will also 100% work on older versions of iOS and IE11.
|
|
93
|
-
|
|
94
|
-
### Setup
|
|
95
|
-
|
|
96
|
-
You can register the component globally so it's available in all your apps:
|
|
97
|
-
|
|
98
|
-
```js
|
|
99
|
-
import Vue from 'vue';
|
|
100
|
-
import { DatocmsImagePlugin } from 'vue-datocms';
|
|
101
|
-
|
|
102
|
-
Vue.use(DatocmsImagePlugin);
|
|
103
|
-
```
|
|
104
|
-
|
|
105
|
-
Or use it locally in any of your components:
|
|
106
|
-
|
|
107
|
-
```js
|
|
108
|
-
import { Image } from 'vue-datocms';
|
|
109
|
-
|
|
110
|
-
export default {
|
|
111
|
-
components: {
|
|
112
|
-
'datocms-image': Image,
|
|
113
|
-
},
|
|
114
|
-
};
|
|
115
|
-
```
|
|
116
|
-
|
|
117
|
-
### Usage
|
|
118
|
-
|
|
119
|
-
1. Use `<datocms-image>` it in place of the regular `<img />` tag
|
|
120
|
-
2. Write a GraphQL query to your DatoCMS project using the [`responsiveImage` query](https://www.datocms.com/docs/content-delivery-api/images-and-videos#responsive-images)
|
|
121
|
-
|
|
122
|
-
The GraphQL query returns multiple thumbnails with optimized compression. The `<datocms-image>` component automatically sets up the "blur-up" effect as well as lazy loading of images further down the screen.
|
|
123
|
-
|
|
124
|
-
### Example
|
|
125
|
-
|
|
126
|
-
For a fully working example take a look at our [examples directory](https://github.com/datocms/vue-datocms/tree/master/examples).
|
|
127
|
-
|
|
128
|
-
```vue
|
|
129
|
-
<template>
|
|
130
|
-
<article>
|
|
131
|
-
<div v-if="data">
|
|
132
|
-
<h1>{{ data.blogPost.title }}</h1>
|
|
133
|
-
<datocms-image :data="data.blogPost.cover.responsiveImage" />
|
|
134
|
-
</div>
|
|
135
|
-
</article>
|
|
136
|
-
</template>
|
|
137
|
-
|
|
138
|
-
<script>
|
|
139
|
-
import { request } from './lib/datocms';
|
|
140
|
-
import { Image } from 'vue-datocms';
|
|
141
|
-
|
|
142
|
-
const query = gql`
|
|
143
|
-
query {
|
|
144
|
-
blogPost {
|
|
145
|
-
title
|
|
146
|
-
cover {
|
|
147
|
-
responsiveImage(
|
|
148
|
-
imgixParams: { fit: crop, w: 300, h: 300, auto: format }
|
|
149
|
-
) {
|
|
150
|
-
# HTML5 src/srcset/sizes attributes
|
|
151
|
-
srcSet
|
|
152
|
-
webpSrcSet
|
|
153
|
-
sizes
|
|
154
|
-
src
|
|
155
|
-
|
|
156
|
-
# size information (post-transformations)
|
|
157
|
-
width
|
|
158
|
-
height
|
|
159
|
-
aspectRatio
|
|
160
|
-
|
|
161
|
-
# SEO attributes
|
|
162
|
-
alt
|
|
163
|
-
title
|
|
23
|
+
- [Development](#development)
|
|
164
24
|
|
|
165
|
-
|
|
166
|
-
bgColor
|
|
25
|
+
## Features
|
|
167
26
|
|
|
168
|
-
|
|
169
|
-
base64
|
|
170
|
-
}
|
|
171
|
-
}
|
|
172
|
-
}
|
|
173
|
-
}
|
|
174
|
-
`;
|
|
27
|
+
`vue-datocms` contains Vue components ready to use, helpers functions and usage examples.
|
|
175
28
|
|
|
176
|
-
|
|
177
|
-
components: {
|
|
178
|
-
'datocms-image': Image,
|
|
179
|
-
},
|
|
180
|
-
data() {
|
|
181
|
-
return {
|
|
182
|
-
data: null,
|
|
183
|
-
};
|
|
184
|
-
},
|
|
185
|
-
async mounted() {
|
|
186
|
-
this.data = await request({ query });
|
|
187
|
-
},
|
|
188
|
-
};
|
|
189
|
-
</script>
|
|
190
|
-
```
|
|
191
|
-
|
|
192
|
-
### Props
|
|
193
|
-
|
|
194
|
-
| prop | type | default | required | description |
|
|
195
|
-
| --------------------- | ------------------------ | ----------------- | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
196
|
-
| data | `ResponsiveImage` object | | :white_check_mark: | The actual response you get from a DatoCMS `responsiveImage` GraphQL query. |
|
|
197
|
-
| class | string | null | :x: | Additional CSS class of root node |
|
|
198
|
-
| root-style | CSS properties | null | :x: | Additional CSS rules to add to the root node |
|
|
199
|
-
| picture-class | string | null | :x: | Additional CSS class for the inner `<picture />` tag |
|
|
200
|
-
| picture-style | CSS properties | null | :x: | Additional CSS rules to add to the inner `<picture />` tag |
|
|
201
|
-
| fade-in-duration | integer | 500 | :x: | Duration (in ms) of the fade-in transition effect upoad image loading |
|
|
202
|
-
| intersection-treshold | float | 0 | :x: | Indicate at what percentage of the placeholder visibility the loading of the image should be triggered. A value of 0 means that as soon as even one pixel is visible, the callback will be run. A value of 1.0 means that the threshold isn't considered passed until every pixel is visible. |
|
|
203
|
-
| intersection-tmargin | string | "0px 0px 0px 0px" | :x: | Margin around the placeholder. Can have values similar to the CSS margin property (top, right, bottom, left). The values can be percentages. This set of values serves to grow or shrink each side of the placeholder element's bounding box before computing intersections. |
|
|
204
|
-
| lazy-load | Boolean | true | :x: | Wheter enable lazy loading or not |
|
|
205
|
-
| explicitWidth | Boolean | false | :x: | Wheter the image wrapper should explicitely declare the width of the image or keep it fluid |
|
|
206
|
-
|
|
207
|
-
#### The `ResponsiveImage` object
|
|
208
|
-
|
|
209
|
-
The `data` prop expects an object with the same shape as the one returned by `responsiveImage` GraphQL call. It's up to you to make a GraphQL query that will return the properties you need for a specific use of the `<datocms-image>` component.
|
|
210
|
-
|
|
211
|
-
- The minimum required properties for `data` are: `aspectRatio`, `width`, `sizes`, `srcSet` and `src`;
|
|
212
|
-
- `alt` and `title`, while not mandatory, are all highly suggested, so remember to use them!
|
|
213
|
-
- You either want to add the `webpSrcSet` field or specify `{ auto: format }` in your `imgixParams`, to automatically use WebP images in browsers that support the format;
|
|
214
|
-
- If you provide both the `bgColor` and `base64` property, the latter will take precedence, so just avoiding querying both fields at the same time, it will only make the response bigger :wink:
|
|
215
|
-
|
|
216
|
-
Here's a complete recap of what `responsiveImage` offers:
|
|
217
|
-
|
|
218
|
-
| property | type | required | description |
|
|
219
|
-
| ----------- | ------- | ------------------ | ----------------------------------------------------------------------------------------------- |
|
|
220
|
-
| aspectRatio | float | :white_check_mark: | The aspect ratio (width/height) of the image |
|
|
221
|
-
| width | integer | :white_check_mark: | The width of the image |
|
|
222
|
-
| sizes | string | :white_check_mark: | The HTML5 `sizes` attribute for the image |
|
|
223
|
-
| srcSet | string | :white_check_mark: | The HTML5 `srcSet` attribute for the image |
|
|
224
|
-
| src | string | :white_check_mark: | The fallback `src` attribute for the image |
|
|
225
|
-
| webpSrcSet | string | :x: | The HTML5 `srcSet` attribute for the image in WebP format, for browsers that support the format |
|
|
226
|
-
| alt | string | :x: | Alternate text (`alt`) for the image |
|
|
227
|
-
| title | string | :x: | Title attribute (`title`) for the image |
|
|
228
|
-
| bgColor | string | :x: | The background color for the image placeholder |
|
|
229
|
-
| base64 | string | :x: | A base64-encoded thumbnail to offer during image loading |
|
|
230
|
-
|
|
231
|
-
## Social share, SEO and Favicon meta tags
|
|
232
|
-
|
|
233
|
-
Just like the image component, `toHead()` is a helper specially designed to work seamlessly with DatoCMS’s [`_seoMetaTags` and `faviconMetaTags` GraphQL queries](https://www.datocms.com/docs/content-delivery-api/seo) so that you can handle proper SEO in your pages.
|
|
234
|
-
|
|
235
|
-
You can use `toHead()` inside the `metaInfo` (or `head`, in Nuxt.js) property of your components, and it will return meta tags as required by the [`vue-meta`](https://vue-meta.nuxtjs.org/guide/metainfo.html) package.
|
|
236
|
-
|
|
237
|
-
### Usage
|
|
238
|
-
|
|
239
|
-
`toHead()` takes an array of `Tag`s in the exact form they're returned by the following [DatoCMS GraphQL API](https://www.datocms.com/docs/content-delivery-api/seo) queries:
|
|
240
|
-
|
|
241
|
-
- `_seoMetaTags` query on any record, or
|
|
242
|
-
- `faviconMetaTags` on the global `_site` object.
|
|
243
|
-
|
|
244
|
-
You can pass multiple arrays of `Tag`s together and pass them to a single `toHead()` call.
|
|
245
|
-
|
|
246
|
-
### Example
|
|
247
|
-
|
|
248
|
-
For a working example take a look at our [examples directory](https://github.com/datocms/vue-datocms/tree/master/examples).
|
|
249
|
-
|
|
250
|
-
```vue
|
|
251
|
-
<template>
|
|
252
|
-
<article>
|
|
253
|
-
<h1 v-if="data">{{ data.page.title }}</h1>
|
|
254
|
-
</article>
|
|
255
|
-
</template>
|
|
256
|
-
|
|
257
|
-
<script>
|
|
258
|
-
import { request } from './lib/datocms';
|
|
259
|
-
import { toHead } from 'vue-datocms';
|
|
260
|
-
|
|
261
|
-
const query = gql`
|
|
262
|
-
query {
|
|
263
|
-
page: homepage {
|
|
264
|
-
title
|
|
265
|
-
seo: _seoMetaTags {
|
|
266
|
-
attributes
|
|
267
|
-
content
|
|
268
|
-
tag
|
|
269
|
-
}
|
|
270
|
-
}
|
|
271
|
-
|
|
272
|
-
site: _site {
|
|
273
|
-
favicon: faviconMetaTags {
|
|
274
|
-
attributes
|
|
275
|
-
content
|
|
276
|
-
tag
|
|
277
|
-
}
|
|
278
|
-
}
|
|
279
|
-
}
|
|
280
|
-
`;
|
|
281
|
-
|
|
282
|
-
export default {
|
|
283
|
-
data() {
|
|
284
|
-
return {
|
|
285
|
-
data: null,
|
|
286
|
-
};
|
|
287
|
-
},
|
|
288
|
-
async mounted() {
|
|
289
|
-
this.data = await request({ query });
|
|
290
|
-
},
|
|
291
|
-
metaInfo() {
|
|
292
|
-
if (!this || !this.data) {
|
|
293
|
-
return;
|
|
294
|
-
}
|
|
295
|
-
return toHead(this.data.page.seo, this.data.site.favicon);
|
|
296
|
-
},
|
|
297
|
-
};
|
|
298
|
-
</script>
|
|
299
|
-
```
|
|
29
|
+
[Components](https://vuejs.org/guide/essentials/component-basics.html):
|
|
300
30
|
|
|
301
|
-
|
|
31
|
+
- [`<DatocmsImage />`](src/components/Image)
|
|
32
|
+
- [`<DatocmsStructuredText />`](src/components/StructuredText)
|
|
302
33
|
|
|
303
|
-
|
|
34
|
+
[Composables](https://vuejs.org/guide/reusability/composables.html):
|
|
304
35
|
|
|
305
|
-
|
|
36
|
+
- [`useQuerySubscription`](src/composables/useQuerySubscription)
|
|
37
|
+
- [`useSiteSearch`](src/composables/useSiteSearch)
|
|
306
38
|
|
|
307
|
-
|
|
39
|
+
Helpers:
|
|
308
40
|
|
|
309
|
-
|
|
310
|
-
import Vue from 'vue';
|
|
311
|
-
import { DatocmsStructuredTextPlugin } from 'vue-datocms';
|
|
41
|
+
- [`toHead`](src/lib/toHead)
|
|
312
42
|
|
|
313
|
-
|
|
314
|
-
```
|
|
315
|
-
|
|
316
|
-
Or use it locally in any of your components:
|
|
317
|
-
|
|
318
|
-
```js
|
|
319
|
-
import { StructuredText } from 'vue-datocms';
|
|
320
|
-
|
|
321
|
-
export default {
|
|
322
|
-
components: {
|
|
323
|
-
'datocms-structured-text': StructuredText,
|
|
324
|
-
},
|
|
325
|
-
};
|
|
326
|
-
```
|
|
327
|
-
|
|
328
|
-
## Basic usage
|
|
329
|
-
|
|
330
|
-
```vue
|
|
331
|
-
<template>
|
|
332
|
-
<article>
|
|
333
|
-
<div v-if="data">
|
|
334
|
-
<h1>{{ data.blogPost.title }}</h1>
|
|
335
|
-
<datocms-structured-text :data="data.blogPost.content" />
|
|
336
|
-
<!--
|
|
337
|
-
Final result:
|
|
338
|
-
<h1>Hello <strong>world!</strong></h1>
|
|
339
|
-
-->
|
|
340
|
-
</div>
|
|
341
|
-
</article>
|
|
342
|
-
</template>
|
|
343
|
-
|
|
344
|
-
<script>
|
|
345
|
-
import { request } from './lib/datocms';
|
|
346
|
-
import { StructuredText } from 'vue-datocms';
|
|
347
|
-
|
|
348
|
-
const query = gql`
|
|
349
|
-
query {
|
|
350
|
-
blogPost {
|
|
351
|
-
title
|
|
352
|
-
content {
|
|
353
|
-
value
|
|
354
|
-
}
|
|
355
|
-
}
|
|
356
|
-
}
|
|
357
|
-
`;
|
|
43
|
+
## Installation
|
|
358
44
|
|
|
359
|
-
export default {
|
|
360
|
-
components: {
|
|
361
|
-
'datocms-structured-text': StructuredText,
|
|
362
|
-
},
|
|
363
|
-
data() {
|
|
364
|
-
return {
|
|
365
|
-
data: null,
|
|
366
|
-
};
|
|
367
|
-
},
|
|
368
|
-
async mounted() {
|
|
369
|
-
this.data = await request({ query });
|
|
370
|
-
// data.blogPost.content ->
|
|
371
|
-
// {
|
|
372
|
-
// value: {
|
|
373
|
-
// schema: "dast",
|
|
374
|
-
// document: {
|
|
375
|
-
// type: "root",
|
|
376
|
-
// children: [
|
|
377
|
-
// {
|
|
378
|
-
// type: "heading",
|
|
379
|
-
// level: 1,
|
|
380
|
-
// children: [
|
|
381
|
-
// {
|
|
382
|
-
// type: "span",
|
|
383
|
-
// value: "Hello ",
|
|
384
|
-
// },
|
|
385
|
-
// {
|
|
386
|
-
// type: "span",
|
|
387
|
-
// marks: ["strong"],
|
|
388
|
-
// value: "world!",
|
|
389
|
-
// },
|
|
390
|
-
// ],
|
|
391
|
-
// },
|
|
392
|
-
// ],
|
|
393
|
-
// },
|
|
394
|
-
// },
|
|
395
|
-
// }
|
|
396
|
-
},
|
|
397
|
-
};
|
|
398
|
-
</script>
|
|
399
45
|
```
|
|
400
|
-
|
|
401
|
-
## Custom renderers
|
|
402
|
-
|
|
403
|
-
You can also pass custom renderers for special nodes (inline records, record links and blocks) as an optional parameter like so:
|
|
404
|
-
|
|
405
|
-
```vue
|
|
406
|
-
<template>
|
|
407
|
-
<article>
|
|
408
|
-
<div v-if="data">
|
|
409
|
-
<h1>{{ data.blogPost.title }}</h1>
|
|
410
|
-
<datocms-structured-text
|
|
411
|
-
:data="data.blogPost.content"
|
|
412
|
-
:renderInlineRecord="renderInlineRecord"
|
|
413
|
-
:renderLinkToRecord="renderLinkToRecord"
|
|
414
|
-
:renderBlock="renderBlock"
|
|
415
|
-
/>
|
|
416
|
-
<!--
|
|
417
|
-
Final result:
|
|
418
|
-
|
|
419
|
-
<h1>Welcome onboard <a href="/team/mark-smith">Mark</a></h1>
|
|
420
|
-
<p>
|
|
421
|
-
So happy to have
|
|
422
|
-
<a href="/team/mark-smith">this awesome humang being</a> in our team!
|
|
423
|
-
</p>
|
|
424
|
-
<img
|
|
425
|
-
src="https://www.datocms-assets.com/205/1597757278-austin-distel-wd1lrb9oeeo-unsplash.jpg"
|
|
426
|
-
alt="Our team at work"
|
|
427
|
-
/>
|
|
428
|
-
-->
|
|
429
|
-
</div>
|
|
430
|
-
</article>
|
|
431
|
-
</template>
|
|
432
|
-
|
|
433
|
-
<script>
|
|
434
|
-
import { request } from './lib/datocms';
|
|
435
|
-
import { StructuredText, Image } from 'vue-datocms';
|
|
436
|
-
import { h } from 'vue';
|
|
437
|
-
|
|
438
|
-
const query = gql`
|
|
439
|
-
query {
|
|
440
|
-
blogPost {
|
|
441
|
-
title
|
|
442
|
-
content {
|
|
443
|
-
value
|
|
444
|
-
links {
|
|
445
|
-
__typename
|
|
446
|
-
... on TeamMemberRecord {
|
|
447
|
-
id
|
|
448
|
-
firstName
|
|
449
|
-
slug
|
|
450
|
-
}
|
|
451
|
-
}
|
|
452
|
-
blocks {
|
|
453
|
-
__typename
|
|
454
|
-
... on ImageRecord {
|
|
455
|
-
id
|
|
456
|
-
image {
|
|
457
|
-
responsiveImage(
|
|
458
|
-
imgixParams: { fit: crop, w: 300, h: 300, auto: format }
|
|
459
|
-
) {
|
|
460
|
-
srcSet
|
|
461
|
-
webpSrcSet
|
|
462
|
-
sizes
|
|
463
|
-
src
|
|
464
|
-
width
|
|
465
|
-
height
|
|
466
|
-
aspectRatio
|
|
467
|
-
alt
|
|
468
|
-
title
|
|
469
|
-
base64
|
|
470
|
-
}
|
|
471
|
-
}
|
|
472
|
-
}
|
|
473
|
-
}
|
|
474
|
-
}
|
|
475
|
-
}
|
|
476
|
-
}
|
|
477
|
-
`;
|
|
478
|
-
|
|
479
|
-
export default {
|
|
480
|
-
components: {
|
|
481
|
-
'datocms-structured-text': StructuredText,
|
|
482
|
-
'datocms-image': Image,
|
|
483
|
-
},
|
|
484
|
-
data() {
|
|
485
|
-
return {
|
|
486
|
-
data: null,
|
|
487
|
-
};
|
|
488
|
-
},
|
|
489
|
-
methods: {
|
|
490
|
-
renderInlineRecord: ({ record }) => {
|
|
491
|
-
switch (record.__typename) {
|
|
492
|
-
case 'TeamMemberRecord':
|
|
493
|
-
return h('a', { href: `/team/${record.slug}` }, record.firstName);
|
|
494
|
-
default:
|
|
495
|
-
return null;
|
|
496
|
-
}
|
|
497
|
-
},
|
|
498
|
-
renderLinkToRecord: ({ record, children, transformedMeta }) => {
|
|
499
|
-
switch (record.__typename) {
|
|
500
|
-
case 'TeamMemberRecord':
|
|
501
|
-
return h(
|
|
502
|
-
'a',
|
|
503
|
-
{ ...transformedMeta, href: `/team/${record.slug}` },
|
|
504
|
-
children,
|
|
505
|
-
);
|
|
506
|
-
default:
|
|
507
|
-
return null;
|
|
508
|
-
}
|
|
509
|
-
},
|
|
510
|
-
renderBlock: ({ record }) => {
|
|
511
|
-
switch (record.__typename) {
|
|
512
|
-
case 'ImageRecord':
|
|
513
|
-
return h('datocms-image', {
|
|
514
|
-
data: record.image.responsiveImage,
|
|
515
|
-
});
|
|
516
|
-
default:
|
|
517
|
-
return null;
|
|
518
|
-
}
|
|
519
|
-
},
|
|
520
|
-
},
|
|
521
|
-
async mounted() {
|
|
522
|
-
this.data = await request({ query });
|
|
523
|
-
// data.blogPost.content ->
|
|
524
|
-
// {
|
|
525
|
-
// value: {
|
|
526
|
-
// schema: "dast",
|
|
527
|
-
// document: {
|
|
528
|
-
// type: "root",
|
|
529
|
-
// children: [
|
|
530
|
-
// {
|
|
531
|
-
// type: "heading",
|
|
532
|
-
// level: 1,
|
|
533
|
-
// children: [
|
|
534
|
-
// { type: "span", value: "Welcome onboard " },
|
|
535
|
-
// { type: "inlineItem", item: "324321" },
|
|
536
|
-
// ],
|
|
537
|
-
// },
|
|
538
|
-
// {
|
|
539
|
-
// type: "paragraph",
|
|
540
|
-
// children: [
|
|
541
|
-
// { type: "span", value: "So happy to have " },
|
|
542
|
-
// {
|
|
543
|
-
// type: "itemLink",
|
|
544
|
-
// item: "324321",
|
|
545
|
-
// children: [
|
|
546
|
-
// {
|
|
547
|
-
// type: "span",
|
|
548
|
-
// marks: ["strong"],
|
|
549
|
-
// value: "this awesome humang being",
|
|
550
|
-
// },
|
|
551
|
-
// ]
|
|
552
|
-
// },
|
|
553
|
-
// { type: "span", value: " in our team!" },
|
|
554
|
-
// ]
|
|
555
|
-
// },
|
|
556
|
-
// { type: "block", item: "1984559" }
|
|
557
|
-
// ],
|
|
558
|
-
// },
|
|
559
|
-
// },
|
|
560
|
-
// links: [
|
|
561
|
-
// {
|
|
562
|
-
// id: "324321",
|
|
563
|
-
// __typename: "TeamMemberRecord",
|
|
564
|
-
// firstName: "Mark",
|
|
565
|
-
// slug: "mark-smith",
|
|
566
|
-
// },
|
|
567
|
-
// ],
|
|
568
|
-
// blocks: [
|
|
569
|
-
// {
|
|
570
|
-
// id: "324321",
|
|
571
|
-
// __typename: "ImageRecord",
|
|
572
|
-
// image: {
|
|
573
|
-
// responsiveImage: { ... },
|
|
574
|
-
// },
|
|
575
|
-
// },
|
|
576
|
-
// ],
|
|
577
|
-
// }
|
|
578
|
-
},
|
|
579
|
-
};
|
|
580
|
-
</script>
|
|
46
|
+
npm install vue-datocms
|
|
581
47
|
```
|
|
582
48
|
|
|
583
|
-
##
|
|
49
|
+
## Development
|
|
584
50
|
|
|
585
|
-
This
|
|
51
|
+
This repository contains a number of examples. You can use them to locally test your changes to the package:
|
|
586
52
|
|
|
587
|
-
-
|
|
588
|
-
-
|
|
53
|
+
- [Vue 3 + TypeScript + Vite](examples/vite-typescript-vue3/)
|
|
54
|
+
- [Vue 2 + Javacript + Vue CLI](examples/vue-cli-babel-javascript-vue2/)
|
|
55
|
+
- [Query subscription](examples/query-subscription/)
|
|
56
|
+
- [Site search](examples/site-search/)
|
|
589
57
|
|
|
590
|
-
|
|
58
|
+
To use them, follow this recipe starting from the vue-datocms folder:
|
|
591
59
|
|
|
592
|
-
```
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
:customMarkRules="customMarkRules"
|
|
598
|
-
/>
|
|
599
|
-
</template>
|
|
600
|
-
|
|
601
|
-
<script>
|
|
602
|
-
import { StructuredText, renderNodeRule, renderMarkRule } from "vue-datocms";
|
|
603
|
-
import { isHeading, isCode } from "datocms-structured-text-utils";
|
|
604
|
-
import { render as toPlainText } from 'datocms-structured-text-to-plain-text';
|
|
605
|
-
import SyntaxHighlight from './components/SyntaxHighlight';
|
|
606
|
-
|
|
607
|
-
export default {
|
|
608
|
-
components: {
|
|
609
|
-
"datocms-structured-text": StructuredText,
|
|
610
|
-
"syntax-highlight": SyntaxHighlight,
|
|
611
|
-
},
|
|
612
|
-
data() {
|
|
613
|
-
return {
|
|
614
|
-
data: /* ... */,
|
|
615
|
-
customNodeRules: [
|
|
616
|
-
renderNodeRule(isHeading, ({ adapter: { renderNode: h }, node, children, key }) => {
|
|
617
|
-
const anchor = toPlainText(node)
|
|
618
|
-
.toLowerCase()
|
|
619
|
-
.replace(/ /g, '-')
|
|
620
|
-
.replace(/[^\w-]+/g, '');
|
|
621
|
-
|
|
622
|
-
return h(
|
|
623
|
-
`h${node.level}`, { key }, [
|
|
624
|
-
...children,
|
|
625
|
-
h('a', { attrs: { id: anchor } }, []),
|
|
626
|
-
h('a', { attrs: { href: `#${anchor}` } }, []),
|
|
627
|
-
]
|
|
628
|
-
);
|
|
629
|
-
}),
|
|
630
|
-
renderNodeRule(isCode, ({ adapter: { renderNode: h }, node, key }) => {
|
|
631
|
-
return h('syntax-highlight', {
|
|
632
|
-
key,
|
|
633
|
-
code: node.code,
|
|
634
|
-
language: node.language,
|
|
635
|
-
linesToBeHighlighted: node.highlight,
|
|
636
|
-
}, []);
|
|
637
|
-
}),
|
|
638
|
-
],
|
|
639
|
-
customMarkRules: [
|
|
640
|
-
// convert "strong" marks into <b> tags
|
|
641
|
-
renderMarkRule('strong', ({ adapter: { renderNode: h }, mark, children, key }) => {
|
|
642
|
-
return h('b', {key}, children);
|
|
643
|
-
}),
|
|
644
|
-
],
|
|
645
|
-
};
|
|
646
|
-
},
|
|
647
|
-
};
|
|
648
|
-
</script>
|
|
60
|
+
```bash
|
|
61
|
+
npm install
|
|
62
|
+
cd examples/vite-typescript-vue3
|
|
63
|
+
npm run setup
|
|
64
|
+
npm run dev
|
|
649
65
|
```
|
|
650
66
|
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
## Props
|
|
654
|
-
|
|
655
|
-
| prop | type | required | description | default |
|
|
656
|
-
| ------------------ | ---------------------------------------------------------- | ----------------------------------------------------- | ------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------- |
|
|
657
|
-
| data | `StructuredTextGraphQlResponse \| DastNode` | :white_check_mark: | The actual [field value](https://www.datocms.com/docs/structured-text/dast) you get from DatoCMS | |
|
|
658
|
-
| renderInlineRecord | `({ record }) => VNode \| null` | Only required if document contains `inlineItem` nodes | Convert an `inlineItem` DAST node into a VNode | `[]` |
|
|
659
|
-
| renderLinkToRecord | `({ record, children, transformedMeta }) => VNode \| null` | Only required if document contains `itemLink` nodes | Convert an `itemLink` DAST node into a VNode | `null` |
|
|
660
|
-
| renderBlock | `({ record }) => VNode \| null` | Only required if document contains `block` nodes | Convert a `block` DAST node into a VNode | `null` |
|
|
661
|
-
| metaTransformer | `({ node, meta }) => Object \| null` | :x: | Transform `link` and `itemLink` meta property into HTML props | [See function](https://github.com/datocms/structured-text/blob/main/packages/generic-html-renderer/src/index.ts#L61) |
|
|
662
|
-
| customNodeRules | `Array<RenderRule>` | :x: | Customize how nodes are converted in JSX (use `renderNodeRule()` to generate) | `null` |
|
|
663
|
-
| customMarkRules | `Array<RenderMarkRule>` | :x: | Customize how marks are converted in JSX (use `renderMarkRule()` to generate) | `null` |
|
|
664
|
-
| renderText | `(text: string, key: string) => VNode \| string \| null` | :x: | Convert a simple string text into a VNode | `(text) => text` |
|
|
67
|
+
Due to the way Vue and VueDemi work, it's not recommended to leverage `npm link` to use the working copy from the examples: that would complicate the structure of each example and it would not replicate a real-world installation. Therefore the `npm run setup` available in each example packs and installs the local copy of `vue-datocms` via a `.tgz` compressed tarball.
|