hero

vue-meta

HTML Metadata manager for Vue.js

Get Started →

What?

vue-meta is a plugin for Vue.js which helps you to manage your app's metadata using Vue's built-in reactivity

How?

Just add the special property `metaInfo` to any or all your components as these will be automatically merged top-down

So?

Nested components can overwrite each others values, allowing you to easily add or remove metadata where and when you need it!

We need your help!

We are working on defining the RFC for Vue Meta v3.0. It will be a ground-breaking release built from the ground up.

We would like your help with this! Please visit the Vue Meta v3.0 rfc and let us know your thoughts.

See the examples for more inspiration!

// Component.vue
{
  metaInfo: {
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' }
    ]
  }
}
<!-- Rendered HTML tags in your page -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">