Complete Vue3 Component Library Template

An all-in-one solution for crafting Vue3-based Component Library with Vite, complete with built-in GitHub Pages live-demo deployment, automated test-and-build workflows, and Vite-powered unit test configuration, including coverage analysis and a README.md template for your library.

Live Demo · Report Bug · Request Feature

Table of Contents

1. Project Setup
2. Repository and Automation Setup
3. Publishing to NPM
4. Usage
5. Roadmap
6. Contributing
7. License
8. Contact

[!NOTE] This README.md mainly contains information about how to setup the project and the repository/automation. However, it is also made for users to use this README as a template as well. So, it is highly recommended to edit this README.md file to make it your own. For feature requests, don't hesitate to open an issue!

Project Setup

1. Package Name Setup: Change the package name (every occurrence) in package.json and vite.config.ts files.

2. Write your plugin: Start writing your plugin in the src/myComponentLibrary folder. As a default, entry will be from its index.ts file. You may change the folder name and/or the entry file name, but don't forget to update the vite.config.ts file accordingly.

3. ChangesetBot: Add Changeset Bot and configure. (See Changeset Bot for details)

Repository and Automation Setup

1. Workflow Permissions for Automation: Visit https://github.com/[username]/[REPOSITORY]/settings/actions and add workflow permissions (read & write)..

2. Enable Github Pages: If you have a live-demo to showcase your package, create a new branch called 'gh-pages' for github pages deployment. (The index.html will be built and deployed to this branch seperately from your plugin build. See deploy.yaml workflow, delete the file if you don't need it.)

3. Branch Security Rules: Visit https://github.com/[username]/[REPOSITORY]/settings/branches and set the branch protection rules for main and gh-pages branches. (Requiring pull request reviews before merging to main branch is highly recommended.)

4. Codeowners: Edit the codeowners file to add your team members as codeowners. (See CODEOWNERS for details)

Publishing to NPM

Don't forget to update the version number in package.json before publishing or use changeset-bot to update version number.

Before publishing test your package, it is recommended to test it locally. First build your package with npm run build and create a symbolic link.

1. Navigate to your package's root directory

npm link

2. Switch to the project where you want to test your package locally

cd your-test-project-directory
npm link your-package-name

[!NOTE] > npm link creates a symbolic link between your package and your test project. So if you build your package again, it will be reflected in your test project as well.

3. Ensure that your package version in package.json adheres to semantic versioning
4. Log in to your NPM account

npm login

5. Run the following command to publish your package

npm publish

Congratulations! Your package is now published to npm 🎉

Usage

For user to edit this section:

Use this space to show useful examples of how a project can be used. Additional screenshots, code examples and demos work well in this space. You may also link to more resources.

For more examples, please refer to the Documentation

Roadmap

For user to edit this section:

• Add vite configuration
• Add vitest
• Add workflows
• Add vitepress documentation
• Some other stuff
  • Stuff 1
  • Stuff 2

Contributing

Contributions to the project is highly appreciated. If you have any suggestions/questions/requests please consider opening an issue. If you want to contribute to the project, fixing an open issue is greatly recommended and appreciated. To see the all contribution rules please check the contribution rules.

License

Distributed under the MIT License. See LICENSE for more information.

Contact

For user to edit this section:

Your Name - @your_twitter - [email protected]

Project Link: https://github.com/your_username/repo_name