Explain in the doc° how to use external libs like vue-matomo

[mdartic]

Feature request

It's not really a 'feature', more a 'documentation' request, about how to use external libs inside vuepress.

What problem does this feature solve?

I'm trying to integrate Matomo (ex piwik) instead of Google Analytics.
So I'm using vue-matomo inside the .vuepress/enhancedApp.js, because I think it's the good place to use it.

It looks like this :

import VueMatomo from 'vue-matomo';

export default ({
  Vue, // the version of Vue being used in the VuePress app
  options, // the options for the root Vue instance
  router, // the router instance for the app
  siteData // site metadata
}) => {
  // ...apply enhancements to the app
  Vue.use(VueMatomo, {
    host: 'https://piwik.yourwebsite.com',
    siteId: 1,

    // Enables automatically registering pageviews on the router
    router: router,

    // Require consent before sending tracking information to matomo
    requireConsent: true
  })
}

In local dev, seems ok, calls are made to the matomo server automatically if I disable requireConsent.

But when I build with vuepress build, it seems that vuepress cannot access my local dependency, because vue-matomo directory is a sibling of the vuepress dir.

Rendering page: /404.html FAIL  Error rendering /404.html:
Error: Cannot find module 'vue-matomo'

I try a local import like this

import VueMatomo from '../node_modules/vue-matomo/dist/vue-matomo.esm';

and now, the build seems better, but crash for the server part with a

Rendering page: /404.htmlError loading script ReferenceError: document is not defined
    at server-bundle.js:5315:18
    at new Promise (<anonymous>)
    at bootstrap (server-bundle.js:5314:23)

I think it's about SSR, maybe document is unavailable when vuepress build the server part. So it's not a vuepress problem anymore. (except if we think it's a good thing to allow user to choose between GA / Matomo)

How should this be implemented in your opinion?

Before that, some questions from me :

• do you agree the file enhanceApp.js is the right place for that ?
• do you agree the local import is the right solution ?

If yes, I think new section in the documentation telling us how to install a dependency and make available for vuepress to use it would be ok.

Are you willing to work on this yourself?**

Why not.

[dabernathy89]

I think it's about SSR, maybe document is unavailable when vuepress build the server part

Just FYI, there is some guidance here on how to get around that by importing inside of the mounted lifecycle hook: https://vuepress.vuejs.org/guide/using-vue.html#browser-api-access-restrictions

[ulivz]

do you agree the file enhanceApp.js is the right place for that ?

Yes

do you agree the local import is the right solution ?

No, you just need:

import VueMatomo from 'vue-matomo'

because vue-matomo directory is a sibling of the vuepress dir.

Emmm... module resolution depends on the location of your enhanceApp instead of VuePress's dir.

Closing it since there is no any valid reproduction repo link. If it turns out to be a bug, come back and open an issue with a proper reproduction repo.