1. Creating a Vue Plugin

[Skip to Structure of a Vue Plugin]

Creating Package and Plugin Structure

This section is about creating the plugin folder and getting ready to create your awesome plugin.

1. Clone vue-plugin-boilerplate as a starter for your plugin

Let's create a todolist plugin. Why not?

git clone --depth 1 https://github.com/f/vue-plugin-boilerplate.git my-todolist-plugin
cd my-todolist-plugin

This will clone the boilerplate code into your directory. But wait, we have a small work to start working on it.

3. Run press.

There's a command called press inside the directory, it simply prepares your plugin.

./press

It will ask some questions about your plugin.

4. The plugin name

Your plugin name? (with dahshes like vue-plugin-boilerplate):

You should enter a single name or multiple names with dashes. The vue- prefix is recommended but not necessary. You can edit it later anyway. Let's say it vue-todo

Your plugin name? (with dahshes like vue-plugin-boilerplate): vue-todo

5. The class name

Your plugin class name? (pascal case like VuePlugin):

Now you'll be prompted for the class name it will create. This must be in PascalCase. Let's say VueTodo then.

Your plugin class name? (pascal case like VuePlugin): VueTodo

6. The class name

Your plugin options name? (like "yourPlugin" to be used as new Vue({ yourPlugin: {...} }))

When your users configure your plugin, they will need an object key to setup your plugin. What should it be? Let's say it todo and your users will be able to use your plugin as following:

import Vue from 'vue';
Vue.use(VueTodo)

const app = new Vue({
  todo: { /* some settings */ }
})

Looks cool, right? Writing todo:

Your plugin options name? (like "yourPlugin" to be used as new Vue({ yourPlugin: {...} }))

7. The accessor name

Your plugin accesor name? (like "helloWorld" to be used as this.$helloWorld):

You want your users to access your plugin instance from their Vue components. We should define an accessor name to make them use your plugin easily like following:

<script>
export default {
  mounted() {
    this.$todo.add('buy milk')
  }
}
</script>

So we should say it todo. The $ prefix will be added automatically but you can remove it from the source if you don't prefer.

8. The repo name

You're building an Open Source plugin (I hope), so you need a repo.

Your plugin's GitHub address? (like "f/vue-plugin-boilerplate"):

Just write the username/repo-name and the package.json file will be updated.

9. Remove leftovers

The press command made some changes in the boilerplate files, now you should remove them to start building it.

Thanks God, the press command gives you the list of the files (with remove commands) to make you start development from scratch. Run the command press gave you, it should look like following:

Pressing created some leftovers. You can run following commands to remove them now:

  rm -rf ./.git
  rm -f ./.storybook/stories.js.bak
  rm -f ./.storybook/config.js.bak
  rm -f ./README.tpl.md.bak
  rm -f ./examples/generic/index.js.bak
  rm -f ./examples/generic/App.vue.bak
  rm -f ./nuxt/index.js.bak
  rm -f ./README-BOILERPLATE.md.bak
  rm -f ./package.json.bak
  rm -f ./src/utils.js.bak
  rm -f ./src/types/vue-plugin.d.ts.bak
  rm -f ./src/vue-plugin.js.bak
  rm -f ./src/vue-plugin-component.vue.bak
  rm -rf ./resources
  rm -f ./press
  git init
  yarn install

[Go to Structure of a Vue Plugin]