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