Ionic Vue Storybook v7

IonicButton.stories.ts

import type { Meta, StoryObj } from "@storybook/vue3";

import IonicButton from "./IonicButton.vue";
import { IonApp } from "@ionic/vue";

const meta = {
  title: "Example/IonicButton",
  component: IonicButton,
  decorators: [() => ({ template: "<ion-app><story /></ion-app>" })],
  tags: ["autodocs"],
  argTypes: {
    onClick: { action: "clicked" },
  },
  args: { label: "test button" }, // default value
} satisfies Meta<typeof IonicButton>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Primary: Story = {
  args: {
    label: "BUTTON NAME - Primary",
  },
};

export const Secondary: Story = {
  args: {
    label: "BUTTON NAME - Secondary",
  },
};

IonicButton.vue

<template>
  <ion-button type="button" @click="onClick" 
    >{{ label }}
  </ion-button>
</template>

<script lang="ts" setup>
import { IonButton } from "@ionic/vue";

const props = withDefaults(
  defineProps<{
    /**
     * The label of the button
     */
    label: string;

  }>(),
  { label: 'test button' }
);

const emit = defineEmits<{
  (e: "click", id: number): void;
}>();


const onClick = () => {
  emit("click", 1);
};
</script>

preview.ts

import { Preview, setup } from "@storybook/vue3";

/* Core CSS required for Ionic components to work properly */
import '@ionic/vue/css/core.css';

/* Basic CSS for apps built with Ionic */
import '@ionic/vue/css/normalize.css';
import '@ionic/vue/css/structure.css';
import '@ionic/vue/css/typography.css';

/* Optional CSS utils that can be commented out */
import '@ionic/vue/css/padding.css';
import '@ionic/vue/css/float-elements.css';
import '@ionic/vue/css/text-alignment.css';
import '@ionic/vue/css/text-transformation.css';
import '@ionic/vue/css/flex-utils.css';
import '@ionic/vue/css/display.css';

/* Theme variables */
import '../src/theme/variables.css';
import { IonicVue } from "@ionic/vue";

setup((app) => {
  app.use(IonicVue)
});

const preview: Preview = {
  parameters: {
    actions: { argTypesRegex: "^on[A-Z].*" },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
  },
};

export default preview;