medium-zoom needs page reload to work #117

Open lrkwz opened 3 years ago

[x] I confirm that this is an issue rather than a question.

Bug report

I've configured medium-zoom as documented but it doesn't work at first page load, you need to press the reload button to make it work. No errors in console

//package.json
{ 
  "name": "vuepress-gl-pages",
  "version": "1.0.0",
  "description": "A starter project for hosting VuePress sites on GitLab pages.",
  "main": "index.js",
  "author": "lrkwz",
  "license": "MIT",
  "private": false,
  "scripts": {
    "dev": "vuepress dev blog",
    "build": "vuepress build blog",
  },
  "dependencies": {},
  "devDependencies": {
    "@vuepress/theme-blog": "^2.3.3",
    "vuepress": "^1.8.0"
  }
}

 // blog/.vuepress/config.js
module.exports = {
    title: 'Lrkwz ❤️ Wandering by in the Net',
    description: 'Pensieri misti vagando per la rete | This is my primary blog site, I usually write things in many different places but this is mine.',
    base: '/',
    dest: 'public',
    theme: '@vuepress/theme-blog', // OR shortcut: @vuepress/blog
    themeConfig: {
        nav: [
            {
                text: 'iTours',
                link: 'https://lrkwz.gitlab.io/itours/',
            },
            {
                text: 'Blog',
                link: '/',
            },
            {
                text: 'Tags',
                link: '/tag/',
            },
        ],

        /**
         * Ref: https://vuepress-theme-blog.ulivz.com/config/#footer
         */
        footer: {
            contact: [
                {
                    type: "github",
                    link: "https://github.com/lrkwz"
                },
                {
                    type: "gitlab",
                    link: "https://gitlab.com/lrkwz"
                },
                {
                    type: "linkedin",
                    link: "https://linkedin.com/in/lrkwz"
                },
                {
                    type: "instagram",
                    link: "https://instagram.com/lrkwz"
                },
                {
                    type: "web",
                    link: "https://flickr.com/lrkwz"
                },
                {
                    type: "twitter",
                    link: "https://twitter.com/lrkwz"
                },
                {
                    type: "youtube",
                    link: "https://youtube.com/lrkwz"
                }
            ],
            copyright: [
                {
                    text: "Lrkwz © 2020",
                    link: ""
                }
            ]
        },

        /**
         * Ref: https://vuepress-theme-blog.ulivz.com/config/#sitemap
         */

        sitemap: {
            hostname: 'https://lrkwz.gitlab.com/'
        },

        /**
         * Ref: https://vuepress-theme-blog.ulivz.com/config/#feed
         */

        feed: {
            canonical_base: 'https://lrkwz.gitlab.com/',
        },
    },
    plugins: [
        [
            '@vuepress/google-analytics',
            {
                'ga': 'UA-89993-1' // UA-00000000-0
            }
        ],
        ['@vuepress/plugin-medium-zoom', {
            selector: '.content__default img',
            options: {
                background: '#000000'
            }
        }]
    ]
}

Steps to reproduce

[X] I prepared a reproduction repo, here is the reproduction repo: https://gitlab.com/lrkwz/lrkwz.gitlab.io/
[ ] This issue doesn't need a reproduction repro, here is the steps to reproduce

Demo it at https://lrkwz.gitlab.io/2021/04/02/lambrate/

What is expected?

The lents cursor should appear hovering on the images. Clicking the image should zoom it.

What is actually happening?

Cursor doesn't change shape and no click event is fired.

Other relevant information

npx vuepress info:
```
npx vuepress info
```

Environment Info:

System: OS: Linux 5.4 Ubuntu 20.04.2 LTS (Focal Fossa) CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz Binaries: Node: 10.23.3 - ~/.nvm/versions/node/v10.23.3/bin/node Yarn: 1.22.5 - /usr/bin/yarn npm: 6.14.11 - ~/.nvm/versions/node/v10.23.3/bin/npm Browsers: Chrome: Not Found Firefox: 87.0 npmPackages: @vuepress/core: 1.8.2 @vuepress/theme-default: 1.8.2 vuepress: ^1.8.0 => 1.8.2 npmGlobalPackages: vuepress: Not Found

I was able to "fix" this by

updating the selector in the options for the medium-zoom plugin

[
  '@vuepress/medium-zoom',
  {
    selector: '.content__default :not(a) > img',
  }
],

and

adding a watch on $page.path in the GlobalLayout and using that to fire this.updateZoom() from the medium-zoom plugin
```
watch: {
'$page.path' () {
  this.updateZoom()
},
},
```

vuepress / vuepress-theme-blog