@egoist/vue-head NPM

@egoist/vue-head

Document <head> manager for Vue 3, SSR ready. (Experimental)

Install

yarn add @egoist/vue-head

Usage

Apply 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>

SSR Usage

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.headTags))

const finalHTML = `
<html>

<head>${headHTML}</head>

<body>${appHTML}</body>

</html
`