vue-html-meta

Getting Started

Prerequisites

  • Vue 3+

This library won't support Vue 2 and below.

Installation

npm inatll vue-html-meta
# or
yarn add vue-html-meta

Install the plugin to your Vue app:

import { createApp } from 'vue'
import { createMeta } from 'vue-html-meta'

const app = createApp(App)

const meta = createMeta()
app.use(meta)

 



 
 

Mount to HTML

mountMeta is Vue Composableopen in new window. It returns refs for setting meta information.

<script setup>
import { mountMeta } from 'vue-html-meta'

const { title, meta, jsonld } = mountMeta()

title.value = 'My Page'
meta.value = [
  { name: 'description', content: 'hello' }
]
jsonld.value = {
  '@context': 'https://schema.org'
}
</script>

The metadata are rendered in the <head> tag:

<head>
  <title>My Page</title>
  <meta name="description" content="hello">
  <script type="application/ld+json">{"@context":"https://schema.org"}</script>
</head>

These tags are automatically removed when the component is unmounted.

Changing the value of the refs reacts to the DOM.

<script setup>
import { mountMeta } from 'vue-html-meta'

const { title } = mountMeta()

title.value = 'loading'

// <title> will be changed with a new value
api.get.then((value) => title.value = value.title)
</script>

You can also use reactive:

<script setup>
import { reactive } from 'vue'
import { mountMeta } from 'vue-html-meta'

const meta = reactive(mountMeta())

meta.title = 'My Page'
meta.meta = [
  { name: 'description', content: 'hello' }
]
meta.jsonld = {
  '@context': 'https://schema.org'
}
</script>

TIP

mountMeta is only works in setup() or other Composable.

State Sharing

mountMeta always returns new refs. It mounts HTML individually for each call. It is the user's responsibility to ensure that the content is not redundant.

For example, this is not the desired state, but it is correct behavior:

// in Component A setup
const { title } = mountMeta()
title.value = 'A'

// in Component B setup
const { title } = mountMeta()
title.value = 'B'

<template>
  <A />
  <B />
</template>

<head>
  <title>A</title>
  <title>B</title>
</head>

You can use provide/inject or state management libraries to share refs between components.

<script setup>
// in root component

// ...

const { title } = mountMeta()

function updateTitle(value) {
  title.value = value
}

provide('title', { updateTitle })

// in child component
const { updateTitle } = inject('title')
updateTitle('A')
</script>

<script setup>
const { title } = mountMeta()

// computed_title will be computed very complicatedly, probably
const computed_title = /* your store */

watch(computed_title, (next) => title.value = next)
</script>