v-touch-swipe error

  • 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">

    /* 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: {
      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()
      created() {
        this.form.radius = this.query.radius
      <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">
                <label class="text-white">{{'Distance' | translate}}</label>
                <input type="text" v-model="form.radius" class="input-form text-center" size="4"/>
              <div class="pl-05">
                <input type="range" min="1" max="20" v-model="form.radius" class="full-width"/>
              <label class="text-white">{{'Qualification' | translate}}</label>
              <StarmeterInput class="inline-block" :stars="query.rating" ref="stars" />
              <label class="text-white">{{'Tags' | translate}}</label>
              <Tag :suggestions="['vegano', 'carne']"/>
            <q-btn color="primary" class="full-width" @click="search()">{{'Search' | translate}}</q-btn>
        <q-transition enter="fadeIn" leave="fadeOut">
          <div class="layout-backdrop fullscreen" v-if="show" @click="show=false" style="z-index:1"></div>
    <style lang="styl">
    .title {}
    .s-cart .title {
      margin-bottom: 0.6rem;
    .search-pane {
      background: rgba(0,0,0,0.7);
      z-index: 2;

    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.

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

  • This post is deleted!

  • Found the answer, I just have to:

    import { TouchSwipe } from 'quasar'
    directives: {

    and now I can use

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

Log in to reply

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.