From 1ecc4def5368a17bef49421bc3b2253b21749f43 Mon Sep 17 00:00:00 2001 From: Valera Trubachev Date: Tue, 12 Sep 2023 09:46:23 -0500 Subject: [PATCH] fix(vue-2): rework how vue 2 plugin gets head instance --- docs/content/1.setup/4.vue/0.installation.md | 3 +- examples/vue-2/src/main.js | 3 +- packages/vue/src/vue2/index.ts | 79 ++++++++++---------- 3 files changed, 42 insertions(+), 43 deletions(-) diff --git a/docs/content/1.setup/4.vue/0.installation.md b/docs/content/1.setup/4.vue/0.installation.md index 4c2a12e1..747a36a0 100644 --- a/docs/content/1.setup/4.vue/0.installation.md +++ b/docs/content/1.setup/4.vue/0.installation.md @@ -47,10 +47,11 @@ import { createHead } from '@unhead/vue' import { UnheadPlugin } from '@unhead/vue/vue2' const head = createHead() -Vue.use(UnheadPlugin, head) +Vue.use(UnheadPlugin) new Vue({ el: '#app', + unhead: head, }) ``` diff --git a/examples/vue-2/src/main.js b/examples/vue-2/src/main.js index 6effef11..04805e0a 100644 --- a/examples/vue-2/src/main.js +++ b/examples/vue-2/src/main.js @@ -7,8 +7,9 @@ Vue.config.productionTip = false const head = createHead() -Vue.use(UnheadPlugin, head); +Vue.use(UnheadPlugin); new Vue({ render: h => h(App), + unhead: head, }).$mount('#app') diff --git a/packages/vue/src/vue2/index.ts b/packages/vue/src/vue2/index.ts index 155b9261..6bcf2bb9 100644 --- a/packages/vue/src/vue2/index.ts +++ b/packages/vue/src/vue2/index.ts @@ -2,56 +2,53 @@ import { getCurrentInstance } from 'vue' import type { Plugin } from 'vue' import { headSymbol } from '../createHead' import { useHead } from '../composables/useHead' -import type { VueHeadClient } from '../types' import { Vue3 } from '../env' -export const HeadOptions = { - created() { - let source = false - if (Vue3) { - const instance = getCurrentInstance() - if (!instance) - return - const options = instance.type - if (!options || !('head' in options)) - return +export const UnheadPlugin: Plugin = function (_Vue) { + // copied from https://github.com/vuejs/pinia/blob/v2/packages/pinia/src/vue2-plugin.ts + _Vue.mixin({ + created() { + let source = false + if (Vue3) { + const instance = getCurrentInstance() + if (!instance) + return + const options = instance.type + if (!options || !('head' in options)) + return - source = typeof options.head === 'function' - ? () => options.head.call(instance.proxy) - : options.head - } - else { - // @ts-expect-error vue 2 - const head = this.$options.head - if (head) { - source = typeof head === 'function' - ? () => head.call(this) - : head + source = typeof options.head === 'function' + ? () => options.head.call(instance.proxy) + : options.head + } + else { + const head = this.$options.head + if (head) { + source = typeof head === 'function' + ? () => head.call(this) + : head + } } - } - // @ts-expect-error vue 2 - source && useHead(source) - }, -} + // @ts-expect-error vue 2 + source && useHead(source) + }, -export const UnheadPlugin: Plugin = function (_Vue, head: VueHeadClient) { - // copied from https://github.com/vuejs/pinia/blob/v2/packages/pinia/src/vue2-plugin.ts - _Vue.mixin({ - ...HeadOptions, beforeCreate() { const options = this.$options - const origProvide = options.provide - options.provide = function () { - let origProvideResult - if (typeof origProvide === 'function') - origProvideResult = origProvide.call(this) - else - origProvideResult = origProvide || {} + if (options.unhead) { + const origProvide = options.provide + options.provide = function () { + let origProvideResult + if (typeof origProvide === 'function') + origProvideResult = origProvide.call(this) + else + origProvideResult = origProvide || {} - return { - ...origProvideResult, - [headSymbol]: head, + return { + ...origProvideResult, + [headSymbol]: options.unhead, + } } } },