Skip to content
On this page

自動引入元件

使用 unplugin-vue-components 來自動引入元件:

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> 元件了:

<template>
  <Float>
    ...
    <FloatArrow />
  </Float>
</template>
自動引入元件 has loaded