Thanks, putting audio files on statics/ dir works, thanks @rstoenescu for your support. You’ve made a wonderful framework.

Found that you need to configure the intent, you can check this link http://stackoverflow.com/questions/2958701/launch-custom-android-application-from-android-browser, you should edit the cordova/config.xml to configure your app.

if you just use axios, in any module you define

import axios from 'axios'

export default {
  methods: {
    getItems() {
       axios.get('/items')
       .then(res => {
          console.log(res.data)
        })
       .catch( res => {  console.log('error', res) })
    }
  }
}

Found the answer, I just have to:

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

and now I can use

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

@rstoenescu Thanks a lot for your patience

Thanks, fixed with this code that might not be the correct way but works

if(process.env.NODE_ENV == 'development') {
  window.wsPath = 'ws://localhost:4000/socket/websocket?vsn=1.0.0'
} else {
  window.wsPath = 'ws://acasiton.com/socket/websocket?vsn=1.0.0'
}

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.

Has anyone tried to implement flow to a quasar project, please share your advice on this topic

Awesome, great work!!

Look at http://forum.quasar-framework.org/topic/758/v-touch-swipe-error I have added TouchHold directive, swipe only recognizes when a swipe was done but does not track the position in the example left panel changes the position when you hold the panel.

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

When I added this to my component I did not get any events when pressing and holding (mouse).

@a47ae Have checked the docs I can get the swipe event but I would like to hold and do transform:translate while holding.

How can I achieve an effect similar to left panel when holding and moving the panel, I would like to do this for a top panel while holding and moving vertical.

Found the answer, I just have to:

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

and now I can use

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

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.

I haven’t found a component that shows a route is loading, I want to add a top line loading animation but I would like to know if there is a way to know what percentage has been loaded, this is important since internet connections here can be very slow.

Solution:
Just use this config to copy to the root folder, it will copy all files to dist/ folder when you run quasar build

new CopyWebpackPlugin([
      {
        from: 'root/',
        to: ''
      }
    ])

I have the CopyWebpack Plugin and I have not set the to folder is it ok to use this

new CopyWebpackPlugin([
      {
        from: 'root/',
        to: '/dist/root'
      }
    ])