medium-zoom needs page reload to work

[lrkwz]

• [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

[jabez007]

I was able to "fix" this by

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

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

and 2. 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()
    },
  },