Install maz-ui

  npm i maz-ui -S

# or yarn add maz-ui

On demand

Import only the components you need

With the help of babel-plugin-component, we can import components we actually need, making the project smaller than otherwise.

First, install babel-plugin-component:

  npm install babel-plugin-component -D

# or yarn add babel-plugin-component -D

Babel config

  // babel.config.js

module.exports = {
  plugins: [
    [
      'component',
      {
        libraryName: 'maz-ui',
        styleLibraryName: 'css'
      }
    ]
  ]
};

Nuxt.JS babel config

  // nuxt.config.js

module.exports = {
  plugins: [
    ...
    './plugins/maz-ui'
    ...
  ],
  build: {
    babel: {
      plugins: [
        [
          'component', {
            libraryName: 'maz-ui',
            styleLibraryName: 'css'
          }
        ]
      ]
    }
  }
}

Now import component as you want

  /*
* main.js
* ./plugin/maz-ui/index.js for Nuxt.JS
*/

import Vue from 'vue'
import { MazBtn, MazInput } from 'maz-ui'

Vue.use(MazBtn)
Vue.use(MazInput)

/* or
 * Vue.component(MazBtn.name, MazBtn)
 * Vue.component(MazInput.name, MazInput)
 */

All components you can import

  import Vue from 'vue'
import {
  MazAvatar,
  MazBottomSheet,
  MazBtn,
  MazBtnGroup,
  MazCard,
  MazCarousel,
  MazCheckbox,
  MazCollapse,
  MazDialog,
  MazDraggableList,
  MazDropdown
  MazDropzone,
  MazFlex,
  MazGallery,
  MazImg,
  MazInput,
  MazInputTags,
  MazList,
  MazListItem,
  MazLoader,
  MazPagination,
  MazPicker,
  MazPlotly,
  MazProgressBar,
  MazPhoneNumberInput,
  MazRadio,
  MazReadMore,
  MazResponsiveMenu,
  MazSearch,
  MazSelect,
  MazSlider,
  MazSidebar,
  MazSpinner,
  MazStepper,
  MazSwitch,
  MazTabsBar,
  MazTabsContent,
  MazTabsContentItem,
  MazTransitionExpand,
} from 'maz-ui'

Vue.use(MazAvatar)
Vue.use(MazBottomSheet)
Vue.use(MazBtn)
Vue.use(MazBtnGroup)
Vue.use(MazCard)
Vue.use(MazCarousel)
Vue.use(MazCheckbox)
Vue.use(MazCollapse)
Vue.use(MazDialog)
Vue.use(MazDraggableList)
Vue.use(MazDropdown)
Vue.use(MazDropzone)
Vue.use(MazFlex)
Vue.use(MazGallery)
Vue.use(MazImg)
Vue.use(MazInput)
Vue.use(MazInputTags)
Vue.use(MazList)
Vue.use(MazListItem)
Vue.use(MazLoader)
Vue.use(MazPagination)
Vue.use(MazPicker)
Vue.use(MazPlotly)
Vue.use(MazProgressBar)
Vue.use(MazPhoneNumberInput)
Vue.use(MazRadio)
Vue.use(MazReadMore)
Vue.use(MazResponsiveMenu)
Vue.use(MazSearch)
Vue.use(MazSelect)
Vue.use(MazSlider)
Vue.use(MazSidebar)
Vue.use(MazSpinner)
Vue.use(MazStepper)
Vue.use(MazSwitch)
Vue.use(MazTabsBar)
Vue.use(MazTabsContent)
Vue.use(MazTabsContentItem)
Vue.use(MazTransitionExpand)