Use @vueuse/head instead.
Document <head> manager for Vue 3, SSR ready. (Experimental)
yarn add @egoist/vue-headApply this plugin to your Vue instance:
import { createApp } from 'vue'
import { createHead } from '@egoist/vue-head'
const app = createApp()
const head = createHead()
app.use(head)Use the <Head> component to add tags to <head>:
<template>
<Head>
<title>Hello Vue</title>
<meta name="description" content="Do you like it?" />
</Head>
</template>
<script>
import { Head } from '@egoist/vue-head'
export default {
components: {
Head,
},
}
</script>On your server:
import { createApp, h, Fragment } from 'vue'
import { renderToString } from '@vue/server-renderer'
const app = createApp()
const appHTML = await renderToString(app)
const headHTML = await renderToString(
h(Fragment, app.config.globalProperties.$head.headTags)
)
const finalHTML = `
<html>
<head>${headHTML}</head>
<body>${appHTML}</body>
</html
`On the client-side, head tags are <Teleport>-ed to document.head element.
On the server-side, head tags are stored as a VNode array, so you can render them to HTML using Vue.renderToString.
- Testing
- Support
bodyAttrs,htmlAttrs
Inspired by react-head.
MIT © EGOIST