@aveonline/ui-vue

ui ecosystem vue

The home base for Aveonline design system, ui-vue provides essential design resources for our developers to use in the Aveonline-branded interfaces that they create.

Before started

Verify version vue: 3.2.37

For usage with tailwind config, install:

npm i autoprefixer cssnano postcss postcss-import tailwindcss @tailwindcss/forms -D

Getting started

Working with all config from this library or only components availables

npm i @aveonline/ui-vue

Usage with tailwind

Import things into your JS app from the @aveonline/ui-vue package.

import { Test } from '@aveonline/ui-vue'

tailwind.config.js

const tailwindConfig = require('@aveonline/ui-vue/tailwind.config.js')
const config = { ...tailwindConfig }
module.exports = config

or

module.exports = {
  content: ['./node_modules/@aveonline/ui-vue/dist/*.{mjs,js}']
}

postcss.config.js

const postcssConfig = require('@aveonline/ui-vue/postcss.config.js')
const config = { ...postcssConfig }
module.exports = config

Usage css

Import things into your JS app from the @aveonline/ui-vue package.

/* global.css or tailwind.css local */
@tailwind base;
@tailwind components;
@tailwind utilities;

// import this lines at main.ts or root
import './global.css' // Reference tailwind local
import '@aveonline/ui-vue/reset.css' // Only not usage tailwind
import '@aveonline/ui-vue/tokens.css' // Required
import '@aveonline/ui-vue/tailwind.css' // Required

Example usage

<!-- Class from library -->
<div class="bg-letter-default">
  <p class="text-letter-subdued">Hello human</p>
</div>

Developing @aveonline/ui-vue

Developing locally against Storybook is easy; run npm run storybook.

npm i

Run npm link to watch the entire project for changes and recompile on the fly.

Tests

Run npm run test to execute all unit test components.

We use vitest and testing-library/vue for unit/integration tests and will soon use Chromatic for visual regression testing.

Open Storybook

npm run dev

Create tokens

npm run build:tokens

ui-vue production

npm run build:lib

Storybook production

npm run build:storybook