v-touch couses problems in the DOM

[gokhanozdemir]

Hello,

I have added vue-touch@next beta-4 as a plugin with the ssr workaround, to my the vue nuxt.js. The stuff is techniccally working, however it brokes the DOM and I am getting the warning below.

Mismatching childNodes vs. VNodes ...

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render. 
warn @ vue.runtime.common.js:521
patch @ vue.runtime.common.js:4589
Vue._update @ vue.runtime.common.js:2635
updateComponent @ vue.runtime.common.js:2609
get @ vue.runtime.common.js:2934
Watcher @ vue.runtime.common.js:2926
Vue._mount @ vue.runtime.common.js:2608
0.Vue$2.$mount @ vue.runtime.common.js:6178
init @ vue.runtime.common.js:1740
(anonymous) @ vue.runtime.common.js:1894
hydrate @ vue.runtime.common.js:4496
patch @ vue.runtime.common.js:4585
Vue._update @ vue.runtime.common.js:2635
updateComponent @ vue.runtime.common.js:2609
get @ vue.runtime.common.js:2934
Watcher @ vue.runtime.common.js:2926
Vue._mount @ vue.runtime.common.js:2608
0.Vue$2.$mount @ vue.runtime.common.js:6178
init @ vue.runtime.common.js:1740
hydrate @ vue.runtime.common.js:4496
patch @ vue.runtime.common.js:4585
Vue._update @ vue.runtime.common.js:2635
updateComponent @ vue.runtime.common.js:2609
get @ vue.runtime.common.js:2934
Watcher @ vue.runtime.common.js:2926
Vue._mount @ vue.runtime.common.js:2608
0.Vue$2.$mount @ vue.runtime.common.js:6178
init @ vue.runtime.common.js:1740
hydrate @ vue.runtime.common.js:4496
hydrate @ vue.runtime.common.js:4512
hydrate @ vue.runtime.common.js:4512
hydrate @ vue.runtime.common.js:4512
hydrate @ vue.runtime.common.js:4512
patch @ vue.runtime.common.js:4585
Vue._update @ vue.runtime.common.js:2635
updateComponent @ vue.runtime.common.js:2609
get @ vue.runtime.common.js:2934
Watcher @ vue.runtime.common.js:2926
Vue._mount @ vue.runtime.common.js:2608
0.Vue$2.$mount @ vue.runtime.common.js:6178
init @ vue.runtime.common.js:1740
hydrate @ vue.runtime.common.js:4496
hydrate @ vue.runtime.common.js:4512
patch @ vue.runtime.common.js:4585
Vue._update @ vue.runtime.common.js:2635
updateComponent @ vue.runtime.common.js:2609
get @ vue.runtime.common.js:2934
Watcher @ vue.runtime.common.js:2926
Vue._mount @ vue.runtime.common.js:2608
0.Vue$2.$mount @ vue.runtime.common.js:6178
mountApp @ client.js:348
(anonymous) @ client.js:375

<template>
  <section class="card-list-container">
    <v-touch @tap="onswipeleft"><div class="dragme">PAAAAAAAAN</div></v-touch>
    <v-touch @swipe="onswipeleft"><div class="dragme dr2">SWIIIIIIPE</div></v-touch>
  </section>
</template>

<script>
export default {
  methods: {
    onswipeleft () {
      console.log('left swipee')
    }
  }
}
</script>
<style scoped>
.title
{
  margin: 50px 0;
}
.dragme {
  width: 100%;
  height: 200px;
  background: tomato;
  padding: 30px;
}
.dr2{
  background-color: green;
}
</style>

I also added the resource files for your interest @LinusBorg . #66

nuxt-starter.zip

[LinusBorg]

Thanks, will look into this.

[LouiseStroeh]

Any solution to this yet?

[gokhanozdemir]

@LouiseStroeh I had few more experiences which result in happy ends with SSR problems. Yet I was not able to look back to this issue since I moved forward to another phase of the project.

Few of the solutions are very simple. like this like moving export under mounted lifecycle in es5 format.

If you @LouiseStroeh are currently working on this issue, also make sure you have read. https://nuxtjs.org/guide/plugins/#client-side-only the ssr: false is charming.

[LouiseStroeh]

@gokhanozdemir Thanks for your fast reply. I am not sure I understand your first solution - would you be kind to elaborate? So far I have tried in the nuxt.config.js file to add { src: '~plugins/vue-touch', ssr: false }, as you suggest, as well as add:

build: {
    vendor: ['event-source-polyfill', 'babel-polyfill', 'axios', 'vue-play', 'vue-touch'],
    extend(config, { isClient, isServer }) {
      if (isServer) {
        config.resolve.alias.hammerjs$ = 'vue-touch/dist/hammer-ssr.js';
      }
    },
  },

as suggest here: https://github.com/vuejs/vue-touch/tree/next

[piyushchauhan2011]

Any updates ? Does above solution works ?

[FPierre]

The following works for me:

package.json

"vue-touch": "^2.0.0-beta.4"

nuxt.config.js

plugins: [
  { src: '~plugins/vue-touch', ssr: false }
],
build: {
  vendor: ['vue-touch']
}

plugins/vue-touch.js

import Vue from 'vue'
import VueTouch from 'vue-touch'

Vue.use(VueTouch)

pages/index.vue

<template>
  <no-ssr>
    <div>
      <v-touch @swipe='swipe'>
        Swipe me!
      </v-touch>
    </div>
  </no-ssr>
</template>

[ShetlandJ]

☝🏻 @FPierre's solution didn't work for me

[bensladden]

@ShetlandJ Try this:
plugins file:

import Vue from 'vue'
import VueTouch from 'vue-touch'

VueTouch.registerCustomEvent('doubletap', {
    type: 'tap',
    taps: 2
})

Vue.use(VueTouch)

Try adding to nuxt.config.js

  plugins: [

    { src: '@/plugins/vuetouch', ssr: false }
  ],

  build: {
    /*
    ** You can extend webpack config here
    */
    vendor: [
    ],
    extend(config, ctx) {
      if (ctx.isServer) {
        config.resolve.alias['hammerjs$'] = this.options.rootDir + 'node_modules/vue-touch/dist/hammer-ssr.js'
      }
    }
  },

Then in html :
<v-touch @doubletap="testTap">Tap me!</v-touch>

[aalenliang]

None of the solution works for me.
I can get v-touch work, but there is always this annoyed [Vue warn].

so I end up create a wrap component to return v-touch when process.client is available, otherwise return div. now it's finally working without warning.

something like this.

nuxt.config.js

plugins: [
  {
    src: '@/plugins/vue-touch',
    ssr: false
  }
]

/plugins/vue-touch.js

import Vue from 'vue'
import VueTouch from 'vue-touch'

Vue.use(VueTouch)

Touchable.vue

<template>
  <v-touch
    v-if="client"
    @swipedown="onSwipeDown"
  >
    <slot/>
  </v-touch>
  <div v-else>
    <slot/>
  </div>
</template>

<script>
export default {
  computed: {
    client: function() {
      if (process.browser) {
        return true
      }
      return false
    }
  },

  methods: {
    onSwipeDown: function() {
      console.log('swipedown')
    }
  }
}
</script>

SomeComponent.vue

<template>
  <touchable>
    <some-other-components/>
  </touchable>
</template>