Awesome

<a href="https://vectrejs.github.io/docs/"> <img width="240" src="https://vectrejs.github.io/docs/img/logo.3b9b2fe3.svg" /> </a> A Lightweight, Simple and Responsive Component Framework <a href="https://github.com/vectrejs/vectre/issues"> <img src="https://img.shields.io/github/issues/vectrejs/vectre"> </a> <a href="https://www.npmjs.org/package/@vectrejs/vectre"> <img src="https://img.shields.io/npm/v/@vectrejs/vectre.svg"> </a> <a href="https://www.npmjs.org/package/@vectrejs/vectre"> <img src="https://img.shields.io/david/vectrejs/vectre"> </a> <a href="https://npmcharts.com/compare/@vectrejs/vectre?minimal=true"> <img src="https://img.shields.io/npm/dm/@vectrejs/vectre.svg"> </a> <a href="https://unpkg.com/@vectrejs/vectre/dist/"> <img src="https://img.badgesize.io/https:/unpkg.com/@vectrejs/vectre/dist/vectre.min.js?label=gzip%20size%3A%20JS&compression=gzip"> </a> <a href="https://unpkg.com/spectre.css/dist/spectre.min.css"> <img src="https://img.badgesize.io/https:/unpkg.com/spectre.css/dist/spectre.min.css?label=gzip%20size%3A%20CSS&compression=gzip"> </a> <a href="LICENSE"> <img src="https://img.shields.io/badge/License-MIT-yellow.svg"> </a>

Vectre is a set of lightweight, simple and responsive Vue components based on Spectre CSS

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
Optimized for legacy browsers
Focus on usability and rapid development
Tree shaking

Documentation

The documentation is in a separate repository and the source code is an excellent example of using the framework.

Browse online documentation here

Quick Start

You need Vue version 2.5+.

Install via npm or yarn

npm install --save spectre.css @vectrejs/vectre
#OR
yarn add spectre.css @vectrejs/vectre

Import and use Vectre

All components

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 <img src="https://img.shields.io/badge/-tree%20shaking-green" />

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:

<!-- jsDelivr --->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/spectre.css/dist/spectre.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/spectre.css/dist/spectre-icons.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/spectre.css/dist/spectre-exp.min.css">
<script src="https://cdn.jsdelivr.net/npm/@vectrejs/vectre/dist/vectre.min.js"></script>

<!-- unpkg --->
<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css">
<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
<script src="https://unpkg.com/@vectrejs/vectre/dist/vectre.min.js"></script>

Browser support

At present, Vectre supports all modern browsers and additionally has a build to support older browsers like IE 10 or Safari 9

<!-- jsDelivr --->
<script src="https://cdn.jsdelivr.net/npm/@vectrejs/vectre/dist/vectre.legacy.min.js"></script>

<!-- unpkg --->
<script src="https://unpkg.com/@vectrejs/vectre/dist/vectre.legacy.min.js"></script>

Playgrounds

All in One https://codesandbox.io/s/vectre-all-in-one-yff7f
Individual Components https://codesandbox.io/s/vectre-components-4pd1n
CDN https://codepen.io/vatson_ua/pen/RwavXQY

Social

License <img src="https://img.shields.io/github/license/vectrejs/vectre?color=red&label=%20" />

Code released under MIT license.