Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/frederikwagner/vue-component-library
A vue component library that can be used in your applications or as a boilerplate to create your own component library.
https://github.com/frederikwagner/vue-component-library
component-library components npm npm-package npm-template vue vue-components vue-library vuejs vuejs-components
Last synced: 1 day ago
JSON representation
A vue component library that can be used in your applications or as a boilerplate to create your own component library.
- Host: GitHub
- URL: https://github.com/frederikwagner/vue-component-library
- Owner: frederikwagner
- License: mit
- Created: 2019-05-02T08:44:47.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2019-05-16T09:41:31.000Z (over 5 years ago)
- Last Synced: 2024-05-29T20:02:37.936Z (4 months ago)
- Topics: component-library, components, npm, npm-package, npm-template, vue, vue-components, vue-library, vuejs, vuejs-components
- Language: CSS
- Homepage: https://www.vuecomponentlibrary.com
- Size: 1.15 MB
- Stars: 5
- Watchers: 1
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vue component library
This project is dedicated to those who want to create their own vue component library or use a standard vue component library in their web applications.
## [Documentation](https://www.vuecomponentlibrary.com)
Read the [docs](https://www.vuecomponentlibrary.com) to learn how to use the vue component library in your web applications or how to create your own component library.
---
## Using the component library
The component library comes with different package builds allowing you to import the library in a variety of ways.
### Directly in the browser
Drop the library in with a `` tag alongside Vue to globally install all components:
```html
<div id="app">
<base-button></base-button>
</div><script src="https://unpkg.com/vue">
new Vue({ el: '#app' })
```
Or, if you only want to use a small subset of components, drop them in individually:
```html
new Vue({ el: '#app' })
```
### In a module system
Install the library with NPM:
```bash
npm install vue-component-library
```You can choose to import the library globally, which will make all of the components available across your project (but will also increase the bundle size of your application), or you can import individual components locally.
#### Register the library globally
Register the library as a plugin to globally install all components:
```js
import VueComponentLibrary from 'vue-component-library'Vue.use(VueComponentLibrary)
```#### Import components locally
Or, import components individually for local registration:
```js
import { BaseButton, BaseInput } from 'vue-component-library'export default {
components: { BaseButton, BaseInput }
}
```---
## Acknowledgments
This project is built on top of [Chris Fritz's](https://github.com/chrisvfritz) [hello-vue-components project](https://github.com/chrisvfritz/hello-vue-components) and heavily inspired by his _must-read_ [vue-enterprise-boilerplate](https://github.com/chrisvfritz/vue-enterprise-boilerplate) which is the gold-standard for Vue SPA projects. [This talk](https://youtu.be/7lpemgMhi0k) by Chris Fritz explains many of the patterns used and advocated in this project, and comes highly recommended - his energy is amazing!