A Lightweight, Simple and Responsive Component Framework


Vectre is a set of lightweight, simple and responsive [Vue](https://vuejs.org/) components based on [Spectre CSS](https://picturepan2.github.io/spectre/index.html) ## Features * Clean, responsive and consistent design system * Only about 14kb min+gzip (plus ~9kb Spectre CSS) * Supports Typescript and TSX * Improved performance of most components thanks to [functional components]("https://vuejs.org/v2/guide/render-function.html#Functional-Components") * Optimized for legacy browsers * Focus on usability and rapid development * Tree shaking ## Documentation The documentation is in a separate [repository](https://github.com/vectrejs/docs) and the source code is an excellent example of using the framework. Browse [online documentation here](https://vectrejs.github.io/docs/#/pages/getting-started) ## Quick Start You need [Vue](https://vuejs.org/) version 2.5+. ### Install via npm or yarn ```bash npm install --save spectre.css @vectrejs/vectre #OR yarn add spectre.css @vectrejs/vectre ``` ### Import and use Vectre All components ```javascript import Vue from 'vue'; import 'spectre.css/dist/spectre-exp.css'; import 'spectre.css/dist/spectre-icons.css'; import 'spectre.css/dist/spectre.css'; import { VectrePlugin } from '@vectrejs/vectre'; Vue.use(VectrePlugin); ``` or specific components ```javascript import Vue from 'vue'; import 'spectre.css/dist/spectre.css'; import { Tag, Modal } from '@vectrejs/vectre'; Vue.component('Tag', Tag); Vue.component('Modal', Modal); ``` ### CDN Alternatively, you can download or reference the script and the stylesheet in your HTML: ```html ``` ## Browser support At present, Vectre supports all modern browsers and additionally has a build to support older browsers like IE 10 or Safari 9 ```html ``` ## Playgrounds * All in One [https://codesandbox.io/s/vectre-all-in-one-yff7f](https://codesandbox.io/s/vectre-all-in-one-yff7f) * Individual Components [https://codesandbox.io/s/vectre-components-4pd1n](https://codesandbox.io/s/vectre-components-4pd1n) * CDN [https://codepen.io/vatson_ua/pen/RwavXQY](https://codepen.io/vatson_ua/pen/RwavXQY) ## Links * [Spectre CSS](https://picturepan2.github.io/spectre/index.html) * [Typescript](https://www.typescriptlang.org/) * [TSX](https://github.com/wonderful-panda/vue-tsx-support/blob/v2/README.md) * Tree Shaking [Webpack](https://webpack.js.org/guides/tree-shaking/) and [Rollup](https://rollupjs.org/guide/en/#tree-shaking) ## Social * [Discord Chat](https://discord.gg/5a6Y8X2) * [Twitter](https://twitter.com/vectrejs) * [Issues](https://github.com/vectrejs/vectre/issues) ## License Code released under [MIT](https://github.com/vectrejs/vectre/blob/master/LICENSE) license.