Skip to content

vectrejs/vectre

Repository files navigation

A Lightweight, Simple and Responsive Component Framework


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

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

Links

Social

License

Code released under MIT license.