Rewrite v-touch as a component for Vue 2.x

[LinusBorg]

Problem

When Vue 2.0 came around, I attempted to update the v-touch directive to Vue 2.0's new API.

But we never published it so far, because I wasn't successful to keep the all features due to the API changes foir custom directives in Vue 2.0

Solution

I decided to rewrite it all as a component. API will look like this:

<v-touch
  tag="div" <!-- default. Use to change the root element rendered by the component -->
  v-on:pan="method"
  v-bind:pan-options="{ ... }"
  
  <!-- short syntax; -->
  @swipe="method"
  :swipe-options="{ ... }"
>
 <p>Slot Content goes here</p>
</v-touch>

Breaking Change & Migrating

Of course, this means we will have a complete breaking change with the version for Vue 1.0.

But I think the upgrade path is pretty simple:

<!-- 1.0 -->
<section v-touch:swipe="method" v-touch-options:swipe="{ ....}"
  <p>Swipe me!</p>
</section>
<!-- 2.0 -->
<v-touch tag="section" @swipe="method" :swipe-options="{ ....}"
  <p>Swipe me!</p>
</v-touch>

I'm already 90% done with the working prototype, And will hopefully find time this weekend to do the cleanup.

[blomdahldaniel]

This looks so great! Awesome work!

[LinusBorg]

I will finish writing some tests over the holidays, it's looking good :)

[dsonet]

What if

<!-- 1.0 -->
<section class="header" v-touch:swipe="method" v-touch-options:swipe="{ ....}"
  <p>Swipe me!</p>
</section>

The root element has some other attributes?

I would suggest remove the 'tag' in the new API.

[LinusBorg]

Attributes in components are passed to the component's root node.

And loosing the tag attribute would mean that you end up with a div everytime. Not always desirable.

[ram-you]

So what is the link to the new v2 (npm) ?

[LinusBorg]

I'm still working on it, there's not release yet.

[LinusBorg]

@ram-you I just published VueTouch 2.0.0-beta.1:

https://github.com/vuejs/vue-touch/releases/tag/2.0.0-beta.1

[jsonz1993]

This look so great! thx

[barraponto]

So if I want to add hammer.js events to my component I should wrap it in a v-touch component?

[LinusBorg]

You can use HammerJS without vue-touch, of course. If you want to use it wrapped as a component, you can with this library

[ram-you]

I still have the error on ssr :
ReferenceError: window is not defined
using v2.0.0-beta.3

[LinusBorg]

@ram-you can you tell me a bit more? where in the source is this error comping up?

Edit: a geez, I think I know where it's coming from.

On it.

[ram-you]

I tried your solution:

alias: {
  'hammerjs$': 'vue-touch/dist/hammer-ssr.js'
}

But now have new error after compilation:

ERROR in app.e58c50a4d0f7aa688e35.js from UglifyJs
SyntaxError: Unexpected token: name (Hammer)