v-touch-swipe error

[boriscy]

I have the error

[Vue warn]: Failed to resolve directive: touch-swipe

My component code is

Check the line <div v-if="show" class="search-pane fixed on-top full-width" v-touch-swipe.vertical="swipe">

<script>
/* eslint-disable */
import types from '../store/mutation-types'
import { Dialog, QTransition } from 'quasar'
import {format} from '../mixins'
import Tag from './common/Tag.vue'
import StarmeterInput from './common/StarmeterInput.vue'
import BaseMenu from './common/BaseMenu.vue'

export default {
  mixins: [format],
  components: {
    Tag,
    StarmeterInput,
    BaseMenu,
    QTransition
  },
  data() {
    return {
      backUrl: '',
      dialogReset: null,
      dialogCreate: null,
      suggestions: ['uno', 'dos'],
      stars: null,
      form: {
        radius: 2
      },
      show: false,
      cssClass: ''
    }
  },
  computed: {
    query() { return this.$store.state.search.query }
  },
  ////////////////////////////////////////
  watch: {
    'form.radius': function(a, b) {
      if(a > 20) {
        this.form.radius = 20
      }
    }
  },
  ////////////////////////////////////////
  methods: {
    toggle() {
      this.show = !this.show
    },
    swipe(obj) {
      console.log('sw', obj);
    },
    search() {
      const pos = this.$store.state.globals.position.coords

      this.$store.dispatch('startSearch', {
        radius: this.form.radius,
        coordinates: [pos.longitude, pos.latitude],
        rating: this.$refs.stars.getStars()
      })
      this.$router.push('/private/list')
    }
  },
  created() {
    this.form.radius = this.query.radius
  }
}

</script>

<template>
  <div>
  <q-transition enter="slideInDown" leave="slideOutUp">
    <div v-if="show" class="search-pane fixed on-top full-width" v-touch-swipe.vertical="swipe">
      <div class="layout-padding full-width">
        <div class="flex">
          <div>
            <label class="text-white">{{'Distance' | translate}}</label>
            <input type="text" v-model="form.radius" class="input-form text-center" size="4"/>
            Km.
          </div>
          <div class="pl-05">
            <input type="range" min="1" max="20" v-model="form.radius" class="full-width"/>
          </div>
        </div>

        <div>
          <label class="text-white">{{'Qualification' | translate}}</label>
          <StarmeterInput class="inline-block" :stars="query.rating" ref="stars" />
        </div>

        <div>
          <label class="text-white">{{'Tags' | translate}}</label>
          <Tag :suggestions="['vegano', 'carne']"/>
        </div>

        <br/>
        <q-btn color="primary" class="full-width" @click="search()">{{'Search' | translate}}</q-btn>
      </div>

    </div>
  </q-transition>

    <q-transition enter="fadeIn" leave="fadeOut">
      <div class="layout-backdrop fullscreen" v-if="show" @click="show=false" style="z-index:1"></div>
    </q-transition>
  </div>
</template>

<style lang="styl">
.title {}
.s-cart .title {
  margin-bottom: 0.6rem;
}
.search-pane {
  background: rgba(0,0,0,0.7);
  z-index: 2;
}
</style>

As you can see I have created a swipe method but I got the error, should I import the directives and add it on main.js?, thanks.

[a47ae]

You basically answered the question yourself., yes you have to import the directive.

[boriscy]

This post is deleted!

[boriscy]

Found the answer, I just have to:

import { TouchSwipe } from 'quasar'
...
directives: {
  TouchSwipe
}
...

and now I can use

<div v-touch-swipe="method"></div>