create-vp
v0.0.1
Published
Vue Plugin Boilerplate
Downloads
10
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.
Features
- Create Vue components, directives on install.
- Create or inject Vuex stores.
- Add runtime accessors to Vue instances.
- Configured Storybook integration
- Nuxt plugin support
- TypeScript type definitions
Installation
git clone https://github.com/f/vue-plugin-boilerplate.git
cd vue-plugin-bolierplate
./press
press.sh
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-querystring-state
Your plugin class name? (pascal case like VuePlugin): VueQuerystringState
Your plugin accesor name? (like "helloWorld" to be used as this.$helloWorld): queryStringState
Your plugin's GitHub address? (like "f/vue-plugin-boilerplate"): f/vue-querystring-state
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
Vue Plugin Boilerplate provides you many cool features you can provide in your plugin.
src/vue-****.js
This is the main file of your plugin, I don't recommend you to replace its initialization script. So let's start with options
.
The options
You may need to provide some optional keys to your user. The accessorName
is an option by default since your plugin accessor may have some conflict with another plugin. Allowing users to replace it makes it flexible.
constructor(options = {}) {
const defaults = {
// This is your plugin's options. It will be accessible with this.options
accessorName: '$myPlugin'
};
//...
}
Custom Components, Directives etc.
You'll see the part below on src/vue-****.js
:
// Delete this line if your plug-in doesn't provide any components
Vue.component('VuePlugin', VuePluginComponent);
// Vue.directive('your-custom-directive', customDirective);
This part registers your own global components once. So you can inject another things like directives, mixins, etc. (Directive part is commented out but you can enable it)
Instance Methods
You may want to create some custom methods in your user's Vue instances. The boilerplate allows you to create some custom methods or getters, etc.
You can see the following code in src/vue-****.js
:
// Some instance methods that you can access from this.$myPlugin
world() {
return 'world';
}
This method will be accessible in your user's instances:
<script>
export default {
mounted() {
console.log(this.$yourPluginAccessor.world())
}
}
</script>
Injecting into Vuex
One of the best features of this plugin is to inject some custom stores into your user's Vuex store.
You'll see the following code (commented-out) in src/vue-****.js
:
if (store && !store._modules.get(['yourCustomStore'])) {
store.registerModule('yourCustomStore', customVuexStore);
}
You can change yourCustomStore
to anything you want, you can also register multiple stores.
This is a simple example that you can inject to Vuex store.
if (store && !store._modules.get(['counter'])) {
store.registerModule('counter', {
state: {
counter: 0
},
getters: {
counter: state => state.counter
},
actions: {
increment({ commit }) {
commit('increment')
}
},
mutations(state) {
state.counter = state.counter + 1;
}
});
}
⚠️ If you want to inject your user's store, please uncomment these lines and add
vuex
to dependencies by runningyarn add -P vuex
andyarn add vuex
.
Examples
In examples
file, you'll see a folder named generic
. 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:generic
to view your plugin running.
License
MIT