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?