head

@lihbr/utils-nuxt.head configures vue-meta with all the good stuff: Schema.org, Open Graph, Twitter, etc.

This module is similar to @nuxtjs/pwa Meta module, but more opinionated.

Features

Installation

Add @lihbr/utils-nuxt.head dependency to your project:

Then, add @lihbr/utils-nuxt.head to the buildModules section of your nuxt.config.js file and configure your application name, description and URL:

export default {
  buildModules: [
    [
      "@lihbr/utils-nuxt.head",
      {
        name: "My Company",
        description: "We craft amazing products.",
        url: "https://example.com"
        /* see configuration below for more */
      }
    ]
  ]
};

Usage

This module injects a $buildHead method inside your Vue.js application that you need to use on every page head method:

<script>
export default {
  head() {
    return this.$buildHead({
      title: "Home",
      description: "Welcome to My Company home page",
      metaImage: {
        og: "https://example.com/home-1200x630.jpg",
        tw: "https://example.com/home-1200x600.jpg"
      },
      path: this.$route.path,
      additionalStructuredData: []
    });
  }
};
</script>

This function will resolve meta tags for this page with provided options against default options provided to the module itself. Except path, every key is optional, check $buildHead function reference for more information.

Reference

Configuration

lang

• Type: String
• Default: "en"

Application language to apply on html tag lang attribute.

{
  lang: "fr"
}

name

• Type: String
• required

Application name used across different meta tags.

{
  name: "My Company"
}

description

• Type: String
• required

Application default description used across different meta tags as fallback when no page-specific description is provided.

{
  description: "We craft amazing products."
}

metaImage

• Type: Object
• Default: { og: undefined, tw: undefined }

Application default meta image used for Open Graph (og) and Twitter (tw) meta image tags as fallback when no page-specific meta image is provided.

{
  metaImage: {
    og: "https://example.com/1200x630.jpg",
    tw: "https://example.com/1200x630.jpg"
  }
}

As of writing this, both Open Graph and Twitter prefer 1.91:1 for their image aspect ratio.

twitterHandle

• Type: String
• Default: undefined

Application Twitter handle used on twitter:site meta tag.

{
  twitterHandle: "@li_hbr"
}

backgroundColor

• Type: String
• Default: "#fefefe"

Application background color used on theme-color meta tag.

{
  backgroundColor: "#fff7f7"
}

accentColor

• Type: String
• Default: "#111111"

Application accent color used on msapplication-TileColor meta tag and mask-icon link tag.

{
  accentColor: "#e84311"
}

titleFormat

• Type: String
• Default: "%page% - %site%"

Application title format used to define page title. %page% will get replaced by per-page provided title and %site% by mandatory name option. If no per-page title is provided on name gets displayed.

{
  titleFormat: "%page% | %site%"
}

url

• Type: String
• required

Application URL required to define some meta tags.

{
  url: "https://example.com"
}

Configuration Defaults

{
  lang: "en",
  name: "",
  description: "",
  metaImage: {
    og: undefined,
    tw: undefined
  },
  twitterHandle: undefined,
  backgroundColor: "#fefefe",
  accentColor: "#111111",
  titleFormat: "%page% - %site%",
  url: undefined
}

$buildHead

title

• Type: String
• Default: name option provided to module, skipping titleFormat

Page title used to build final page title following module titleFormat option.

{
  title: "Home"
}

description

• Type: String
• Default: description option provided to module

Page description used across different meta tags.

{
  description: "Welcome to My Company home page"
}

metaImage

• Type: Object
• Default: metaImage option provided to module

Page meta image used for Open Graph (og) and Twitter (tw) meta image tags.

{
  metaImage: {
    og: "https://example.com/home-1200x630.jpg",
    tw: "https://example.com/home-1200x600.jpg"
  }
}

As of writing this, both Open Graph and Twitter prefer 1.91:1 for their image aspect ratio.

path

• Type: String
• required

Current page path used across different meta tags, you might want to stick with router path property:

{
  path: this.$route.path
}

additionalStructuredData

• Type: Array
• Default: []

Additional structured data objects that will end up stringified and injected under an application/ld+json script.

{
  additionalStructuredData: [
    /* structured data objects */
  ]
}