Imported Vue component is not rendered in custom Field type plugin

I am trying to create a simple range slider custom field type plugin for Storyblok and would like to use a 3rd party Vue component inside my Plugin.vue component.

This child component was installed in the project using npm and imported into the Plugin.vue component:

<template>
  <div>
    <h2>Above slider</h2>
    <VueSlider v-model="value" />
    <h2>Below slider</h2>
  </div>
</template>

<script>
import VueSlider from 'vue-slider-component';
import 'vue-slider-component/dist-css/vue-slider-component.css'
import 'vue-slider-component/theme/default.css'

export default {
  mixins: [window.Storyblok.plugin],
  components: {
    VueSlider,
  },
  data() {
    return {
      value: 0
    }
  },
  methods: {
    initWith() {
      return {
        // needs to be equal to your storyblok plugin name
        plugin: 'sizes-slider-plugin',
      }
    },
  },
}
</script>

However, the 3rd party child component doesn’t seem to render in “Local dev mode” nor after being built and copied from export.js.

This is what the rendered HTML looks like:

As you can see the child component (VueSlider) is not rendered and no errors are thrown in the browser’s console.

This VueSlider component renders well outside of the Storyblok project. Other Vue components successfully render when included in the plugin.

Any ideas on how to troubleshoot this? Any restrictions as to which components can be used for Field type plugins?

Quick update: Building a new slider component from scratch (with no dependencies) seems to work well.

After starting work on a second component that does import a dependency (vue-color) I run into the same issue.

Is this somehow related to the plugin configuration in that it doesn’t process imported modules (that might have dependencies themselves) correctly?

Please advise

Hello @appdcs,

could you give us access to the complete project code so we can take a look, please?