@s-molinari Of course you’re right, sorry. I just replied to that post, at least I thought to.

Re: Redirect to page after action
Maybe not a hot topic but I saw the question here in the forum how to use this.$router.push in vuex.

My solution is quite simple:

1. I create an action

export function routeToLogin () {
  this.$router.push({ path: '/login' })
}

2. Then I dispatch this action from any other action I like:

export function logOut (context) {
  Vue.prototype.$axios.get(process.env.API + 'xxxx/' ...)
    .then(response => {
      ...
      context.dispatch('routeToLogin')
    })...
}

I’m totally enthusiastic about your work and the speed, many thanks to the whole team !!!

@s-molinari Many thanks for your quick reply.
According to your medium-article I’ve used:

import i18n from 'boot/i18n.js'
...

i18n.t('translation.path')

Is it possible that the i18n-version affects the behavior ? Couple of weeks ago I’ve updated i18n to the current version but that broke my app, so I’ve downgraded i18n.

That’s my current installation :

Screen Shot 2019-06-29 at 07.43.03.png

@s-molinari Thank for that article. Although i18n is working in my app I wanted to try your solution because I did not get i18n running in vuex.

Unfortunately I run in an issue, maybe you can give me a hint what I’m doing wrong?

In the boot file i18n.js I’ve omitted the curly braces in the 2nd import statement:

import VueI18n from 'vue-i18n'
import messages from 'src/i18n'
let i18n
export default ({ app, Vue }) => {
  Vue.use(VueI18n)
  app.i18n = new VueI18n({
    locale: 'en-us',
    fallbackLocale: 'en-us',
    messages
  })
  i18n = app.i18n
}
export { i18n }

Because with the curly brace I get this error message in my console:
Screen Shot 2019-06-28 at 14.03.59.png

When omitting the curly braces, the error message dissapears.

The other issue is that when I import in vuex:

import i18n from 'boot/i18n.js'

(that’s from your post in medium)

I get an error in the browser console:

Screen Shot 2019-06-28 at 14.01.46.png

The only thing I want to achieve is to use i18n in vuex.

I hope someone has a solution?

@marcelo I faced nearly the same problem and find a solution that works for me (Authentication not yet implemented). I’m not sure if it best practice but I also wanted the uploader to be reusable within other components and wanted to use the QUploader component because of its additional features like thumbnail, display file-size…

I let the url parameter blank.
I get the selected file’s details through the @added-event and safe it in a vuex store
I trigger the upload - method outside the QUploader component

In my uploader.vue file:

<template>
  <div class="row justify-center items-center">
    <div>
      <div class="row justify-between items-center q-px-sm" v-if="showUploadButton === false">
        <div class="fa-text-dark-light">{{ deleteMethodString }}</div>
        <div>
//youNeed
          <q-btn
            @click="deleteFile()"
            class="q-pl-sm"
            color="negative"
            flat
            icon="ion-ios-trash"
            round
          >
          </q-btn>
        </div>
      </div>
//youNeed
      <q-uploader
        :accept="acceptedFileTypes"
        :label="uploaderLabel"
        @added="fileSelected"
        @removed="fileRemoved"
        color="grey-1"
        flat
        hide-upload-btn
        square
        text-color="accent"
        url=""
      >
      </q-uploader>
    </div>
    <div class="q-mt-xl" v-if="showUploadButton === true">
//youNeed
      <q-btn
        :label="$t('message.general.upload')"
        @click="upload()"
        color="accent"
        outline
      >
      </q-btn>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapState, mapActions } from 'vuex'
export default {
  name: 'uploaderComponent',
  components: {
  },
  data () {
    return {
//youNeed
      selectedFile: false,
      uploaderLabel: 'Select a File',
      showUploadButton: false,
      deleteMethodString: ''
    }
  },
//youNeed
  watch: {
    selectedFile () {
      if (this.selectedFile === true) {
        this.uploaderLabel = ''
        this.showUploadButton = true
      } else {
        this.showUploadButton = false
      }
    }
  },
  mounted () {
    this.deleteMethodString = this.deleteString
    this.uploaderLabel = this.uploadLabel
  },
  computed: {
    ...mapGetters({
      currentLanguage: 'language/statusCurrentLanguage'
    }),
    ...mapState({
      fileUploadCompleted: state => state.uploader.fileUploadCompleted,
      concern: state => state.uploader.propsForFileUpload.concern,
      acceptedFileTypes: state => state.uploader.propsForFileUpload.acceptedFileTypes,
      deleteString: state => state.uploader.propsForFileUpload.stringForDeleteMethod,
      uploadLabel: state => state.uploader.propsForFileUpload.uploaderLabel
    })
  },
  methods: {
    ...mapActions({
//youNeed
      fileUpload: 'uploader/ActionFileUpload',
      uploaderDialogTrigger: 'app/ActionUploaderDialog',
      fileDelete: 'uploader/uploaderFileDelete'
    }),
//youNeed
    fileSelected (files) {
      if (files.length !== 0) {
        this.selectedFile = true
      }
      this.$store.commit('uploader/MutationFileSelected', files[0])
    },
//youNeed
    fileRemoved () {
      this.selectedFile = false
    },
//youNeed
    upload () {
      this.fileUpload()
    },
    deleteFile () {
      this.fileDelete()
      this.uploaderDialogTrigger(false)
    }
  }
}
</script>

vuex

// MUTATION
export const MutationFileSelected = (state, payload) => {
  state.fileSelected = payload
}

//ACTION
export const ActionFileUpload = (context) => {
  let uploaderProps = context.state.propsForFileUpload.concern
  let id = ''
  let uploadUrl = ''
  let uploaData = new FormData()
  if (uploaderProps === 'clubLogoUpload') {
    id = context.rootGetters['clubEdit/getterHomeClubId']
    uploadUrl = 'homeclub/putLogo/'
//youNeed
    uploaData.append('file', context.state.fileSelected)
  }
//youNeed
  Vue.prototype.$axios.post(process.env.API + uploadUrl + id, uploaData, {
    headers: {
      'Content-Type': undefined
    },
    onUploadProgress: function (progressEvent) {
      let percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total)
      context.commit('MutationOnUploadProgress', percentCompleted)
    }
  })
    .then(function (response) {
      if (response.status === 200) {
        console.log(response)
        context.dispatch('app/ActionUploaderDialog', false, {root: true})
        context.dispatch('ActionAfterFileUpload')
        if (context.rootGetters['language/statusCurrentLanguage'] === 'en') {
          Notify.create({
            type: 'positive',
            icon: 'img:statics/icons/check.svg',
            color: 'positive',
            timeout: 1000,
            position: 'center',
            message: 'Yeah. File uploaded. Great Job!'
          })
        }
        if (context.rootGetters['language/statusCurrentLanguage'] === 'zh') {
          Notify.create({
            type: 'positive',
            icon: 'img:statics/icons/check.svg',
            color: 'positive',
            timeout: 1000,
            position: 'center',
            message: 'Yeah. File uploaded. Great Job! -ZH'
          })
        }
      }
    })
    .catch(function (error) {
      console.log(error)
    })
}

I think there’s a lot of stuff you won’t need but I didn’t want to tear it up. This solution enables me to use axios’s features, which are for me are a bit easier to handle.

I’ve prefixed the essential parts I assume you need with //youNeed

If there is anyone who might have an idea to improve this solution, I’d be appreciated

@rstoenescu
that’s great to hear and I’m happy to had decided using Quasar. I’m using it in a project which I’ve started with some guys. The more I use Quasar and feel more and more familiar with it, the more I love it.
Although we yet don’t earn any penny with our project, I’ve decided to become a patreon. Just startet with the $10 monthly plan but surely will upgrade if we make the first turnover.

The only reason I post this here, is the hope that other developers will think about spending $10 a month too. I’m convinced that’s totally worth it and only fair. Developers using Quasar should not risk that one day the Quasar-team might loose motivation. Being a little bit grateful is not the worst…

@Hawkeye64 many thanks for reply. That was the domain I’ve used, without success.

But I found the problem and solution. Maybe others are affected as well.

I use a macBook and sometimes I must use a VPN-Client.
The VPN-Client created a file in etc/resolver called dev.
I’ve just deleted the file and everything works fine now.

I found the solution here: https://superuser.com/questions/1413402/i-cant-visit-websites-that-have-dev-domain

Hi guys,
I try to access https://quasar.dev but only receive the message that the site cannot be reached:

Has anyone else the same problem? I ask because I’m located in China.
Many thanks
Regards

@mas
To use Notify in Vuex with Axios, I’ve implemented as follows

import { Notify } from 'quasar'

...


export const postAction = (context) => {
  Vue.prototype.$axios.post(process.env.API + 'xxxx/' + 'xxxx/', {
    id: context.state.selectedPersonId,
    title: context.state.personSelectedAllData.person.title,
    ....
    
      })
    .then(function (response) {
      if (response.status === 200) {
          Notify.create({
            type: 'positive',
            color: 'positive',
            timeout: 1000,
            position: 'center',
            message: 'Yeah. Data saved. Great Job!'
          })
      }
    })
    .catch(function (error) {
      console.log(error)
        Notify.create({
          type: 'warning',
          color: 'warning',
          timeout: 1000,
          position: 'center',
          message: 'Uups. Something went wrong!'
        })
    })
}```

Hi folks,
I’m quite new to quasar. Everything in my application works really good and as expected. Only the q-uploader gives me some headache:

I try to configure the uploader. I must change:
from:

Content-Disposition: form-data; name="avatar5.jpg"; filename="avatar5.jpg"
Content-Type: image/jpeg

to:

Content-Disposition: form-data; file="avatar5.jpg"; filename="avatar5.jpg"
Content-Type: image/jpeg

I’ve already tried by using a factory function, but it does not change as expected:

  methods: {
    factoryFn (file) {
      return {
        url: 'http://{domain}:port/user/image',
        method: 'POST',
        fields: { name: 'file', value: file.name },
        headers: [
          { name: 'Content-Type', value: 'multipart/form-data' },
          { name: 'authorization', value: SessionStorage.getItem('auth') }
        ]
      }
    }
  }

I’m using:

Dev mode.......... spa
    Pkg quasar........ v1.0.0-beta.14
    Pkg @quasar/app... v1.0.0-beta.15

Has anyone an idea?
Many thanks in advance