Vue-material: import md plugins as components

[waotzi]

I think it would be great if it were possible to add the plugins as components

So instead of having a centralized file with all md plugins

import { MdButton, MdContent, MdTabs } from 'vue-material/dist/components'

Vue.use(MdButton)
Vue.use(MdContent)
Vue.use(MdTabs)

you could just add what one needs for each component

import { MdButton, MdContent, MdTabs } from 'vue-material/dist/components'
export default {
  components: {
    MdButton,
    MdContent,
    MdTabs 
  }
}

its the same way the quasar framework manages components and i think it is a nice approach since you have more control what plugins to use for each component instead of adding them globally

[Samuell1]

I think this is possible in new version no?

[waotzi]

@Samuell1 when i try to do it i get this error:

[Vue warn]: Error in render: "TypeError: e.component is not a function"

[marcosmoura]

You can do this right now importing the component from the source, but you will have to import the dependencies manually. I will change that soon.

[jkosonen]

Any news on this? @marcosmoura

[riccardogiorato]

import md as components should decrease the bundle size of the app am I right @marcosmoura ?
Can you help us or the rest of the team support this?

How can we help?

[Samuell1]

@Giorat this will be supported in next release

[naimlatifi5]

Is this fixed yet ? :)

[JamesCoyle]

Any update on this? I thought this was how it worked until I searched for this issue as thats how Vue components are supposed to be implemented.

[ortonomy]

Same as above, I'm trying to do this and getting

[Vue warn]: Error in render: "TypeError: e.component is not a function"

Vue version: 2.5.17

[Epistol]

A year later, nothing ?

[margi212]

Any update? @marcosmoura
Facing below error with Vue Version 4.1.2

[Vue warn]: Error in render: "TypeError: e.component is not a function"

[tekook]

Why is this so difficult? This should be standard to import the components via imports in vue-components.

[nathanael540]

Error in render: "TypeError: e.use is not a function"

Is Related?

[mora200217]

Same problem. Trying to import component with "vue-class-component"

import Component from "vue-class-component";
import { MdIcon, MdButton } from 'vue-material/dist/components'; 

@Component({
  components: {
    MdIcon, 
   MdButton
}
})

Console throwing:

[Vue warn]: Error in render: "TypeError: e.component is not a function. (In 'e.component(s.default.name,s.default)', 'e.component' is undefined)"

Environment / Setup

• vue: 2.6.11
• typescript: 3.9.7
• vue-class-component. 7.2.3
• vue-material: 1.0.0-beta-15

Any new updates?

[goddas]

Any updates on this?

[MuhaddiMu]

It's been three years and there's no update on this issue. It's time to move on to Vuetify :(

[ortonomy]

Or just don't use Material design. It's only a few later and I already can't stand most interfaces that use it.

[tekook]

It's been three years and there's no update on this issue. It's time to move on to Vuetify :(

Moved on to vuetify long ago. The library is much easier to use and they listen to requests 👍

Or just don't use Material design. It's only a few later and I already can't stand most interfaces that use it.

Do you have some alternatives which offer the same amount of features?

[ortonomy]

@tekook

Do you have some alternatives which offer the same amount of features?

https://athemes.com/collections/vue-ui-component-libraries/

Element, Ant, Bulma, Chakra, Semantic if you must use a pre-built..

it's still just as easy to build your own... Tailwind CSS, etc.. other opinions are available of course