Major/move to typescript vuecli

.gitignore

@@ -1,5 +1,6 @@
 .DS_Store
-node_modules/
+dist
+node_modules
 npm-debug.log
 yarn-error.log
 notes
@@ -10,3 +11,5 @@ notes
 *.ntvs*
 *.njsproj
 *.sln
+
+*.tgz

README.md

@@ -21,36 +21,80 @@ or
 npm i @voerro/vue-tagsinput --save
 ```
 
-Then register the component with Vue:
+Register the component with Vue globally:
 
 ```javascript
-import VoerroTagsInput from '@voerro/vue-tagsinput';
+import { VoerroTagsInput } from '@voerro/vue-tagsinput';
 
 Vue.component('tags-input', VoerroTagsInput);
 ```
 
-Include the `dist/style.css` file on your page to apply the styling. You can use CDN, `require()` it inside your JS code, or `@include` it inside your (S)CSS assets. Read the `Styling` section to learn how to customize the appearance.
+or
+
+Use the included plugin
+
+```javascript
+import VoerroTagsInputPlugin from '@voerro/vue-tagsinput';
+
+Vue.use(VoerroTagsInputPlugin);
+```
+
+or
+
+Use in an component
+
+```javascript
+import { VoerroTagsInput } from '@voerro/vue-tagsinput';
+
+export default Vue.extend({
+    components: {
+        VoerroTagsInput,
+    },
+    setup() {
+        ...
+    },
+});
+```
+
+import `@voerro/vue-tagsinput/dist/VoerroTagsInput.css` into your code. You can use CDN, `require()` or `import` it inside your JS code, or `@include` it inside your (S)CSS assets. Read the `Styling` section to learn how to customize the appearance.
 
 ## Installation via CDN
 
 If you're not using NPM, you can include the required files into your page manually from a CDN. Don't forget to include Vue as well. For example:
 
+Using plugin
+
+```html
+<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.12/vue.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@voerro/[email protected]/dist/VoerroTagsInput.umd.min.js"></script>
+
+<script>
+    Vue.use(VoerroTagsInput.default);
+    new Vue({
+        el: '#app',
+        ...
+    });
+</script>
+```
+
+Using component
+
 ```html
 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.12/vue.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/@voerro/vue-tagsinput@2.7.1/dist/voerro-vue-tagsinput.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@voerro/vue-tagsinput@3.0.0/dist/VoerroTagsInput.umd.min.js"></script>
 
 <script>
     new Vue({
         el: '#app',
-        components: { "tags-input": VoerroTagsInput },
+        components: { "tags-input": VoerroTagsInput.VoerroTagsInput },
     });
 </script>
 ```
 
 Include the CSS file on your page to apply the styling. Read the `Styling` section to learn how to customize the appearance.
 
 ```
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@voerro/vue-tagsinput@2.7.1/dist/style.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@voerro/vue-tagsinput@3.0.0/dist/VoerroTagsInput.css.css">
 ```
 
 **IMPORTANT:** Always grab the latest versions of the package from [JSDELIVR](https://www.jsdelivr.com/package/npm/@voerro/vue-tagsinput?path=dist), the ones provided in the examples above might be outdated. Same goes for Vue.js.
@@ -333,12 +377,25 @@ See the `v1` branch for details.
 
 A pretty serious bug ([#53](../../issues/53)) was fixed in `v2.0.0`. The data format for the `existing-tags` prop and the `v-model` directive has been changed. You can find the new format in this documentation, see above.
 
+#### v2.4.x -> 3.0.0
+
+- Changed style imports. From 'dist/styles.css' to 'dist/VoerroTagsInput.css'
+- package main entry point change to import commonjs output
+
+
 #### v2.3.0 -> v2.4.0
 
 Multiple hidden fields instead of one, so that your backend treats the selected tags as an array.
 
 ## Changelog
 
+#### v.3.0.0
+- Changed style imports. From 'dist/styles.css' to 'dist/VoerroTagsInput.css'
+- package main entry point change to import commonjs output
+- Added type definitions
+- Added vue cli for building and bundling
+- Fixed bugs raised with added TS support
+
 #### v.2.4.0
 
 - New options: `id-field` and `text-field`

babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset',
+  ],
+};