Skip to content
This repository has been archived by the owner on Nov 30, 2020. It is now read-only.

Import every component without importing them individually #627

Open
hykilpikonna opened this issue Jun 3, 2020 · 3 comments
Open

Import every component without importing them individually #627

hykilpikonna opened this issue Jun 3, 2020 · 3 comments

Comments

@hykilpikonna
Copy link

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
Copy link
Author

hykilpikonna commented Jun 3, 2020

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
Copy link
Contributor

related #386

@tsndr
Copy link

tsndr commented Nov 16, 2020

It seems like this project was abandoned, very sad 😔

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

3 participants