自動引入元件

使用 unplugin-vue-components 來自動引入元件，將 HeadlessUiFloatResolver 新增到 vite.config.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>

自動引入元件 #

自動引入元件