https://github.com/nvms/vue-atlas
A Vue.js 2 UI component library.
https://github.com/nvms/vue-atlas
component-library javascript ui vue vue2 vuejs vuejs-components vuejs2
Last synced: 2 months ago
JSON representation
A Vue.js 2 UI component library.
- Host: GitHub
- URL: https://github.com/nvms/vue-atlas
- Owner: nvms
- License: mit
- Archived: true
- Created: 2018-07-07T05:01:47.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-03-13T10:13:19.000Z (over 2 years ago)
- Last Synced: 2025-01-10T11:00:39.005Z (11 months ago)
- Topics: component-library, javascript, ui, vue, vue2, vuejs, vuejs-components, vuejs2
- Language: Vue
- Homepage:
- Size: 9.16 MB
- Stars: 180
- Watchers: 7
- Forks: 22
- Open Issues: 42
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue - vue-atlas - A Vue.js 2 UI component library. ` 📝 a year ago` (Frameworks [🔝](#readme))
- awesome-vue - vue-atlas - A library of beautiful Vue components. (Components & Libraries / Frameworks)
- awesome-vue-zh - Vue地图集 - 基于Atlassian设计指南的组件库. (构架 / 组件集合)
- awesome-vue - vue-atlas ★48 - A library of beautiful Vue components. (Frameworks / Component Collections)
- awesome-vue - vue-atlas - A library of beautiful Vue components. (Frameworks / Component Collections)
README
# atlas
Documentation and examples at [https://vue-atlas.com](https://vue-atlas.com)
## Installation and usage
```bash
$ yarn add vue-atlas
# or
$ npm install vue-atlas
```
## Usage
### Import everything
The minified stylesheet is roughly 200kb (~30kb gzipped). If this worries you, please see below how to import
only the components you require for a smaller bundle.
```javascript
// Wherever your Vue entrypoint is.
import Va from 'vue-atlas'
import 'vue-atlas/dist/vue-atlas.css'
Vue.use(Va, 'en') // or 'es', 'fr', 'ru'
```
### Import something specific
```javascript
// You will need sass-loader and node-sass for this.
import { VaDatepicker } from 'vue-atlas/src/Datepicker'
Vue.use(VaDatepicker)
// The Datepicker component will check for the presence
// of the VaLocale prototype to decide how to display content.
Vue.prototype.VaLocale = 'fr' // default 'en'
```
If you want to use the [atlas color variables](https://github.com/nvms/vue-atlas/blob/master/src/style/_colors.scss)
in your own project's components, modify your project's `vue.config.js` and point
`css.loaderOptions.sass.prependData` to `node_modules/vue-atlas/src/style/_colors.scss`.
`vue.config.js`
```javascript
module.exports = {
css: {
loaderOptions: {
sass: {
prependData: `@import "@/../node_modules/vue-atlas/src/style/_colors.scss";`
}
}
}
}
```