fix(vue-2): rework how vue 2 plugin gets head instance (#227)

unjs · Sep 12, 2023 · 13aec6d · 13aec6d
1 parent f9d0fb7
commit 13aec6d
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 43 deletions.
diff --git 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
@@ -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
@@ -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<any>) {
-  // 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,
+          }
         }
       }
     },