Currently, I am experimenting with Vue Storybook (Vue Js 3) along with the UI Framework primevue. Even though everything seems to be set up correctly without any errors, my component is not rendering in the browser as expected.
According to the guidelines, all I need to do is create a .vue file and a .stories.js file to showcase my component.
Main.js
import {createApp} from 'vue';
import App from './App.vue';
import PrimeVue from 'primevue/config';
const app = createApp(App);
app.component('Breadcrumb', Breadcrumb);
app.use(PrimeVue,{ripple: true});
List.vue
<template>
<div>
<Breadcrumb :home="home" :model="items" />
</div>
</template>
<script>
import Breadcrumb from "primevue/breadcrumb";
export default {
name: "List",
components: {
Breadcrumb,
},
data() {
return {
home: {
icon: "pi pi-home",
to: "/",
},
items: [
{ label: "Computer" },
{ label: "Notebook" },
{ label: "Accessories" },
{ label: "Backpacks" },
{ label: "Item" },
],
};
},
};
</script>
List.stories.js
import List from "./List.vue";
export default {
title: "List",
component: List,
};
// export const actionsData = {
// onPinTask: action("pin-task"),
// onArchiveTask: action("archiveTask"),
// };
const Template = (args, { argTypes }) => ({
components: { List },
props: Object.keys(argTypes),
template:
'<List />',
});
export const ListDefault = Template.bind({});
Can anyone pinpoint where the problem might be occurring? It's visible in the Storybook Sidemenu. https://i.sstatic.net/ynzjU.png