Using floating-vue with Storybook for Vue 3

[bashovski]

Hi, I've been trying to use floating-vue with Storybook, but I was unable to import it to one of the storybook pre-generated setup modules .storybook/preview.js.

I've looked into the other solutions on StackOverflow and GH, but those seem outdated as Storybook's vue3 module doesn't export the app anymore, as the simplest solution was to just invoke app.use(FloatingVue) in that case.

Is there something that I've overlooked whilst trying to integrate Storybook? Thanks

[x-ray-s]

// preview.js
import { app } from '@storybook/vue3';
import FloatingVue from 'floating-vue';
app.vue(FloatingVue)

works for me. "@storybook/vue3": "^6.5.15"

[antoineLZCH]

Hello, In your component you can simply use it like this :

<script setup lang="ts">
  import 'floating-vue/dist/style.css';
  import { Dropdown } from 'floating-vue';
</script> 

<template>
  <Dropdown ...parameters>
     <template #popper>Content...</template>
  </Dropdown>
</template>

Works with "@storybook/vue3: "^6.5.16"

[mathiash98]

For storybook v7^^:

// preview.js
import "floating-vue/dist/style.css";
import { setup } from "@storybook/vue3";
import FloatingVue from "floating-vue";
setup((app) => {
  app.use(FloatingVue);
});