Oruga UI not working correctly. I cannot use any of the elements, am I doing something wrong? (Vue 3)

Question

Whenever I use a oruga UI component, even if it's a really simple thing, it will cause errors in my vue app.

For example, the following code:

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

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

Causes this error:

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)

Not sure why. This is what my main.js file looks like:

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");

Answer 1

I see this error as well, when I upgrade my application to vue.js version 3.4, while with version 3.3.13, the error doesn't occur.

I've opened an issue in GitHub: https://github.com/vuejs/core/issues/10001

You might keep an eye on that to be informed about when it might be solved. In the meantime, I recommend using vue 3.3.13

npm install --save [email protected]

EDIT:

The problem will likely be resolved in Oruga. There is already a draft pull request which should do that when ready and merged.

EDIT 2:

Oruga was patched in the meantime, so it is now possible to use it with newer versions of vue.js