A modern VueJS design library built with Typescript and SASS

by Vue.js Examples

neon

Neon is a modern VueJS design library built with Typescript and SASS.

View Demo View Github

Installation

Install with NPM:

npm install @aotearoan/neon

or yarn:

yarn add @aotearoan/neon

Usage

Javascript/Typescript

Import components and supporting classes like so:

import { Component, Vue } from 'vue-property-decorator';
import { NeonLogo } from '@aotearoan/neon';

@Component({
  components: {
    NeonLogo,
  },
})
export default class App extends Vue {}

SASS

First select a theme:

  • smooth
  • classic
  • sharp

To use a theme without any customization simply import the basic theme file, e.g. to import the classic theme:

@import '~@aotearoan/neon/themes/classic';

If, however you would like to override/customize the theme then you need to include the following:

.app {
  &.neon-theme--classic {
    // override colors, palettes and other basic variables here BEFORE importing the theme, e.g. $neon-color-primary: #bada55
    @import '~@aotearoan/neon/themes/classic/theme';
    // include custom app SASS here (you can use neon's defined variables, mixins and functions)
    &.neon-mode--dark {
      // override dark mode specific variables here, e.g. $neon-border-color: #bada55
      @import '~@aotearoan/neon/themes/classic/dark';
      // include custom app dark mode SASS here (you can use neon's defined variables, mixins and functions)
    }
    &.neon-mode--light {
      // override light mode specific variables here, e.g. $neon-border-color: #bada55
      @import '~@aotearoan/neon/themes/classic/light';
      // include custom app light mode SASS here (you can use neon's defined variables, mixins and functions)
    }
  }
}

Finally, the theme and mode (light/dark) need to be set on the document, e.g. to set the classic theme and dark mode:

<html class="app neon neon-theme--classic neon-mode--dark">

GitHub