Skip to content

Commit c31719a

Browse files
committed
Add installation.md
1 parent 71760f4 commit c31719a

File tree

2 files changed

+57
-0
lines changed

2 files changed

+57
-0
lines changed

docs/.vitepress/config.ts

+3
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,9 @@ export default defineConfigWithTheme({
3131
{
3232
text: 'What is vue-vnode-utils?',
3333
link: '/guide/introduction.html'
34+
}, {
35+
text: 'Installation',
36+
link: '/guide/installation.html'
3437
}
3538
]
3639
}

docs/guide/installation.md

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
# Installation
2+
3+
## npm
4+
5+
Installation with `npm`/`yarn`/`pnpm`:
6+
7+
```sh
8+
npm add @skirtle/vue-vnode-utils
9+
```
10+
11+
ES module usage:
12+
13+
```js
14+
import { addProps } from '@skirtle/vue-vnode-utils'
15+
```
16+
17+
## CDN - global build
18+
19+
```html
20+
<script src="https://unpkg.com/@skirtle/vue-vnode-utils/dist/vue-vnode-utils.global.dev.js"></script>
21+
```
22+
23+
This should be placed after the `<script>` tag for Vue itself, as it needs the global `Vue` to be available.
24+
25+
The functions are then exposed via the global `VueVNodeUtils`:
26+
27+
```js
28+
const { addProps } = VueVNodeUtils
29+
```
30+
31+
The URL above will include the development build, which is not minified and includes some warning messages. In production the exact version should be pinned and `.prod` should be used instead of `.dev`.
32+
33+
## CDN - ES module build
34+
35+
`@skirtle/vue-vnode-utils` imports from `vue`, so it needs an import map to be configured to use ES modules directly in the browser.
36+
37+
```html
38+
<script type="importmap">
39+
{
40+
"imports": {
41+
"vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js",
42+
"@skirtle/vue-vnode-utils": "https://unpkg.com/@skirtle/vue-vnode-utils/dist/vue-vnode-utils.esm-browser.dev.js",
43+
}
44+
}
45+
</script>
46+
<script type="module">
47+
import { addProps } from '@skirtle/vue-vnode-utils'
48+
// ...
49+
</script>
50+
```
51+
52+
As with the global build, this should be changed to an exact version and switched to `.prod` in production.
53+
54+
Some browsers do not yet have full support for import maps.

0 commit comments

Comments
 (0)