Timing issue with vue-meta

pageviewTemplate is resolved before vue-meta has synced the page components head.

Reproduce:

1. Download Nuxt.js starter template
2. Install analytics module and set pageviewTemplate:

// nuxt.config.js
'google-analytics': {
  id: 'UA-XXXXXX',
  debug: {
    enabled: true,
  },
  autoTracking: {
    pageviewTemplate: route => {
      return {
        page: route.path,
        title: document.title,
        location: window.location.href,
      };
    },
  },
},

1. Setup two pages:

<!-- pages/page1.vue -->
<template>
  <div>
    <h1 class="title">Page 1</h1>

    <div class="links">
      <nuxt-link to="page1">Page 1</nuxt-link>
      <nuxt-link to="page2">Page 2</nuxt-link>
    </div>
  </div>
</template>

<script>
export default {
  head() {
    return {
      title: 'Page 1',
    };
  },
}
</script>

<!-- pages/page2.vue -->
<template>
  <div>
    <h1 class="title">Page 2</h1>

    <div class="links">
      <nuxt-link to="page1">Page 1</nuxt-link>
      <nuxt-link to="page2">Page 2</nuxt-link>
    </div>
  </div>
</template>

<script>
export default {
  head() {
    return {
      title: 'Page 2',
    };
  },
}
</script>

Expected behavior: Page 1 will track “Page 1” as title Page 2 will track “Page 2” as title

Actual behavior: Page 1 & Page 2 tracks title correctly during initial load Page 2 tracks “Page 1” when changing route from Page 1 -> Page 2 Page 1 tracks “Page 2” when changing route from Page 2 -> Page 1

Console output:

location         (&dl)   http://localhost:3000/page2
page             (&dp)   /page2
title            (&dt)   Page 1

location         (&dl)   http://localhost:3000/page1
page             (&dp)   /page1
title            (&dt)   Page 2

<div align="right">_{This question is available on Nuxt.js community (#c8)}</div>

[cbodin]

Cool, maybe we should open an issue in the vue-meta repo? 😃 I’ve however found a workaround for anyone stumbling upon this issue. It does require a few things however:

1. Use the Nuxt Router Module
2. Disable auto tracking:

      autoTracking: {
        pageviewOnLoad: false,
        page: false,
      },

1. Add meta to all page components, and only the page components
2. Add a mixin in the router.js file (Maybe there’s a better place to put this?)

Vue.mixin({
  mounted() {
    if (this.$metaInfo) {
      this.$ga.page({
        page: this.$router.currentRoute.path,
        title: this.$metaInfo.title,
        location: window.location.href,
      });
    }
  },
});

I’m now getting the correct url’s and titles tracked on all pages.

[manniL]

@Jones-S WIP (in https://github.com/nuxt/vue-meta/)