Vue 3 : Receiving "r.default is not a constructor" error while using Vue Material

Question

I am working on Vue3 project with vue-material library. But after using the vue-material library I am receiving the following error r.default is not a constructor. I traced it back and found that its coming from ./node_module/vue-material/dist/components/index.js. I have no idea what I am doing wrong. My main.js file code is as follows

import {createApp,} from 'vue'
import { MdButton} from 'vue-material/dist/components'
import 'vue-material/dist/vue-material.min.css'
import 'vue-material/dist/theme/default.css'
import App from './App.vue'

const app = createApp(App)
app.use(MdButton)
app.mount("#app");

I tried every possible combination as I could.

Furthermore, if I remove the second import import { MdButton} from 'vue-material/dist/components' and the line app.use(MdButton). Everything is working as expected just that vue-material, I guess, only causing the problem. I did some research on the topic and found this https://github.com/vuematerial/vue-material/issues/312 but have no idea how to use it.

I will appreciate your help on this issue?

Tetrastich

perhaps vue-material isn't yet ready for vue3 ... I know vuetify isn't! - this issue basically states that vue-material is NOT yet ready for vue3 – Knapsack

Is there any other alternative to use with vue3, as I have already progressed with this version of Vue? – Tetrastich

I've looked at many material design frameworks for vue - not one seems to be vue3 ready - you're welcome to keep searching – Knapsack

I believe you, I think I should restart my project with Vue 2. That's the only option I see, a great lesson learnt. Thanks Jaromanda X for helping me out. – Tetrastich

try adding the composition API for vue2 - then at least you'll be able to do much of the code in vue3 style – Knapsack

github.com/vuematerial/vue-material/issues/2277 Not ready for vue 3, just like vuetify, I found ready is PrimeVue and Element – Dimarco

Answer 1

I tried as well. But isnt working with Vue3.

You have to use Vue2. As also explained in their docs "Vue Material Documentation assumes that you are comfortable with Vue.js 2.5+. If you are new to Vue.js, it might not be the best idea to learn from here as your first step - grasp the basics then come back. The Vue.js website is the greatest documentation source for you to start with."

https://vuematerial.io/getting-started/

Numerary