From c31719ad95c33f935ffe3aa3572efa6e26848262 Mon Sep 17 00:00:00 2001
From: skirtle <65301168+skirtles-code@users.noreply.github.com>
Date: Mon, 10 Oct 2022 07:56:41 +0100
Subject: [PATCH] Add installation.md

---
 docs/.vitepress/config.ts  |  3 +++
 docs/guide/installation.md | 54 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 57 insertions(+)
 create mode 100644 docs/guide/installation.md

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index a524fd4..ba16e78 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -31,6 +31,9 @@ export default defineConfigWithTheme({
           {
             text: 'What is vue-vnode-utils?',
             link: '/guide/introduction.html'
+          }, {
+            text: 'Installation',
+            link: '/guide/installation.html'
           }
         ]
       }
diff --git a/docs/guide/installation.md b/docs/guide/installation.md
new file mode 100644
index 0000000..c1d9ccc
--- /dev/null
+++ b/docs/guide/installation.md
@@ -0,0 +1,54 @@
+# Installation
+
+## npm
+
+Installation with `npm`/`yarn`/`pnpm`:
+
+```sh
+npm add @skirtle/vue-vnode-utils
+```
+
+ES module usage:
+
+```js
+import { addProps } from '@skirtle/vue-vnode-utils'
+```
+
+## CDN - global build
+
+```html
+<script src="https://unpkg.com/@skirtle/vue-vnode-utils/dist/vue-vnode-utils.global.dev.js"></script>
+```
+
+This should be placed after the `<script>` tag for Vue itself, as it needs the global `Vue` to be available.
+
+The functions are then exposed via the global `VueVNodeUtils`:
+
+```js
+const { addProps } = VueVNodeUtils
+```
+
+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`.
+
+## CDN - ES module build
+
+`@skirtle/vue-vnode-utils` imports from `vue`, so it needs an import map to be configured to use ES modules directly in the browser.
+
+```html
+<script type="importmap">
+{
+  "imports": {
+    "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js",
+    "@skirtle/vue-vnode-utils": "https://unpkg.com/@skirtle/vue-vnode-utils/dist/vue-vnode-utils.esm-browser.dev.js",
+  }
+}
+</script>
+<script type="module">
+import { addProps } from '@skirtle/vue-vnode-utils'
+// ...
+</script>
+```
+
+As with the global build, this should be changed to an exact version and switched to `.prod` in production.
+
+Some browsers do not yet have full support for import maps.