如何在Vue.js 3组件中引入blade-ui-kit？

我在Blade模板中使用blade-ui-kit时一切正常，但在App.vue组件中却无法正常运行。已经查阅了blade-ui-kit的全部文档，但未找到相关引入说明。以下是我的代码：

App.vue #

<template>
  <div v-if="showText" class="container">
    <p>{{ title }} - {{ age }}</p>
    <button class="btn btn-sm btn-success" v-on:click="age++">Increase age</button>
    <button class="btn btn-sm btn-danger" v-on:click="age--">Increase age</button>

    <button class="changeTitle btn btn-sm btn-warning" @click="changeTitle">Change Title</button><br>
    <div class="contButton">
      <button class="btn btn-sm btn-info show" @click="showText = !showText">show</button>
    </div>
    <div>
      <ul>
        <li v-for="book in books">
          <h3>{{ book.title }}</h3>
          <p>{{ book.author }}</p>
        </li>
      </ul>
    </div>
  </div>
  <div v-else class="container">
    {{ title }}
    <div class="contButton">
      <button class="btn btn-sm btn-info show" @click="showText = !showText">show</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'The Final Empire',
      age: 45,
      showText: false,
      books: [
        { title: 'name of the wind', author: 'Patrick Rothfuss', isFav: false },
        { title: 'the way of king', author: 'Brandon Sanderson', isFav: false },
        { title: 'the final empire', author: 'Patrick Rothfuss', isFav: false }
      ]
    }
  },
  methods: {
    changeTitle(){
      this.title = 'The new title!'
    },
  }
}
</script>

app.js #

import './bootstrap';

import { createApp } from 'vue'

import App from './vue/App.vue'

createApp(App).mount("#app")

请问该如何在Vue.js 3的App.vue组件中正确引入blade-ui-kit？

首先明确：blade-ui-kit是Laravel Blade的服务端组件库，它的组件依赖Blade模板引擎解析渲染，Vue作为前端框架无法直接识别Blade语法（如<x-xxx>标签）。需根据你的需求选择对应方案：

场景1：仅使用blade-ui-kit的样式 #

如果只是需要用组件附带的CSS类（比如btn系列样式），只需在Vue项目中导入对应的样式文件：

1. 在app.js中添加样式导入：

import './bootstrap';
import { createApp } from 'vue'
import App from './vue/App.vue'
// 导入blade-ui-kit的样式文件
import '@protonemedia/laravel-blade-ui-kit/dist/css/blade-ui-kit.css';

createApp(App).mount("#app")

2. 之后即可在App.vue中继续使用btn等类名，样式会正常生效。

场景2：需要使用交互组件（模态框、下拉菜单等） #

由于blade-ui-kit是服务端组件，无法直接在Vue中使用，推荐使用Headless UI（与blade-ui-kit同源的前端组件库，支持Vue）替代，步骤如下：

1. 安装依赖：

npm install @headlessui/vue

2. 在app.js中全局注册需要的组件（或按需导入）：

import './bootstrap';
import { createApp } from 'vue'
// 按需导入需要的组件
import { Menu, Dialog } from '@headlessui/vue'
import App from './vue/App.vue'

const app = createApp(App)
// 全局注册组件
app.component('Menu', Menu)
app.component('MenuButton', Menu.Button)
app.component('MenuItems', Menu.Items)
app.component('MenuItem', Menu.Item)
app.component('Dialog', Dialog)
app.component('DialogPanel', Dialog.Panel)

app.mount("#app")

3. 在App.vue中直接使用这些Vue组件：

<template>
  <!-- 示例：下拉菜单组件 -->
  <Menu>
    <MenuButton class="btn btn-sm btn-info">Open Menu</MenuButton>
    <MenuItems class="absolute bg-white rounded shadow p-2">
      <MenuItem>
        <a href="#" class="block px-4 py-2 hover:bg-gray-100">Item 1</a>
      </MenuItem>
      <MenuItem>
        <a href="#" class="block px-4 py-2 hover:bg-gray-100">Item 2</a>
      </MenuItem>
    </MenuItems>
  </Menu>
</template>

补充说明 #

如果必须使用blade-ui-kit的服务端组件，可以将这些组件渲染在Blade模板中，通过Vue的事件总线、Pinia状态管理或直接DOM操作来实现Vue与Blade组件的交互。

内容的提问来源于stack exchange，提问作者Jeferson Pereira Nascimento