vue3 unhandeled error when using vue-panzoom component

Question

I used the panzoom in an older vue2 project.

Now I tested the component in a simple vue3 setup and got "Unhandled error during execution of mounted hook at at "

and "Cannot create panzoom for the current type of dom element"

where's the problem?

my package.json

{ "name": "image-zoom-test", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, "dependencies": { "core-js": "^3.6.5", "vue": "^3.0.0", "vue-panzoom": "^1.1.6" }, "devDependencies": { "@vue/cli-plugin-babel": "~4.5.15", "@vue/cli-plugin-eslint": "~4.5.15", "@vue/cli-service": "~4.5.15", "@vue/compiler-sfc": "^3.0.0", "babel-eslint": "^10.1.0", "eslint": "^6.7.2", "eslint-plugin-vue": "^7.0.0" }, "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/vue3-essential", "eslint:recommended" ], "parserOptions": { "parser": "babel-eslint" }, "rules": {} }, "browserslist": [ "> 1%", "last 2 versions", "not dead" ] }

main.js

import { createApp } from 'vue' import App from './App.vue' const app = createApp(App) // import vue-panzoom import panZoom from 'vue-panzoom' // install plugin app.use(panZoom); // createApp(App).mount('#app') app.mount('#app')

and the vue file

<template> <!-- <img alt="Vue logo" src="./assets/logo.png"> --> <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> --> <!-- apply to an image --> <panZoom> <img src="https://picsum.photos/300"> </panZoom> <!-- apply to regular dom elements --> <panZoom> <p>You can zoom me</p> </panZoom> <!-- apply to svg --> <panZoom selector="#g1"> <svg height="210" width="400"> <g id="g1"> <path d="M150 0 L75 200 L225 200 Z" /> </g> </svg> </panZoom> </template> <script> export default { name: 'App', components: { } } </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin-top: 0px; margin-left:0px; background-color: red; position : fixed; top: 0px; left:0px; width: 1920px; height: 1080px; } </style>

I'm running into the same problem. I wonder if vue-panzoom doesn't support Vue 3. — kevlar
– kevlar, Commented Nov 2, 2022 at 18:50

Ankit.Z · Accepted Answer · 2022-08-26 14:15:56Z

app id is mounted in main.js using app.mount('#app')

But Div with id app is missing in the vue file.

Vue file will look like following

<template> <!-- <img alt="Vue logo" src="./assets/logo.png"> --> <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> --> <!--missing div! --> <div id="app"> <!-- apply to an image --> <panZoom> <img src="https://picsum.photos/300"> </panZoom> <!-- apply to regular dom elements --> <panZoom> <p>You can zoom me</p> </panZoom> <!-- apply to svg --> <panZoom selector="#g1"> <svg height="210" width="400"> <g id="g1"> <path d="M150 0 L75 200 L225 200 Z" /> </g> </svg> </panZoom> </div> </template> <script> export default { name: 'App', components: { } } </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin-top: 0px; margin-left:0px; background-color: red; position : fixed; top: 0px; left:0px; width: 1920px; height: 1080px; } </style>

You can refer to official documentation of panzoom usage.

Collectives™ on Stack Overflow

vue3 unhandeled error when using vue-panzoom component

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related