Search code examples
javascriptvue.jswebpackvuepress

VuePress site generated by `vuepress build` doesn't call `mounted()` hooks when the `--debug` option is used (works fine with `vuepress dev`)


EDIT: I originally thought the custom theme causes the error; I rephrased the question afterwards. Live demo is also fixed now.

I created a custom theme for VuePress that extends the @vuepress/theme-default to add some new Vue components. All works fine when I use vuepress dev. However, when I create a site using vuepress build, there isn't any event listener attached, so e.g. the menu doesn't open when the button is clicked.

The source code can be found at github.

A live demo is also available there: You can inspect the menu button there (at #app > div.theme-container.sections-layout > header > div.sidebar-button) - and compare it to the one at https://vuepress.vuejs.org/.

The problem seems to be that the mounted hooks are not executed in the version created by build. However, the docs say that browser API access should happen in beforeMount or mounted hooks. So this sounds that this is the place to use.

Any suggestion?

I'm using VuePrss cli.js/1.2.0 win32-x64 node-v12.13.0


Solution

  • Ok, the problem wasn't caused by the custom template, but by using the --debug option together with vuepress build. This obviously causes errors.

    Well, if you read the VuePress CLI documentation carefully, you might notice that this option is intended for development server only ...