head

lihbr utils for Nuxt.js

@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

Add basic head information: lang, charset, etc.
Add global values for Schema.org, Open Graph, Twitter, etc.
Overwrite global values with per-page head information
Enhance your pages with complex structured data

Installation

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

yarn add --dev @lihbr/utils-nuxt.head
npm install --save-dev @lihbr/utils-nuxt.head

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

nuxt.config.js
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:

~/pages/index.vue
<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.

module‏‏‎‏‏‎ options
{
  lang: "fr"
}

name

  • Type: String
  • required

Application name used across different meta tags.

module‏‏‎‏‏‎ options
{
  name: "My Company"
}

description

  • Type: String
  • required

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

module‏‏‎‏‏‎ options
{
  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.

module‏‏‎‏‏‎ options
{
  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.

module‏‏‎‏‏‎ options
{
  twitterHandle: "@li_hbr"
}

backgroundColor

  • Type: String
  • Default: "#fefefe"

Application background color used on theme-color meta tag.

module‏‏‎‏‏‎ options
{
  backgroundColor: "#fff7f7"
}

accentColor

  • Type: String
  • Default: "#111111"

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

module‏‏‎‏‏‎ options
{
  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.

module‏‏‎‏‏‎ options
{
  titleFormat: "%page% | %site%"
}

url

  • Type: String
  • required

Application URL required to define some meta tags.

module‏‏‎‏‏‎ options
{
  url: "https://example.com"
}

Configuration Defaults

module‏‏‎ options
{
  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.

function‏‏‎‏‏‎ options
{
  title: "Home"
}

description

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

Page description used across different meta tags.

function‏‏‎‏‏‎ options
{
  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.

function‏‏‎‏‏‎ options
{
  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:

function‏‏‎‏‏‎ options
{
  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.

function‏‏‎‏‏‎ options
{
  additionalStructuredData: [
    /* structured data objects */
  ]
}

Learn more about structured data on Google's documentation.

Edit this page on GitHub Updated at Tue, Apr 13, 2021