Update for Vue 2

.editorconfig

@@ -0,0 +1,11 @@
+# This file is for unifying the coding style for different editors and IDEs
+# editorconfig.org
+root = true
+
+[*]
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+indent_style = space
+indent_size = 2

.gitignore

@@ -1,4 +1 @@
-.DS_Store
-node_modules/
-npm-debug.log
-.idea
+node_modules

demo/main.js

@@ -4,9 +4,12 @@ import Custom from './Custom.vue'
 import Data from './Data.vue'
 import Sortable from '../vue-sortable'
 
-Vue.use(Sortable)
+Vue.use(Sortable);
 
 new Vue({
-  el: 'body',
-  components: { Basic, Custom, Data }
-})
+  components: {
+    'demo-basic': Basic,
+    'demo-custom': Custom,
+    'demo-data': Data
+  }
+}).$mount('#app');

index.html

@@ -76,7 +76,7 @@ <h1>Vue.js Sortable</h1>
         </div>
     </div>
 </div>
-<div class="container">
+<div id="app" class="container">
     <div class="row">
         <div class="col-md-8 col-md-offset-2">
             <h2 class="page-header">Installation & Usage</h2>
@@ -97,7 +97,7 @@ <h5>Setup</h5>
 
             <h2 class="page-header">Examples</h2>
             <h4>Basic</h4>
-            <basic></basic>
+            <demo-basic></demo-basic>
 
             <h4>Access the Sortable Instance</h4>
             <div class="row">
@@ -122,11 +122,11 @@ <h4>Further Customization</h4>
                 <code>new Sortable(el, {})</code> can also be passed to the directive using an object literal. Check the
                 <a href="https://github.com/RubaXa/Sortable#options">Sortable docs</a> for a complete list of arguments. In this example a custom drag handle has been set.
             </p>
-            <custom></custom>
+            <demo-custom></demo-custom>
 
             <p>If you need to pass multiple arguments, it can be cleaner to bind to an object from your VM data. The same drag handles are applied here, while also disabling drag on
                 <code>.disabled</code> items.</p>
-            <data></data>
+            <demo-data></demo-data>
 
         </div>
     </div>

karma.conf.js

@@ -20,11 +20,12 @@ module.exports = function (config) {
             exclude: /node_modules/
           },
         ]
-      }
+      },
+      resolve: {alias: {vue: 'vue/dist/vue.js'}},
     },
 
     webpackMiddleware: {
       noInfo: true
     }
   });
-};
+};

package.json

@@ -25,9 +25,8 @@
     "babel-preset-es2015": "^6.9.0",
     "babel-preset-stage-2": "^6.11.0",
     "babel-runtime": "^6.9.2",
-    "cross-env": "^1.0.8",
-    "css-loader": "^0.23.1",
-    "file-loader": "^0.9.0",
+    "cross-env": "^3.1.3",
+    "css-loader": "^0.25.0",
     "jasmine-core": "^2.4.1",
     "json-loader": "^0.5.4",
     "karma": "^1.1.0",
@@ -36,10 +35,10 @@
     "karma-spec-reporter": "0.0.26",
     "karma-webpack": "^1.7.0",
     "phantomjs-prebuilt": "^2.1.7",
-    "vue": "^1.0.26",
+    "vue": "^2.0.3",
     "vue-hot-reload-api": "^2.0.5",
     "vue-html-loader": "^1.2.3",
-    "vue-loader": "^8.5.3",
+    "vue-loader": "^9.7.0",
     "vue-style-loader": "^1.0.0",
     "webpack": "^1.13.1",
     "webpack-dev-server": "^1.14.1"

test/Sortable.spec.js

@@ -2,64 +2,21 @@
 
 import Vue from 'vue'
 import Sortable from '../vue-sortable'
-import sortablejs from 'sortablejs'
 
-Vue.use(Sortable)
+Vue.use(Sortable);
 
 describe('vue-sortable', () => {
 
   it('has an install method for Vue.use()', () => {
-      expect(typeof Sortable.install).toEqual('function')
-  })
+      expect(typeof Sortable.install).toEqual('function');
+  });
 
   it('creates the v-sortable directive', () => {
     const vm = new Vue({
       template: '<div><ul></ul></div>',
-    }).$mount()
+    }).$mount();
 
-    expect(typeof vm.$options.directives['sortable']).toEqual('function')
-  })
+    expect(typeof vm.$options.directives['sortable']).toEqual('object');
+  });
 
-  it('does not set vm.sortable unless a directive argument is passed', () => {
-    const vm = new Vue({
-      template: '<div><ul v-sortable></ul></div>',
-    }).$mount()
-
-    expect(typeof vm['sortable']).toEqual('undefined')
-  })
-
-  it('sets vm.sortable when a directive argument is passed', () => {
-    const vm = new Vue({
-      template: '<div><ul v-sortable:foo></ul></div>',
-    }).$mount()
-
-    expect(typeof vm['sortable']).toEqual('object')
-  })
-
-  it('sets vm.sortable.id based on the directive argument', () => {
-    const vm = new Vue({
-      template: '<div><ul v-sortable:foo></ul></div>',
-    }).$mount()
-
-    expect(vm.sortable.foo instanceof sortablejs).toEqual(true)
-  })
-
-  it('will log a warning when a duplicate sortable id is provided', () => {
-    console.warn = jasmine.createSpy("warn")
-
-    const vm = new Vue({
-      template: '<div><ul v-sortable:foo></ul><ul v-sortable:foo></ul></div>',
-    }).$mount()
-
-    expect(console.warn).toHaveBeenCalledWith("[vue-sortable] cannot set already defined sortable id: 'foo'")
-  })
-
-  it('can pass arguments to sortablejs through an options object', () => {
-    const vm = new Vue({
-      template: '<div><ul v-sortable:foo="{ foo: \'bar\' }"></ul></div>',
-    }).$mount()
-
-    expect(vm.sortable.foo.options.foo).toEqual('bar')
-  })
-
-})
+});

vue-sortable.js

@@ -1,35 +1,24 @@
 ;(function () {
 
-  var vSortable = {}
+  var vSortable = {};
   var Sortable = typeof require === 'function'
-      ? require('sortablejs')
-      : window.Sortable
+    ? require('sortablejs')
+    : window.Sortable;
 
   if (!Sortable) {
     throw new Error('[vue-sortable] cannot locate Sortable.js.')
   }
 
   // exposed global options
-  vSortable.config = {}
+  vSortable.config = {};
 
   vSortable.install = function (Vue) {
-    Vue.directive('sortable', function (options) {
-      options = options || {}
-
-      var sortable = new Sortable(this.el, options)
-
-      if (this.arg && !this.vm.sortable) {
-        this.vm.sortable = {}
-      }
-
-      //  Throw an error if the given ID is not unique
-      if (this.arg && this.vm.sortable[this.arg]) {
-        console.warn('[vue-sortable] cannot set already defined sortable id: \'' + this.arg + '\'')
-      } else if( this.arg ) {
-        this.vm.sortable[this.arg] = sortable
+    Vue.directive('sortable', {
+      inserted: function (el, binding) {
+        new Sortable(el, binding.value || {});
       }
-    })
-  }
+    });
+  };
 
   if (typeof exports == "object") {
     module.exports = vSortable
@@ -38,8 +27,8 @@
       return vSortable
     })
   } else if (window.Vue) {
-    window.vSortable = vSortable
+    window.vSortable = vSortable;
     Vue.use(vSortable)
   }
 
-})()
+})();

webpack.config.js

@@ -1,5 +1,5 @@
-var path = require('path')
-var webpack = require('webpack')
+var path = require('path');
+var webpack = require('webpack');
 
 module.exports = {
   entry: './demo/main.js',
@@ -11,6 +11,7 @@ module.exports = {
   resolveLoader: {
     root: path.join(__dirname, 'node_modules'),
   },
+  resolve: {alias: {vue: 'vue/dist/vue.js'}},
   module: {
     loaders: [
       {
@@ -49,10 +50,10 @@ module.exports = {
     noInfo: true
   },
   devtool: 'eval-source-map'
-}
+};
 
 if (process.env.NODE_ENV === 'production') {
-  module.exports.devtool = 'source-map'
+  module.exports.devtool = 'source-map';
   // http://vuejs.github.io/vue-loader/workflow/production.html
   module.exports.plugins = (module.exports.plugins || []).concat([
     new webpack.DefinePlugin({