matsp / material-components-vue

Material Design styled components for Vue.js
https://matsp.github.io/material-components-vue
MIT License
303 stars 44 forks source link

Import every component without importing them individually #627

Open hykilpikonna opened 4 years ago

hykilpikonna commented 4 years ago

Is your feature request related to a problem? Please describe. Libraries like Vuetify and Element UI can be imported with only one import statement, however, I cannot find how to import this library using only one import statement.

Describe the solution you'd like Create an index.js with all the components so that this library can be imported with only one import statement. Like this one.

Describe alternatives you've considered Or provide a js script to import all of the components one by one

hykilpikonna commented 4 years ago

Current Solution:

import Vue from 'vue'

// @ts-ignore Material Design _button
import _button from 'material-components-vue/dist/button'
import 'material-components-vue/dist/button/button.min.css'
Vue.use(_button)

// @ts-ignore Material Design _card
import _card from 'material-components-vue/dist/card'
import 'material-components-vue/dist/card/card.min.css'
Vue.use(_card)

// @ts-ignore Material Design _checkbox
import _checkbox from 'material-components-vue/dist/checkbox'
import 'material-components-vue/dist/checkbox/checkbox.min.css'
Vue.use(_checkbox)

// @ts-ignore Material Design _chips
import _chips from 'material-components-vue/dist/chips'
import 'material-components-vue/dist/chips/chips.min.css'
Vue.use(_chips)

// @ts-ignore Material Design _dialog
import _dialog from 'material-components-vue/dist/dialog'
import 'material-components-vue/dist/dialog/dialog.min.css'
Vue.use(_dialog)

// @ts-ignore Material Design _drawer
import _drawer from 'material-components-vue/dist/drawer'
import 'material-components-vue/dist/drawer/drawer.min.css'
Vue.use(_drawer)

// @ts-ignore Material Design _elevation
import _elevation from 'material-components-vue/dist/elevation'
import 'material-components-vue/dist/elevation/elevation.min.css'
Vue.use(_elevation)

// @ts-ignore Material Design _fab
import _fab from 'material-components-vue/dist/fab'
import 'material-components-vue/dist/fab/fab.min.css'
Vue.use(_fab)

// @ts-ignore Material Design _floatingLabel
import _floatingLabel from 'material-components-vue/dist/floating-label'
import 'material-components-vue/dist/floating-label/floating-label.min.css'
Vue.use(_floatingLabel)

// @ts-ignore Material Design _formField
import _formField from 'material-components-vue/dist/form-field'
import 'material-components-vue/dist/form-field/form-field.min.css'
Vue.use(_formField)

// @ts-ignore Material Design _gridList
import _gridList from 'material-components-vue/dist/grid-list'
import 'material-components-vue/dist/grid-list/grid-list.min.css'
Vue.use(_gridList)

// @ts-ignore Material Design _iconButton
import _iconButton from 'material-components-vue/dist/icon-button'
import 'material-components-vue/dist/icon-button/icon-button.min.css'
Vue.use(_iconButton)

// @ts-ignore Material Design _icon
import _icon from 'material-components-vue/dist/icon'
Vue.use(_icon)

// @ts-ignore Material Design _imageList
import _imageList from 'material-components-vue/dist/image-list'
Vue.use(_imageList)

// @ts-ignore Material Design _layoutGrid
import _layoutGrid from 'material-components-vue/dist/layout-grid'
import 'material-components-vue/dist/layout-grid/layout-grid.min.css'
Vue.use(_layoutGrid)

// @ts-ignore Material Design _lineRipple
import _lineRipple from 'material-components-vue/dist/line-ripple'
import 'material-components-vue/dist/line-ripple/line-ripple.min.css'
Vue.use(_lineRipple)

// @ts-ignore Material Design _linearProgress
import _linearProgress from 'material-components-vue/dist/linear-progress'
import 'material-components-vue/dist/linear-progress/linear-progress.min.css'
Vue.use(_linearProgress)

// @ts-ignore Material Design _list
import _list from 'material-components-vue/dist/list'
import 'material-components-vue/dist/list/list.min.css'
Vue.use(_list)

// @ts-ignore Material Design _menu
import _menu from 'material-components-vue/dist/menu'
import 'material-components-vue/dist/menu/menu.min.css'
Vue.use(_menu)

// @ts-ignore Material Design _notchedOutline
import _notchedOutline from 'material-components-vue/dist/notched-outline'
import 'material-components-vue/dist/notched-outline/notched-outline.min.css'
Vue.use(_notchedOutline)

// @ts-ignore Material Design _radio
import _radio from 'material-components-vue/dist/radio'
import 'material-components-vue/dist/radio/radio.min.css'
Vue.use(_radio)

// @ts-ignore Material Design _ripple
import _ripple from 'material-components-vue/dist/ripple'
import 'material-components-vue/dist/ripple/ripple.min.css'
Vue.use(_ripple)

// @ts-ignore Material Design _select
import _select from 'material-components-vue/dist/select'
import 'material-components-vue/dist/select/select.min.css'
Vue.use(_select)

// @ts-ignore Material Design _shape
import _shape from 'material-components-vue/dist/shape'
import 'material-components-vue/dist/shape/shape.min.css'
Vue.use(_shape)

// @ts-ignore Material Design _slider
import _slider from 'material-components-vue/dist/slider'
import 'material-components-vue/dist/slider/slider.min.css'
Vue.use(_slider)

// @ts-ignore Material Design _snackbar
import _snackbar from 'material-components-vue/dist/snackbar'
import 'material-components-vue/dist/snackbar/snackbar.min.css'
Vue.use(_snackbar)

// @ts-ignore Material Design _switch
import _switch from 'material-components-vue/dist/switch'
import 'material-components-vue/dist/switch/switch.min.css'
Vue.use(_switch)

// @ts-ignore Material Design _tabs
import _tabs from 'material-components-vue/dist/tabs'
import 'material-components-vue/dist/tabs/tabs.min.css'
Vue.use(_tabs)

// @ts-ignore Material Design _textField
import _textField from 'material-components-vue/dist/text-field'
import 'material-components-vue/dist/text-field/text-field.min.css'
Vue.use(_textField)

// @ts-ignore Material Design _theme
import _theme from 'material-components-vue/dist/theme'
import 'material-components-vue/dist/theme/theme.min.css'
Vue.use(_theme)

// @ts-ignore Material Design _topAppBar
import _topAppBar from 'material-components-vue/dist/top-app-bar'
import 'material-components-vue/dist/top-app-bar/top-app-bar.min.css'
Vue.use(_topAppBar)
tychenjiajun commented 4 years ago

related #386

tsndr commented 3 years ago

It seems like this project was abandoned, very sad 😔