Call app.use for plugin in the component itself in vue 3-CodePudding

I'm building a component library that uses the v-tooltip plugin. So I need to install and use the plugin in the component itself instead using it globally with app.use(). I've read so many posts, and what I've tried so far doesn't work for my case.

I know that I can access the app in the Composition API as:

import VTooltip from 'v-tooltip';
import 'v-tooltip/dist/v-tooltip.css';

const App = getCurrentInstance().appContext.app;
App.use(VTooltip);

but that doesn't work, and I get this warning: [Vue warn]: Component is missing template or render function.

Any help would be greatly appreciated.

CodePudding user response：

to use this plugin in the component itself, you can try to do something like this:

<template>
  <button v-tooltip="/* your code */"> Custom button </button>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import VTooltip from "v-tooltip";

export default defineComponent({
  directives: {
    tooltip: VTooltip.VTooltip,
    "close-popover": VTooltip.VClosePopover,
    "v-popover": VTooltip.VPopover,
  },
});
</script>

CodePudding user response：

Thanks @Rago, you gave me an idea with the directives. The solution was really simple in this case... At the moment v-tooltip is undergoing a package rename (to floating-vue), so with the new plugin you can decide if you want to use a component or a directive.

This is the solution:

<template>
...
<span v-tooltip="help" >?</span>
...
</template>

<script>
import 'floating-vue/dist/style.css';
import { VTooltip } from 'floating-vue';

export default defineComponent({
  directives: {
    tooltip: VTooltip,
  },
  ...
});
</script>

And for the Composition API you just import it, and Vue will automatically detect the directive if you follow the naming convention - putting v in front of the directive:

import 'floating-vue/dist/style.css';
import { VTooltip } from 'floating-vue';

const vTooltip = VTooltip;