Vue3 Composition API PerfectScrollbar Plugin no element is specified to initialize

Question

I'm trying to create a Perfect Scrollbar plugin for Vue3 but i'm stuck on an error when i initialize the object:

Error: no element is specified to initialize PerfectScrollbar

Scrollbar component:

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()
    )
  }
}

I did a console.log right before the initialization and the element reference is there, so i'm not sure why the error pops up. According to this This error simply means that you are calling PerfectScrollbar on something that doesn't exist! so maybe the DOM hasn't been updated at that moment? I tried with nextTick too but it didn't work.

Answer 1

You should get access to the value attribute in the ref property as follows :

ps = new PerfectScrollbar(el.value, props.options)