Vue Component Library

Overview

The Vue Component Library is a project skeleton designed for creating a Vue component library using Vue (V3), Rollup, and TypeScript. It includes features such as Storybook for creating and showcasing components, as well as Jest for testing Vue components.

Features

• Vue (V3): Utilizes the latest version of Vue for building the component library.
• Rollup: Uses Rollup as a module bundler to compile the components.
• TypeScript: Enables the use of TypeScript for better type checking and developer experience.
• Storybook: Provides a tool for creating and demonstrating the components in the library.
• Jest: Allows for testing of the Vue components in the library.

Installation

To install the Vue Component Library, follow these steps:

1. Make sure you have an NPM account and are logged in using the npm login command.
2. Update the name field in the package.json file to reflect your NPM package name in your private or public NPM registry.
3. Run the following command to build the component library before publishing it:

npm run build

4. Install the component library by running the following command:

npm install <your-package-name>

5. Next, install the peer dependencies of the component library:

npm install

6. Finally, you can use the components in your project with the following code snippet:

import { SampleComponent } from 'harvey-vue-component-library';

// Usage of the component

For a live example, you can check out this Code Sandbox.

Summary

The Vue Component Library is a project skeleton for creating a Vue component library. It leverages Vue (V3), Rollup, and TypeScript to provide developers with an easy way to create, test, and demonstrate their Vue components. With features like Storybook and Jest, developers can showcase their components and ensure they function correctly. Installation is straightforward, and the library can be easily published and hosted via NPM.