jsdbroughton / vue-atlas

A Vue.js 2 UI component library.

atlas

Documentation and examples at https://vue-atlas.com

Installation and usage

$ 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.

// 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

// 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'

Create or modify your project's vue.config.js and point css.loaderOptions.sass.prependData to node_modules/vue-atlas/src/variables.scss. This will provide imported components with the color definitions that they need. It's just color definitions. It's a small file. It will also give your components access to

If you want access to the atlas color variables 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

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "@/../node_modules/vue-atlas/src/style/_colors.scss";`
      }
    }
  }
}