Pns-component-library NPM

PNS Component Library Vue 3 + Vite

This library provides some ready-to-use responsive components with Vue 3. Developers can directly use the components without setting the non-web UI and UX (all included in the library).

How to Set Up

You have already created a vue project.

Step 1:

npm install pns-component-library

Step 2:

In your main.js, import the library and use it for your app instance.

  import { createApp } from 'vue';
  import PNSComponentLibray from "pns-component-library";

  const app = createApp(App);
  app.use(PNSComponentLibray);

Step 3

Now you should be able to access the components, directives and icons in the library.

Components:

SimplifiedNotification
InputBox
SingleSelector
ResponsiveButton
Checkbox
Radio (support group radio)
WholePageErrorPopup

Directives:

component-loading

Composables:

useWindowSize
FloatingNotification

Icons:

If npm install pns-component-library, and want to use any following icons:

iconsMap.iconName is the URL or Data URI (Uniform Resource Identifier) of the corresponding svg icon. Eg.

  <template>
    <img :src = "iconsMap['eye_icon']" />
  </template>
  <script>
 import { iconsMap } from "pns-component-library
  export default{
    data(){
      return{
        iconsMap,
      }
    }
  }
  </script>