vuejs / vue-touch

Hammer.js wrapper for Vue.js
MIT License
2.72k stars 391 forks source link

How to get this to work with Nuxt? #125

Open ShetlandJ opened 6 years ago

ShetlandJ commented 6 years ago

Having followed the installation instructions religiously, and read many, many posts online, I still can't figure out how to register vue-touch as a component with Nuxt. Can anyone help me out please?

package.json: "vue-touch": "2.0.0-beta.4"

plugins/global.js:

import Vue from 'vue'
var VueTouch = require('vue-touch')

Vue.use(VueTouch, {name: 'v-touch'})

nuxt.config.js: vendor: ['vue-touch'],

  plugins: [
    { src: '~plugins/global', ssr: false }
  ]

And my HTML template in my Vue file:

<template>
  <no-ssr>
    <div class="main">
      <div id="slider" class="slider" >
        <v-touch @pan="mouseMoving" @panend="stopDrag" @swipe="startDrag">
          <div class="slider-cards" :style="`transform: translate3d(${cardsX}px,0,0)`">
            <div v-for="num in 3" class="slider-card">
              <Card />
            </div>
          </div>
        </v-touch>
      </div>
    </div>
  </no-ssr>
</template>

I can't find anything out there to help me

bensladden commented 6 years ago

@ShetlandJ Hi, i managed to get it to work by adding 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>