@shapla/vue-components NPM

Shapla Vue Components

A collection of reusable components (using Vue 3 Composition API) for Vue 3.

Installation

Install using npm package manager

npm i @shapla/vue-components

or using yarn package manager

yarn add @shapla/vue-components

Usage

Here we export all components script as ES module and all style as SCSS mixins. So you need to import SCSS mixin to load style of component and also need to import ES module and register as vue component.

For example, to use button and progress bar components:

Styles (SCSS)

// Add the following line at top of your scss file
@use "@shapla/vue-components/src/index.scss" as shapla;

@include shapla.button;
@include shapla.progress;
// Include other mixins as your requirement

Javascript Instantiation

import { ShaplaButton, ShaplaProgress } from "@shapla/vue-components";

export default {
  name: "Hello",

  components: {
    ShaplaButton,
    ShaplaProgress,
  },
};

<shapla-progress
  :value="1"
  :max="10"
  :striped="true"
  :animated="true"
  size="small"
  theme="primary"
/>
<shapla-button @click="handleClick">button text</shapla-button>