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
[!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!
-
Package Name Setup: Change the package name (every occurrence) in
package.jsonandvite.config.tsfiles. -
Write your plugin: Start writing your plugin in the
src/myComponentLibraryfolder. As a default, entry will be from itsindex.tsfile. You may change the folder name and/or the entry file name, but don't forget to update thevite.config.tsfile accordingly. -
ChangesetBot: Add Changeset Bot and configure. (See Changeset Bot for details)
-
Workflow Permissions for Automation: Visit
https://github.com/[username]/[REPOSITORY]/settings/actionsand add workflow permissions (read & write).. -
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.)
-
Branch Security Rules: Visit
https://github.com/[username]/[REPOSITORY]/settings/branchesand set the branch protection rules formainandgh-pagesbranches. (Requiring pull request reviews before merging to main branch is highly recommended.) -
Codeowners: Edit the codeowners file to add your team members as codeowners. (See CODEOWNERS for details)
Don't forget to update the version number in
package.jsonbefore 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.
- Navigate to your package's root directory
npm link- Switch to the project where you want to test your package locally
cd your-test-project-directory
npm link your-package-name[!NOTE] >
npm linkcreates 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.
- Ensure that your package version in
package.jsonadheres to semantic versioning - Log in to your NPM account
npm login- Run the following command to publish your package
npm publishCongratulations! Your package is now published to npm 🎉
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
For user to edit this section:
- [x] Add vite configuration
- [x] Add vitest
- [x] Add workflows
- [x] Add vitepress documentation
- [ ] Some other stuff
- [ ] Stuff 1
- [ ] Stuff 2
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.
Distributed under the MIT License. See LICENSE for more information.
For user to edit this section:
Your Name - @your_twitter - email@example.com
Project Link: https://github.com/your_username/repo_name