diff --git a/.gitignore b/.gitignore index 6a8271a..61b6e41 100644 --- a/.gitignore +++ b/.gitignore @@ -7,4 +7,6 @@ dist-ssr _* **/worker/* -pnpm-lock.yaml \ No newline at end of file +pnpm-lock.yaml +.yarn +.yarnrc.yml \ No newline at end of file diff --git a/README.md b/README.md index 8dd8b69..11aee28 100644 --- a/README.md +++ b/README.md @@ -422,10 +422,30 @@ Use your framework's utilities to handle head tags and attributes for html and b
Vue Head

-Install [`@vueuse/head`](https://github.com/vueuse/head) as follows: +Install [`unhead`](https://github.com/unjs/unhead) as follows: + +```bash +yarn add unhead @unhead/vue @unhead/ssr @unhead/addons +``` + +```js +import { defineConfig } from 'vite' +import viteSSR from 'vite-ssr/plugin' +import UnheadVite from '@unhead/addons/vite' +import Vue from '@vitejs/plugin-vue' + +export default defineConfig( + plugins: [ + viteSSR(), + UnheadVite(), + Vue(), + // ... + ] +) +``` ```js -import { createHead } from '@vueuse/head' +import { createHead } from '@unhead/vue' export default viteSSR(App, { routes }, ({ app }) => { const head = createHead() @@ -435,7 +455,7 @@ export default viteSSR(App, { routes }, ({ app }) => { }) // In your components: -// import { useHead } from '@vueuse/head' +// import { useHead } from '@unhead/vue' // ... useHead({ ... }) ``` diff --git a/examples/vue/package.json b/examples/vue/package.json index b8930b3..b4d0819 100644 --- a/examples/vue/package.json +++ b/examples/vue/package.json @@ -8,12 +8,18 @@ "serve:node": "node ../node-server/index vue" }, "dependencies": { - "@vitejs/plugin-vue": "^4.0.0", - "@vue/compiler-sfc": "^3.2.26", - "@vue/server-renderer": "^3.2.26", - "@vueuse/head": "^0.6.0", - "vite": "4.1.x", - "vue": "^3.2.26", - "vue-router": "^4.0.12" + "@unhead/addons": "^1.1.32", + "@unhead/ssr": "^1.1.32", + "@unhead/vue": "^1.1.32", + "@vitejs/plugin-vue": "^4.2.3", + "@vue/compiler-sfc": "^3.3.4", + "@vue/server-renderer": "^3.3.4", + "unhead": "^1.1.32", + "vite": "^4.4.6", + "vue": "^3.3.4", + "vue-router": "^4.2.4" + }, + "devDependencies": { + "taze": "^0.11.2" } } diff --git a/examples/vue/src/main.js b/examples/vue/src/main.js index 44aec66..83f75a2 100644 --- a/examples/vue/src/main.js +++ b/examples/vue/src/main.js @@ -2,11 +2,14 @@ import './index.css' import App from './App.vue' import routes from './routes' import viteSSR, { ClientOnly } from 'vite-ssr' -import { createHead } from '@vueuse/head' +import { createHead } from '@unhead/vue' export default viteSSR( App, - { routes }, + { + routes, + // debug: { mount: false }, + }, ({ app, router, isClient, url, initialState, initialRoute, request }) => { const head = createHead() app.use(head) diff --git a/examples/vue/src/pages/Homepage.vue b/examples/vue/src/pages/Homepage.vue index a11dbca..0d0edcb 100644 --- a/examples/vue/src/pages/Homepage.vue +++ b/examples/vue/src/pages/Homepage.vue @@ -9,7 +9,7 @@