Initial version

.babelrc

@@ -0,0 +1,5 @@
+{
+  "presets": ["@babel/preset-env"],
+  "plugins": ["@babel/plugin-transform-runtime"],
+  "comments": false
+}

.eslintrc.js

@@ -0,0 +1,14 @@
+module.exports = {
+  root: true,
+  parserOptions: {
+    sourceType: 'module'
+  },
+
+  extends: ['airbnb', 'prettier'],
+  // required to lint *.vue files
+  plugins: ['prettier', 'html'],
+
+  rules: {
+    'prettier/prettier': ['error']
+  }
+};

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+npm-debug.log
+*.bak

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "printWidth": 100,
+  "singleQuote": true
+}

.storybook/addons.js

@@ -0,0 +1 @@
+import '@storybook/addon-notes/register-panel';

.storybook/config.js

@@ -0,0 +1,8 @@
+import { configure } from '@storybook/vue';
+
+function loadStories() {
+  require('./stories.js');
+  // You can require as many stories as you need.
+}
+
+configure(loadStories, module);

.storybook/stories.js

@@ -0,0 +1,68 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import { storiesOf } from '@storybook/vue';
+
+import VuePlugin from '../src/vue-plugin';
+
+Vue.use(Vuex);
+Vue.use(VuePlugin);
+
+const withSettings = component => ({
+  myPluginSettings: new VuePlugin(),
+  ...component
+});
+
+const stories = storiesOf('VuePlugin', module);
+
+stories
+  // Add some stories here to make your plugin more descriptive
+  .add(
+    'My Customs  Component',
+    () =>
+      withSettings({
+        template: `
+        <div>
+          <vue-plugin />
+        </div>
+      `
+      }),
+    {
+      notes: `
+        # Using \`vue-plugin\`
+
+        \`\`\`html
+        <template>
+          <vue-plugin />
+        </template>
+        \`\`\`
+      `
+    }
+  )
+  .add(
+    'My Custom Component with another markup',
+    () =>
+      withSettings({
+        template: `
+        <div>
+          <b>Hello</b>
+          <vue-plugin />
+          <i>world</i>
+        </div>
+      `
+      }),
+    {
+      notes: `
+        # Using \`vue-plugin\` with other components
+
+        \`\`\`html
+        <template>
+          <div>
+            <b>Hello</b>
+            <vue-plugin />
+            <i>world</i>
+          </div>
+        </template>
+        \`\`\`
+      `
+    }
+  );

.travis.yml

@@ -0,0 +1,6 @@
+language: node_js
+
+node_js:
+  - 10
+
+cache: yarn

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Fatih Kadir Akın <[email protected]>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,163 @@
+<p align="center">
+<img src="./resources/vue-plugin-boilerplate.png" width="400">
+</p>
+
+---
+
+> 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.
+
+<h3 align="center"><a href="https://github.com/f/vue-plugin-boilerplate/wiki">🚀 Open step by step guide to create a robust and well-designed Vue Plugin</a></h3>
+
+## 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
+
+```bash
+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.
+
+```js
+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`:
+
+```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`:
+
+```js
+// Some instance methods that you can access from this.$myPlugin
+world() {
+  return 'world';
+}
+```
+
+This method will be accessible in your user's instances:
+
+```vue
+<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`:
+```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.
+```js
+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 running `yarn add -P vuex` and `yarn 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

README.tpl.md

@@ -0,0 +1,43 @@
+# VuePlugin
+
+Your plugin description...
+
+## Installation
+
+### 1. Install
+```
+yarn add vue-plugin
+# or
+npm i vue-plugin --save
+```
+
+### 2. Plug-in
+```js
+import VuePlugin from 'vue-plugin'
+
+Vue.use(VuePlugin)
+
+new Vue({
+  // your vue config
+  myPluginSettings: new VuePlugin(),
+})
+```
+
+### 3. Use in your components
+
+```vue
+<template>
+  <vue-plugin />
+</template>
+
+<script>
+  export default {
+    async created() {
+      console.log(this.$myPlugin);
+    },
+  };
+</script>
+```
+
+## License
+MIT

examples/generic/App.vue

@@ -0,0 +1,19 @@
+<template>
+  <div>
+    Hello {{ msg }}!
+    <vue-plugin />
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      msg: 'world'
+    };
+  }
+};
+</script>
+
+<style>
+</style>

examples/generic/index.js

@@ -0,0 +1,12 @@
+import Vue from 'vue';
+import VuePlugin from '@/vue-plugin';
+
+import App from './App.vue';
+
+Vue.use(VuePlugin);
+
+new Vue({
+  el: '#app',
+  myPluginSettings: new VuePlugin(),
+  render: createElement => createElement(App)
+});