Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/f/vue-plugin-boilerplate
Vue Plugin Boilerplate
https://github.com/f/vue-plugin-boilerplate
boilerplate vue vue-boilerplate vue-plugin
Last synced: 20 days ago
JSON representation
Vue Plugin Boilerplate
- Host: GitHub
- URL: https://github.com/f/vue-plugin-boilerplate
- Owner: f
- License: mit
- Created: 2019-08-03T21:30:36.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T02:04:07.000Z (almost 2 years ago)
- Last Synced: 2024-09-17T12:08:42.878Z (2 months ago)
- Topics: boilerplate, vue, vue-boilerplate, vue-plugin
- Language: JavaScript
- Homepage: https://github.com/f/vue-plugin-boilerplate/wiki/Step-by-Step-Guide
- Size: 4.55 MB
- Stars: 123
- Watchers: 5
- Forks: 9
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
---
> This plugin is created for **plugin creators** and the **devs who want to make their own work open-sourced**. Enjoy!
This is a package for creating Vue plugins easily. You'll be able to create your own open-sourced plugin easily with great features.
🚀 Open step by step guide to create a robust and well-designed Vue Plugin
## Features
- Create Vue **components**, **directives** on install.
- Create or **inject Vuex stores**.
- **Add runtime accessors** to Vue instances.
- Configured Storybook integration.
- **Nuxt** compatible.
- **TypeScript** type definitions.
- Including a **Kitchensink**
## Installation
### Using **GitHub Template Repository**
GitHub provides a feature to create repositories from another repositories. You can simply click the botton above to create a new project from this project structure.
Click following button to create a new project from this one or click the one above.
It will ask you the repository name and it will be automatically cloned.
### Using Shell
```bash
git clone --depth 1 https://github.com/f/vue-plugin-boilerplate.git vue-my-cool-plugin
cd vue-my-cool-plugin
```
### `press` Command
For both **shell** and **GitHub Template** you should run the `press` command.
`press` file is a script to rewrite some words in this package according to your changes. When you run it you'll be prompted as following:
```
Your plugin name? (with dahshes like vue-plugin-boilerplate): vue-my-cool-plugin
Your plugin class name? (pascal case like VuePlugin): VueMyCoolPlugin
Your plugin accesor name? (like "helloWorld" to be used as this.$helloWorld): cool
Your plugin's GitHub address? (like "f/vue-plugin-boilerplate"): f/vue-my-cool-plugin
Heya! Your package vue-querystring-state is ready to develop!
Pressing created some leftovers. You can run following commands to remove them now:
...
```
And your package will be ready to develop!
Do not forget to edit `package.json` details!
## Plugin Development
**[Please read Wiki to deep dive into plugin development.](https://github.com/f/vue-plugin-boilerplate/wiki)**
## Examples
In `examples` file, you'll see a folder named `kitchensink`. You can rename or duplicate it to show many features to your user.
## Storybook
Your plugin includes a `.storybook` folder includes the **showcase** of your plugin, you can simply start adding your stories of your components.
**Storybook will also be really useful and is recommended on development stage of your plugin.**
## Plugin Testing
This boilerplate doesn't have an automated test yet. But this boilerplate provides a nice `examples` directory runs with **Poi**.
You can make them run `yarn example:kitchensink` to view your plugin running.
### License
MIT