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

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).