How to add new theme or update config in nuxt3

[jd-solanki]

Hi,

I am new to Nuxt and want to use v-tooltip. I tried adding my new theme but failed with error and later I just tried simple config but it wasn't updating in nuxt3. Here's my config:

export default defineNuxtConfig({
  buildModules: [
    ['v-tooltip/nuxt', {
      offset: [0, 52],
      disposeTimeout: 500000,
    }],
  ],
})

With the above config I am trying like below:

<button v-tooltip="'You have new messages.'">
  View
</button>

but offset & disposeTimeout options aren't working 🤔

Thanks.

[zknicker]

It might not be the exact solution you were looking for, but I was able to accomplish modifying the default theme using a plugin.

/plugin/floater.client.ts

import FloatingVue from "floating-vue";

export default defineNuxtPlugin(() => {
    FloatingVue.options.themes.tooltip.delay.show = 0;
    FloatingVue.options.themes.tooltip.delay.hide = 1000;

    return;
});

This is editing the global config, so your actual use of the v-tooltip will be using this theme setting.

e.g.

<div v-tooltip="My tooltip with a huge hide delay!" />

More info (..."Or directly on FloatingVue"...): https://floating-vue.starpad.dev/guide/config.html#default-values

[bjassael]

Could not make the customization work in Nuxt 3 either. It seems it is not implemented yet (source file).
As a workaround, a custom plugin can be created to import the package into the project, as suggested in this answer.

[LdDl]

It might not be the exact solution you were looking for, but I was able to accomplish modifying the default theme using a plugin.

/plugin/floater.client.ts

import FloatingVue from "floating-vue";

export default defineNuxtPlugin(() => {
    FloatingVue.options.themes.tooltip.delay.show = 0;
    FloatingVue.options.themes.tooltip.delay.hide = 1000;

    return;
});

This is editing the global config, so your actual use of the v-tooltip will be using this theme setting.

e.g.

<div v-tooltip="My tooltip with a huge hide delay!" />

More info (..."Or directly on FloatingVue"...): https://floating-vue.starpad.dev/guide/config.html#default-values

Thanks. Works for my case at least

My example (Nuxt 3):
In project directory plugins create file floating-vue.client.ts

import FloatingVue from 'floating-vue'

export default defineNuxtPlugin((nuxtApp) => {
    FloatingVue.options.themes['dark-theme'] = {
        ...FloatingVue.options.themes.tooltip,
        '$resetCss': true,
        placement: 'left',
    }
    nuxtApp.vueApp.use(FloatingVue) // <-- I am not sure if we need this
    return
});

Contents of nuxt.config.ts

// ...
buildModules: [
        'floating-vue/nuxt',
]
// ...

And the component usage:

// ...
<button v-tooltip="{
  content: 'Roll your eyes colors',
  theme: 'dark-theme'
}">d</button>
// ...
<style>
    .v-popper--theme-dark-theme .v-popper__inner {
        background: #ff0000;
    }

    .v-popper--theme-dark-theme .v-popper__arrow-outer {
        border-color: #00ff00;
    }
</style>

[k-utsumi]

I would like to know how to set boundary in the plugin file.

This work in prop, but not work in plugin file.
Raises the document is not defined error.

in plugins/floating-vue.ts REF

import FloatingVue from 'floating-vue';

export default defineNuxtPlugin(() => {
  const defaultSettings = {
    ...FloatingVue.options.themes.tooltip,

    triggers: ['hover', 'focus', 'click'], // touch → click / NOTE: DevTools touch dees'nt fire
    overflowPadding: 16,
    autoBoundaryMaxSize: true,
  };
  FloatingVue.options.themes.tooltip = defaultSettings;

  const themes = {
    'main-tooltip': {
      ...defaultSettings,
      boundary: document.querySelector('#main'), // → ERROR!!
    },
  };
  Object.entries(themes).forEach(([key, value]) => {
    FloatingVue.options.themes[key] = value;
  });
});

[yoshrubin]

I would like to know how to set boundary in the plugin file.

This work in prop, but not work in plugin file. Raises the document is not defined error.

in plugins/floating-vue.ts REF

import FloatingVue from 'floating-vue';

export default defineNuxtPlugin(() => {
  const defaultSettings = {
    ...FloatingVue.options.themes.tooltip,

    triggers: ['hover', 'focus', 'click'], // touch → click / NOTE: DevTools touch dees'nt fire
    overflowPadding: 16,
    autoBoundaryMaxSize: true,
  };
  FloatingVue.options.themes.tooltip = defaultSettings;

  const themes = {
    'main-tooltip': {
      ...defaultSettings,
      boundary: document.querySelector('#main'), // → ERROR!!
    },
  };
  Object.entries(themes).forEach(([key, value]) => {
    FloatingVue.options.themes[key] = value;
  });
});

rename your file to floating-vue.client.ts

[geferon]

Hey, it's been a while, is this any way we can get this supported please?
The file still has a TODO, has had it for ages

floating-vue/packages/floating-vue/nuxt.mjs

Line 15 in 1985776

// @TODO cutomization

[mrleblanc101]

I used the plugin approach:

import FloatingVue from 'floating-vue';

export default defineNuxtPlugin(() => {
    FloatingVue.options.themes.danger = {
        $extend: 'tooltip',
    };
    FloatingVue.options.themes.disabled = {
        $extend: 'tooltip',
    };
});

It worked great inside my Nuxt Layer, but the theme is not recognized inside an App that extend the remote Layer.
If I console.log('FloatingVue.options.themes', FloatingVue.options.themes); inside my Layer and the .playground, I get my themes.

But the same console.log inside an app that extend this layer returns only the default themes.

[mrleblanc101]

Fixed by changing to this:

import FloatingVue from 'floating-vue';

FloatingVue.options.themes.danger = {
    $extend: 'tooltip',
};
FloatingVue.options.themes.disabled = {
    $extend: 'tooltip',
};

export default defineNuxtPlugin(() => {});

The empty export default defineNuxtPlugin(() => {}); is important otherwise you get an error.
No the theme work properly inside the App that extends the remote Layer.