ui-demo-package-library

https://www.npmjs.com/package/ui-demo-package-library

ui-demo-package-library

This is a demo library, it has two components. One is button component with two variants and other is card component with two variants.

Button Variants

Card Variants

You can import this library into your project using the command

npm i ui-demo-package-library

Here is the demo for using this UI Library

Let's start by creating a fresh Vue project

vue create projectname

cd into the project directory

cd projectname 

In this project install this UI Library

npm i ui-demo-package-library

Now you can directly import the components from library using

import component_name from 'ui-demo-package-library/src/lib-components/component_name.vue

Replace code of src/App.vue by

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <VueButton class="outlined" text="Click ME"/>
  </div>
</template>

<script>

import VueButton from 'ui-demo-package-library/src/lib-components/Vue-button.vue';

export default {
  name: 'App',
  components: {
    VueButton
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Output would look something like this

If you change class with background like this

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <VueButton class="background" text="Click ME"/>
  </div>
</template>

<script>

import VueButton from 'ui-demo-package-library/src/lib-components/Vue-button.vue';

export default {
  name: 'App',
  components: {
    VueButton
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Output would look something like this

similarly you can import card component as well