Nanananananananana.. Pat Man!

    vue-simple-headful
    TypeScript icon, indicating that this package has built-in type declarations

    2.2.6 • Public • Published

    vue-simple-headful

    A simple ts-friendly meta-tag manager for Vue.js

    This is a direct and fully reworked fork of vue-headful. It is meant to make headful interactions simpler and more diverse for Vue.js. It can be used as a replacement for original vue-headful if more simplicity or richer functionality needed.

    vue-simple-headful is a tiny wrapper around Headful, a generic library to set meta tags with JavaScript.

    npm i -S vue-headful yarn add vue-headful


    Table Of Contents


    Usage

    Register the plugin

    import Vue from 'vue';
    import vueHeadful from 'vue-headful';
     
    Vue.use(vueHeadful);
     
    new Vue({
      // your configuration
    });

    And then use the headful component option in any of your views.


    Plugin options

    Optinally you can define custom opions for a plugin:

    1. A custom key to use with your components' options:

    Vue.use(vueHeadful, {
      key: 'myMetaTags' // custom key for component option
    })

    and then in some component.vue:

    export default {
      myMetaTags: {
        title: 'Yay, a title in my custom option!'
      }
    }

    2. A boolean flag if you want to use a special vue-component (false by default):

    Vue.use(vueHeadful, {
      // key: 'myMetaTags', // custom key for component option (optional)
      component: true
    })

    then in any template:

    <template>
      <!-- or <vue-my-meta-tags> if using custom key "myMetaTags" -->
      <vue-headful
        title=""
        description=""
        keywords=""
        image=""
        lang=""
        ogLocale=""
        url=""
      />
    </template>

    Headful shorthand

    The plugin also adds a shorthand for headful in every vue instance as $headful (or as $[your custom key]).

    methods: {
      someMethod() {
        this.$headful({ /* your headful tags here */ });
     
        // or, with the custom key:
        // this.$myMetaTags({ /* your headful tags here */ });
      }
    }

    Plugin Usage

    As function

    export default {
      // Supports Vue component's `this` context
      headful() {
        const vm = this;
        return {
          // Dynamic binding through getters
          get title() {
            return vm.myPageTitle || 'some title'
          },
          description: 'yay, a static description'
        }
      }
    }

    As arrow function

    export default {
      // Supports Vue component's `this` context through an argument
      headful: vm => ({
        // Getter for dynamic value update
        get title() {
          return 'some title of ' + vm.someString
        },
        description: 'yay, a static description'
      }),
      data() {
        return {
          someString: 'string'
        }
      }
    }

    As component data

    export default {
      data() {
        return {
          someString: 'string',
          headful: {
            title: 'title',
            description: 'yay, a static description'
          }
        }
      }
    }

    As an object

    export default {
      headful: {
        title: 'some title',
        description: 'yay, a static description'
      }
    }

    Component Usage

    vue-headful component supports all the head properties that are supported by Headful. You can find a non-complete list of head properties in the following example:

    <vue-headful
      title=""
      description=""
      keywords=""
      image=""
      lang=""
      ogLocale=""
      url=""
    />

    If there are any other head properties or attributes you want to set, you can use html (for arbitrary elements in the whole document) or head (for elements within <head>) as follows. The selectors can be any valid CSS selector.

    <vue-headful
      :html="{
        body: {id: 'aPageId'},
        h1: {'data-foo': 'bar'},
      }"
      :head="{
        'meta[charset]': {charset: 'utf-8'},
      }"
    />
     
    <!-- Results in:
    <head>
      <meta charset="utf-8">
    </head>
    <body id="aPageId">
    <h1 data-foo="bar"></h1>
    -->

    If you want to remove a previously defined attribute from an element, you can set it to undefined as in the example below:

    <vue-headful :title="undefined"/>

    Description

    vue-simple-headful is only a wrapper around Headful and by itself does not do that much.

    vue-simple-headful supports all the head properties that are supported by Headful. You can find a non-complete list of head properties in the following example: JS:

    headful: {
      title: ""
      description: ""
      keywords: ""
      image: ""
      lang: ""
      ogLocale: ""
      url: ""
    }

    HTML

    <vue-headful
      title=""
      description=""
      keywords=""
      image=""
      lang=""
      ogLocale=""
      url=""
    />

    If there are any other head properties or attributes you want to set, you can use html (for arbitrary elements in the whole document) or head (for elements within <head>) as follows. The selectors can be any valid CSS selector.

    JS:

     
    headful: {
      html: {
        body: { id: 'aPageId' },
        h1: { 'data-foo': 'bar' },
      },
      head: {
        'meta[charset]': { charset: 'utf-8' },
      }
    }

    HTML:

    <vue-headful
      :html="{
        body: {id: 'aPageId'},
        h1: {'data-foo': 'bar'},
      }"
      :head="{
        'meta[charset]': {charset: 'utf-8'},
      }"
    />
    <!-- Results in: -->
    <head>
      <meta charset="utf-8">
    </head>
    <body id="aPageId">
    <h1 data-foo="bar"></h1>

    If you want to remove a previously defined property, you can set it to undefined as in the example below:

    JS:

    headful:{
      title: undefined
    }

    HTML:

    <vue-headful :title="undefined"/>
    /* Results in:
    <title></title>
    <meta itemprop="name">
    <meta property="og:title">
    <meta name="twitter:title">
    */

    IMPORTANT

    Note that neither Headful nor vue-headful add missing HTML elements, they only add attribute values. So it is important that you add everything that you want to have populated in your HTML first. For example, to specify the title and description you have to prepare the HTML as follows.

    <!DOCTYPE html>
    <html>
    <head>
      <title></title>
      <meta itemprop="name">
      <meta property="og:title">
      <meta name="twitter:title">
      <meta name="description"/>
      <meta itemprop="description">
      <meta property="og:description">
      <meta name="twitter:description">
    </head>
    <body>
    <!-- ... -->
    </body>
    </html>

    vue-headful also supports dynamic properties and adds watchers to everything. That means you can also set head properties asynchronously, for example after an API request.

    <script>
      export default {
        headful() {
          return {
            title: 'Dynamic title',
          };
        },
        mounted() {
          // dummy async operation to show watcher on properties
          setTimeout(() => {
            this.headful.title = 'Dynamic async title';
          }, 3000);
        },
      };
    </script> 

    Also see the non-complete list of meta tags and other head properties you can define using vue-headful:

    • <html lang>
    • <title>
    • <meta name="description">
    • <meta itemprop="description">
    • <meta property="og:description">
    • <meta name="twitter:description">
    • <meta name="keywords">
    • <meta itemprop="image">
    • <meta property="og:image">
    • <meta name="twitter:image">
    • <meta property="og:locale">
    • <link rel="canonical">
    • <meta property="og:url">
    • <meta name="twitter:url">

    More

    For more information on everything you can put into <head>, have a look at https://gethead.info/.

    Demo: https://verywow.github.io/vue-simple-headful/

    Compatibility

    vue-headful works with every current and most reasonably old web browsers. If you need to support older browsers including Internet Explorer, have a look at Headful: Compatibility.

    Install

    npm i vue-simple-headful

    DownloadsWeekly Downloads

    131

    Version

    2.2.6

    License

    MIT

    Unpacked Size

    21.1 kB

    Total Files

    13

    Last publish

    Collaborators

    • avatar
    • avatar