vue-npm-library-example

This library is an exemple of how to create and build a modern web component library using Vue3 + Typescript. The build is ready to create all necessary files to deploy on npm and use components with types helpers.

How it works

• [x] Build tool Vite
• [x] Build TS tool rollup-plugin-typescript2
• [x] Framework Vue 3
• [x] Type system TypeScript / Vue tsc
• [x] Vue SFC Setup script setup
• [x] Publish repository npm

Quick start

You need Vue.js version 3.2+

1. Install via npm

npm install vue-npm-library-example

2. Import

You can import the library depending on the project needs. Import all components globaly, import single components globaly or import individual component where it's used.

• Declare all components globaly.

  main.ts

  import VueLibraryLoader from 'vue-npm-library-example';
  
  const app = createApp(App);
  app.use(VueLibraryLoader);

• Declare global components (Treeshaking).

  main.ts

  import { HelloWorld } from 'vue-npm-library-example';
  
  const app = createApp(App);
  app.component('HelloWorld', HelloWorld);

• Declare components localy.

  *.vue

  <script setup lang="ts">
  import { HelloWorld } from 'vue-npm-library-example';
  </script>

3. Use components

Implement each component normally on the template section *.vue

<template>
<HelloWorld msg="Message test" color="green" />
</template>

TIP: Typescript + Volar

Typescript provides helpers to implement component props and validates incorrect or undefined values.

Repository

Check out the code on github, agrisom/vue-npm-library-example.

Collaborators

Changelog

All notable changes to this project will be documented in this file.

[0.0.4] - 2022-09-14

• Added new component UITable

View github changelog

[0.0.3] - 2022-09-01

• Fix README style

View github changelog

[0.0.2] - 2022-09-01

• Completes README.md

View github changelog

[0.0.1] - 2022-09-01

• First commit.
• Added project configurations.
• Added component example (HelloWorld).