vie-metadeprecated

Meta tag handling for vue 3

Usage no npm install needed!

<script type="module">
  import vieMeta from 'https://cdn.skypack.dev/vie-meta';
</script>

README

Vie-meta is a simple meta and title handler for Vue 3

Vie-Meta uses "Teleport" feature of Vue 3 to handle meta tags.

API

<!-- 
      If value of title is given by vue, 
      document title changes when value changes 
   -->
<vie-meta
   title="Some Title"
   :meta="[
      { name: 'og:title', content: 'nice website' }
   ]"
/>

Setup

import { createApp } from "vue";
import App from "./App.vue";
import VieMeta from "vie-meta";

const app = createApp(App);

app.use(VieMeta);
app.mount();

If you use multiple vie-meta components at once and create different meta tags with same name, you create two meta tags with same name.

<vie-meta
   :meta="[
      { name: 'og:title', content: 'nice website' }
   ]"
/>
<vie-meta
   :meta="[
      { name: 'og:title', content: 'bad website' }
   ]"
/>

<!-- You end up with -->

<head>
   ...
   <meta name="og:title" content="nice website" />
   <meta name="og:title" content="bad website" />
</head>