Skip to content

自動引入元件

使用 unplugin-vue-components 來自動引入元件,將 HeadlessUiFloatResolver 新增到 vite.config.js

js
import Vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { HeadlessUiFloatResolver } from '@headlessui-float/vue'

export default {
  plugins: [
    Vue(),
    Components({
      resolvers: [
        HeadlessUiFloatResolver(),
      ],
    }),
  ],
}

然後就可以不用手動引入元件,直接在模板裡使用 <Float> 元件了:

vue
<template>
  <Float>
    ...
    <FloatArrow />
  </Float>
</template>

Released under the MIT License.