diff --git a/README.md b/README.md index 5804be1..b2292f0 100644 --- a/README.md +++ b/README.md @@ -37,18 +37,52 @@ Created by egoist, maintained b ## Installation ```bash -npm i @vueuse/head +npm i @vueuse/head@next # Or Yarn -yarn add @vueuse/head +yarn add @vueuse/head@next ``` > Requires vue >= v3 or >=2.7 -## Documentation +## Usage -This package is powered by [unhead](https://github.com/harlan-zw/unhead), the universal document <head> manager. +### Vue 3 -Please refer to the [unhead documentation](https://unhead.harlanzw.com/) for full API reference and more. +Register the Vue plugin: + +```ts +import { createApp } from "vue" +import { createHead } from "@vueuse/head" + +const app = createApp() +const head = createHead() + +app.use(head) + +app.mount("#app") +``` + +### Vue 2 + +Register the Vue plugin: + +```ts +import Vue from 'vue' +import { createHead, HeadVuePlugin } from "@vueuse/head" + +const head = createHead() +// needed for Vue 2 +Vue.use(HeadVuePlugin, head) +Vue.use(head) + +new Vue({ + render: h => h(App), +}).$mount('#app') +``` + +## Further Documentation + +Refer to the [unhead documentation](https://unhead.harlanzw.com/) for full API reference and more. ## Sponsors diff --git a/examples/vue-2/src/components/HelloWorld.vue b/examples/vue-2/src/components/HelloWorld.vue index bf7d4a4..f3d3728 100644 --- a/examples/vue-2/src/components/HelloWorld.vue +++ b/examples/vue-2/src/components/HelloWorld.vue @@ -4,6 +4,15 @@ export default { props: { msg: String, }, + head() { + return { + style: [ + { + children: () => 'body { background-color: blue; }', + } + ] + } + }, } diff --git a/examples/vue-2/src/main.js b/examples/vue-2/src/main.js index dfb8420..d26fe6a 100644 --- a/examples/vue-2/src/main.js +++ b/examples/vue-2/src/main.js @@ -4,10 +4,10 @@ import { createHead, HeadVuePlugin } from "@vueuse/head" Vue.config.productionTip = false -Vue.use(HeadVuePlugin) const head = createHead() +Vue.use(HeadVuePlugin, head) +Vue.use(head) new Vue({ render: h => h(App), - head, }).$mount('#app')