I'm currently facing an issue while developing a Vue3 Perfect Scrollbar plugin. The problem arises when I try to initialize the object, resulting in the following error:
Error: no element is specified to initialize PerfectScrollbar
The code for the Scrollbar component is as follows:
import PerfectScrollbar from 'perfect-scrollbar'
import { isEmpty } from 'lodash'
import {
onMounted,
reactive,
ref,
h
} from 'vue'
export default {
name: 'VuePerfectScrollbar',
props: {
options: {
type: Object,
required: false,
default: () => {
}
},
tag: {
type: String,
required: false,
default: 'div'
}
},
setup(props, {emit, slots}) {
const el = ref(null)
let ps = reactive({})
onMounted(() => {
if (isEmpty(ps)) {
ps = new PerfectScrollbar(el, props.options)
}
})
return () => h(
props.tag,
{
class: 'ps',
ref: el
},
slots.default && slots.default()
)
}
}
Prior to initializing, I verified the existence of the element reference through a console.log statement. Surprisingly, the element reference was present which makes me wonder why the error is still occurring. The insight provided by this source suggests that
This error simply means that you are calling PerfectScrollbar on something that doesn't exist!