Akryum / floating-vue

💬 Easy tooltips, popovers, dropdown, menus... for Vue
https://floating-vue.starpad.dev/
MIT License
3.26k stars 333 forks source link

Global Configuration Nuxt3 Vue3 #1001

Closed JokerMartini closed 6 months ago

JokerMartini commented 7 months ago

Where do i define a global configuration file when using the Nuxt3 setup (module)? Does it go somewhere in the nuxt.config.js file? In my case i want to place the tooltips at the bottom. I wasn't really clear on how or where to do this based on the docs.

export const config: FloatingVueConfig = {
  // Themes
  themes: {
    tooltip: {
      // Default tooltip placement relative to target element
      placement: 'bottom',
      // Delay (ms)
      delay: {
        show: 500,
        hide: 0,
      },
    },
  },
}

My nuxt.config.js

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: ["@nuxtjs/tailwindcss", "@pinia/nuxt", "floating-vue/nuxt"],
  css: ["@/assets/css/tailwind.css"],
});
JokerMartini commented 7 months ago

I tried this and it didn't work...

import FloatingVue from "floating-vue";

FloatingVue.options.themes.tooltip.placement = "bottom";

export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: ["@nuxtjs/tailwindcss", "@pinia/nuxt", "floating-vue/nuxt"],
  css: ["@/assets/css/tailwind.css"],
});
JokerMartini commented 6 months ago

any get this working?

Akryum commented 6 months ago

Place this code in a Nuxt plugin so it is run inside your application (not in Nuxt config file):

import FloatingVue from "floating-vue";

FloatingVue.options.themes.tooltip.placement = "bottom";