Vue3中Oruga UI组件无法正常使用，报useComputedClass相关错误

问题复现 #

使用以下组件代码：

<template>
  <o-field label="Name">
    <o-input v-model="name" />
  </o-field>
</template>

<script>
export default {
  data() {
    return {
      name: ''
    };
  }
};
</script>

会触发如下错误：

useComputedClass-T7fME1R-.mjs:43 Uncaught (in promise) Error: useComputedClass must be called within a component setup function.
 at useComputedClass (useComputedClass-T7fME1R-.mjs:43:18)
     at eval (Field.vue_vue_type_script_setup_true_lang-01NbaSBk.mjs:267:143)
     at ReactiveEffect.eval [as fn] (reactivity.esm-bundler.js:946:44)
     at ReactiveEffect.run (reactivity.esm-bundler.js:210:19)
     at get value [as value] (reactivity.esm-bundler.js:955:106)
     at triggerComputed (reactivity.esm-bundler.js:229:19)
     at get dirty [as dirty] (reactivity.esm-bundler.js:184:11)
     at instance.update (runtime-core.esm-bundler.js:5415:18)
     at callWithErrorHandling (runtime-core.esm-bundler.js:321:32)
     at flushJobs (runtime-core.esm-bundler.js:512:9)

当前项目配置（main.js） #

import { createApp } from 'vue';
import App from './App.vue';
import Oruga from '@oruga-ui/oruga-next';
import VueTelInput from 'vue-tel-input';
import 'vue-tel-input/vue-tel-input.css';
import axios from 'axios';
import 'bulma/css/bulma.css';

const globalOptions = {
    mode: 'auto',
  };

const app = createApp(App);

// Set axios to $http for global use
app.config.globalProperties.$http = axios;

// Enable Vue Devtools
if (process.env.NODE_ENV === 'development') {
    app.config.devtools = true;
  }
app.use(VueTelInput, globalOptions);
app.use(Oruga);
app.mount("#app");

原因分析 #

这个错误核心是Oruga内部的useComputedClass组合式API函数被调用时，未处于Vue组件的setup函数上下文环境中，大概率由以下原因导致：

• @oruga-ui/oruga-next属于旧测试版本，存在与Vue3正式版的兼容性问题
• 未正确配置Oruga的主题依赖，导致组件内部逻辑无法正常运行
• Vue版本与Oruga版本不匹配（比如Vue3.0.x搭配了要求Vue3.2+的Oruga版本）

解决方案 #

方案1：升级到Oruga正式版并配置正确主题 #

1. 卸载旧测试包：

npm uninstall @oruga-ui/oruga-next

2. 安装正式版Oruga及Bulma主题：

npm install @oruga-ui/oruga @oruga-ui/theme-bulma

3. 修改main.js配置，替换Oruga的引入和初始化：

import { createApp } from 'vue';
import App from './App.vue';
import Oruga from '@oruga-ui/oruga';
import { bulmaConfig } from '@oruga-ui/theme-bulma';
import VueTelInput from 'vue-tel-input';
import 'vue-tel-input/vue-tel-input.css';
import axios from 'axios';

const globalOptions = {
    mode: 'auto',
  };

const app = createApp(App);

app.config.globalProperties.$http = axios;

if (process.env.NODE_ENV === 'development') {
    app.config.devtools = true;
}
app.use(VueTelInput, globalOptions);
// 使用Bulma主题配置初始化Oruga
app.use(Oruga, bulmaConfig);
app.mount("#app");

方案2：匹配Vue与Oruga版本（坚持用旧测试包） #

• 查看@oruga-ui/oruga-next的package.json中peerDependencies字段，安装对应要求的Vue3版本
• 删除node_modules和package-lock.json，重新执行npm install

方案3：临时切换组件语法测试 #

将组件改为setup语法糖，验证是否为选项式API的兼容问题：

<template>
  <o-field label="Name">
    <o-input v-model="name" />
  </o-field>
</template>

<script setup>
import { ref } from 'vue';
const name = ref('');
</script>

内容的提问来源于stack exchange，提问作者Triana Gee