Used Material Design UI for Vue2

Step 1. Install packages

$ yarn add @fortawesome/fontawesome-free <-- This is optional.
$ yarn add material-design-icons-iconfont <-- This is optional.
$ yarn add vuetify

Step 2. Add Configuration in main.js

• main.js ( This file is created by vue-cli. )

main.js

import Vuetify from 'vuetify';
import colors from 'vuetify/es5/util/colors';
import 'vuetify/dist/vuetify.css';
import 'material-design-icons-iconfont/dist/material-design-icons.css'; <-- This is optional.
import '@fortawesome/fontawesome-free/css/all.css'; <-- This is optional.

...
...
...
Vue.use(Vuetify, {
  theme: {
    primary: colors.blue.darken2,
    secondary: '#424242',
    accent: '#82B1FF',
    error: '#FF5252',
    info: '#2196F3',
    success: '#4CAF50',
    warning: '#FFC107',
  },
});
...
...
...

Step 3. Modified Webpack Configuration Files

  module: {
    rules: [
      ...
      ...
      ...
      {
        test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)(\?.+)?$/,
        include: [
          path.resolve('src'),
          path.resolve('node_modules/vuetify/'), <-- Add this.
          path.resolve('node_modules/material-design-icons-iconfont/'), <-- This is optional.
          path.resolve('node_modules/@fortawesome/'), <-- This is optional.
        ],
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10000,
            },
          },
        ],
      },
      ...
      ...
      ...
    ],
  },

  module: {
    rules: [
      ...
      ...
      ...
      {
        test: /\.(sa|sc|c)ss$/,
        include: [
          path.resolve('src'),
          path.resolve('node_modules/vuetify/'), <-- Add this.
          path.resolve('node_modules/material-design-icons-iconfont/'), <-- This is optional.
          path.resolve('node_modules/@fortawesome/'), <-- This is optional.
        ],
        use: [
          'vue-style-loader',
          'css-loader',
        ],
      },
      ...
      ...
      ...
    ],
  },