Using material components with Vue.js

I used to work on angular 4 with material components and not on angular material for creating my own custom components on top of material.

For my personal work, i tried to integrate material components with Vue.js

As a framework, Angular 4 has a good CLI and thereby either we can import the material packages inside cli.json or in styles.scss.

In Angular 4 it comes with productive cli (angular-cli), so its quite easy to install the material components npm packages

Whereas on Vue.js, we don’t have the configuration as Angular 4 has.

Create a sass file named styles.scss on the root of the project.
I have seen developers used to import the styles on main.js.

But i prefer to go in angular 4 approach. There by include the styles.scss in your webpack.base.conf.js.

entry: { app: [‘./src/main.js’, ‘./src/styles.scss’] }

Now install the material components and sass-loaders

yarn add -D material-components-web
yarn add sass-loader node-sass

and import the sass file into styles.scss

@import “material-components-web/material-components-web”;

Now we need to configure the sass-loader to understand the @material syntax and make the changes under build/util.js

return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { indentedSyntax: true, includePaths: [path.resolve(__dirname, '../node_modules')] }),
    scss: generateLoaders('sass',{includePaths: [path.resolve(__dirname, '../node_modules')]}),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }

Lets try with our mdc-button

<button class="foo-button mdc-button mdc-button--raised">
  Button
</button>

Now run the app by using the command npm run dev.

Vue.js with material components.

For ripple effects, import the mdcripple in your component

import {MDCRipple} from '@material/ripple';

and on mounted method initialize the MDCRipple with the DOM element foo-button.

mounted() {
const ripple = new MDCRipple(document.querySelector('.foo-button'));
}

Vue.js with material component