Skip to content
JavaScript Shell Vue Smarty
Branch: master
Clone or download
Latest commit 5b121cf Aug 6, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.storybook Initial version Aug 4, 2019
dist Initial version Aug 4, 2019
examples/kitchensink generic to kitchensink Aug 5, 2019
nuxt Initial version Aug 4, 2019
resources Delete create Aug 5, 2019
src update plugin Aug 5, 2019
.babelrc update plugin Aug 5, 2019
.eslintrc.js Initial version Aug 4, 2019
.gitignore Initial version Aug 4, 2019
.prettierrc Initial version Aug 4, 2019
.travis.yml Initial version Aug 4, 2019
LICENSE Initial version Aug 4, 2019
README.md Update README.md Aug 5, 2019
README.tpl.md Initial version Aug 4, 2019
package.json generic to kitchensink Aug 5, 2019
press typo Aug 6, 2019
webpack.config.js Initial version Aug 4, 2019
yarn.lock update plugin Aug 5, 2019

README.md


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 Kitcehsink

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

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.

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

You can’t perform that action at this time.