Quasar Meta extension

meta-mixin.js

export function LayoutMetaMixin(titleTemplateFn = title => title) {
  return {
    data() {
      return { metaTitle: '' };
    },
    meta() {
      return {
        titleTemplate: title => {
          this.metaTitle = titleTemplateFn(title);
          return this.metaTitle;
        },
        meta: layoutSocialMetaTags(this.metaTitle),
      };
    },
  };
}

export function PageMetaMixin(title, description) {
  return {
    meta: { title, meta: pageSocialMetaTags(description) },
  };
}

function layoutSocialMetaTags(title) {
  return {
    ...metaTag('og:title', title),
    ...metaTag('og:type', 'website'),
    // Image is crawled only when absolute URL is provided
    ...metaTag('og:image', `${domain()}/social-cover.jpg`),
  };
}

function pageSocialMetaTags(description) {
  return {
    ...metaTag(['description', 'og:description'], description),
    ...metaTag('og:url', `${domain()}${window.location.pathname}`),
  };
}

function domain() {
  // Check https://quasar.dev/quasar-cli/cli-documentation/handling-process-env#Import-based-on-process.env
  //  to use env variables, especially when performing SSR or SSG
  return (
    (process && process.env && process.env.APP_DOMAIN) || window.location.origin
  );
}

export function metaTag(names, value) {
  names = typeof names === 'string' ? [names] : names;

  const metaTagsObject = {};
  for (const name of names) {
    metaTagsObject[name] = { name, content: value };
  }

  return metaTagsObject;
}


/// USAGE

// layouts/main-layout.vue 
export default {
  mixins: [LayoutMetaMixin(title => `${title} - MyWebsite`)],
  // ...
}

// pages/home.vue
const title = 'Home';
const description = 'Description Google will hopefully use';

export default {
  name: 'Home',
  mixins: [PageMetaMixin(title, description)]
  // ...
}