chore: migrate to @unhead/vue from @vueuse/head (#18)

Author: sapphi-red

README.md

@@ -89,7 +89,7 @@ Or you can use [`vite-plugin-components`](#work-with-vite-plugin-components) for
 
 ## Frontmatter
 
-Frontmatter will be parsed and inject into Vue's instance data `frontmatter` field. 
+Frontmatter will be parsed and inject into Vue's instance data `frontmatter` field.
 
 For example:
 
@@ -114,10 +114,10 @@ It will also be passed to the wrapper component's props if you have set `wrapper
 
 ## Document head and meta
 
-To manage document head and meta, you would need to install [`@vueuse/head`](https://github.com/vueuse/head) and do some setup.
+To manage document head and meta, you would need to install [`@unhead/vue`](https://unhead.harlanzw.com/integrations/vue/setup) and do some setup.
 
 ```bash
-npm i @vueuse/head
+npm i @unhead/vue
 ```
 
 ```js
@@ -140,7 +140,7 @@ export default {
 ```js
 // src/main.js
 import { createApp } from 'vue'
-import { createHead } from '@vueuse/head' // <--
+import { createHead } from '@unhead/vue' // <--
 
 const app = createApp(App)
 
@@ -159,7 +159,7 @@ meta:
 ---
 ```
 
-For more options available, please refer to [`@vueuse/head`'s docs](https://github.com/vueuse/head).
+For more options available, please refer to [`@unhead/vue`'s docs](https://unhead.harlanzw.com/integrations/vue/setup).
 
 ## Options
 

example/main.ts

@@ -1,5 +1,5 @@
 import { createApp } from 'vue'
-import { createHead } from '@vueuse/head'
+import { createHead } from '@unhead/vue'
 import {
   createRouter,
   createWebHistory,

example/package.json

@@ -5,7 +5,7 @@
     "build": "cross-env DEBUG=vite-plugin-vue-markdown:* vite build"
   },
   "dependencies": {
-    "@vueuse/head": "^1.0.24",
+    "@unhead/vue": "^1.1.26",
     "vue": "^3.2.47",
     "vue-router": "^4.1.6"
   },

package.json

@@ -56,8 +56,8 @@
     "@antfu/eslint-config": "^0.38.4",
     "@antfu/ni": "^0.21.3",
     "@types/node": "^18.15.11",
+    "@unhead/vue": "^1.1.26",
     "@vue/test-utils": "^2.3.2",
-    "@vueuse/head": "^1.1.23",
     "bumpp": "^9.1.0",
     "eslint": "^8.38.0",
     "rollup": "^3.20.2",

pnpm-lock.yaml

@@ -132,7 +132,8 @@ export function createMarkdown(options: ResolvedOptions) {
 
       if (!isVue2 && headEnabled && head) {
         scriptLines.push(`const head = ${JSON.stringify(head)}`)
-        scriptLines.unshift('import { useHead } from "@vueuse/head"')
+        const importFrom = headEnabled === 'unhead' ? '@unhead/vue' : '@vueuse/head'
+        scriptLines.unshift(`import { useHead } from "${importFrom}"`)
         scriptLines.push('useHead(head)')
       }
     }

src/markdown.ts

@@ -1,6 +1,6 @@
 import { toArray } from '@antfu/utils'
 import type { Options, ResolvedOptions } from './types'
-import { getVueVersion } from './utils'
+import { getVueVersion, isUnheadVueInstalled } from './utils'
 
 export function resolveOptions(userOptions: Options): ResolvedOptions {
   const defaultOptions: ResolvedOptions = {
@@ -36,6 +36,9 @@ export function resolveOptions(userOptions: Options): ResolvedOptions {
     ...userOptions,
   }
 
+  if (options.headEnabled === true)
+    options.headEnabled = isUnheadVueInstalled() ? 'unhead' : 'vueuse'
+
   options.wrapperClasses = toArray(options.wrapperClasses)
     .filter((i?: string) => i)
     .join(' ')

src/options.ts

@@ -49,14 +49,17 @@ export interface Options {
   vueVersion?: string
 
   /**
-   * Enable head support, need to install @vueuse/head and register to App in main.js
+   * Enable head support, need to install @unhead/vue and register to App in main.js
+   *
+   * When `true` is passed, @unhead/vue will be used if installed.
+   * If not, @vueuse/head will be used.
    *
    * @default false
    */
-  headEnabled?: boolean
+  headEnabled?: boolean | 'unhead' | 'vueuse'
 
   /**
-   * The head field in frontmatter used to be used for @vueuse/head
+   * The head field in frontmatter used to be used for @unhead/vue
    *
    * When an empty string is passed, it will use the root properties of the frontmatter
    *
@@ -184,6 +187,7 @@ export interface Options {
 }
 
 export interface ResolvedOptions extends Required<Options> {
+  headEnabled: 'unhead' | 'vueuse' | false
   wrapperClasses: string
 }
 

src/types.ts

@@ -10,3 +10,14 @@ export function getVueVersion(defaultVersion = '3.2.0') {
     return defaultVersion
   }
 }
+
+export function isUnheadVueInstalled() {
+  try {
+    const _require = require
+    _require('@unhead/vue')
+    return true
+  }
+  catch {
+    return false
+  }
+}

src/utils.ts

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`excerpt > raw excerpt 1`] = `
 "<template><div class=\\"markdown-body\\"><p>This is an excerpt which is kept as <strong>raw Markdown</strong>.</p>