@vueuse/head - npm Package Compare versions

Comparing version 0.2.0 to 0.2.1

CHANGELOG.md

@@ -0,1 +1,10 @@
+## [0.2.1](https://github.com/vueuse/head/compare/v0.2.0...v0.2.1) (2021-01-19)
+
+
+### Bug Fixes
+
+* updateDOM with custom document ([#9](https://github.com/vueuse/head/issues/9)) ([20d6d17](https://github.com/vueuse/head/commit/20d6d1757fc64abedcfde1ab14236189d42d1f47))
+
+
+
 # [0.2.0](https://github.com/vueuse/head/compare/v0.1.3...v0.2.0) (2021-01-19)
@@ -2,0 +11,0 @@

dist/index.js

@@ -16,3 +16,3 @@ "use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/index.ts
 // src/create-element.ts
-var createElement = (tag, attrs) => {
+var createElement = (tag, attrs, document) => {
   const el = document.createElement(tag);
@@ -113,4 +113,4 @@ for (const key of Object.keys(attrs)) {
 };
-var insertTags = (tags, document2 = window.document) => {
-  const head = document2.head;
+var insertTags = (tags, document = window.document) => {
+  const head = document.head;
   let headCountEl = head.querySelector(`meta[name="${HEAD_COUNT_KEY}"]`);
@@ -126,3 +126,3 @@ const headCount = headCountEl ? Number(headCountEl.getAttribute("content")) : 0;
   } else {
-    headCountEl = document2.createElement("meta");
+    headCountEl = document.createElement("meta");
     headCountEl.setAttribute("name", HEAD_COUNT_KEY);
@@ -149,3 +149,3 @@ headCountEl.setAttribute("content", "0");
     }
-    newElements.push(createElement(tag.tag, tag.props));
+    newElements.push(createElement(tag.tag, tag.props, document));
   }
@@ -156,6 +156,6 @@ oldElements.forEach((el) => {
   if (title !== void 0) {
-    document2.title = title;
+    document.title = title;
   }
-  setAttrs(document2.documentElement, htmlAttrs);
-  setAttrs(document2.body, bodyAttrs);
+  setAttrs(document.documentElement, htmlAttrs);
+  setAttrs(document.body, bodyAttrs);
   newElements.forEach((el) => {
@@ -205,4 +205,4 @@ head.insertBefore(el, headCountEl);
     },
-    updateDOM(document2) {
-      insertTags(headTags, document2);
+    updateDOM(document) {
+      insertTags(headTags, document);
     }
@@ -209,0 +209,0 @@ };

package.json

 {
   "name": "@vueuse/head",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "license": "MIT",
@@ -5,0 +5,0 @@ "description": "Document head manager for Vue 3. SSR ready.",

README.md

@@ -56,2 +56,32 @@ # @vueuse/head
 
+### Reactive data
+
+In many cases you want to make head tags dynamic, e.g. update document title when clicked a button:
+
+```vue
+<template>
+  <button @click="count++">Click</button>
+</template>
+
+<script>
+import { defineComponent, ref, computed } from 'vue'
+
+export default defineComponent({
+  setup() {
+    const count = ref(0)
+
+    useHead({
+      title: computed(() => `Clicked ${count.value} times`),
+    })
+
+    return {
+      count,
+    }
+  },
+})
+</script>
+```
+
+`meta`, `base` and other properties can also be a `RefObject` like the `title` here, check out [API](#api) for more.
+
 ### Server-side rendering
@@ -58,0 +88,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

23490

increased by3.89%

Number of lines in readme file

200

increased by17.65%

No dependency changes