0

I have a website based on Vue framework and webpack.

I came across this css framework developed by Google (Material Components Web) where you can directly get started using a cdn or an npm package. It worked extremely well for a simple html/javascript based website. But, I am having issues setting it up for the Vue project.

There are other wrappers available for Vue framework like Veutify and Vue Material. But, it comes with lot of additional stuff like the grid layout which I don't want the developers to follow as we are already using a flex layout. I only want the component library.

So, is there a way use the Material Components Web with the Vue framework?

Deepak Terse
  • 652
  • 8
  • 30

2 Answers2

0

I didn't get the Material Components Web working with the Vue framework. But I did found another light-weight material design framework i.e. Material Design Lite.

Note: It is not specific to any framework. It lets you add Material Design look to your website developed in any framework

You can easily get started with a wide variety of options like cdn, bower, npm or even by downloading the files.

Deepak Terse
  • 652
  • 8
  • 30
0

Material Components Web has modular architecture. Each component or API is distributed as a separate package. It means that you can use them separately, although there are some dependencies.

Also there is "root" package - material-components-web, which just references all other packages.

By default, when you add a package, it will not be included in your app. You'll need to import component's SCSS and optionally JavaScript. Basically like you would use any other component.

Reference this Vue app template as an example. As you can see here, it references only subset of MDC's components/APIs.

Konstantin Lyakh
  • 781
  • 6
  • 15