I was making this far more difficult then it needed to be actually. I just ended up importing two different stylus sheets. Each with a header of for example .darktheme and .lighttheme. Then just change the class on the root element and it works perfect. Thank you for getting back to me!

Good Evening!

I’ve been working on converting our app over to the newest .15 version that was released. I had a question come up thought that I’m curios on how y’all handle it. I’m fairly new to Vue as well so may be a basic question.

Prior to .15 I was throwing axios and a few other general items into the window, now I’m trying to use them inside a plugin. Inside of my “auth” store actions.js file I’m trying to access some functions included in some of the plugin files. For example “this.$axios”. I can access these easily from the pages or components folders just not from anything inside the stores folder. Should I be accessing it differently? Heres what I’ve tried:
Vue.$axios
Vue.prototype.$axios

Again probably something simple but racking my brain on this one!

Hey All!

Relatively new to the Quasar Framework and cant tell if I’m running into a limitation of the frameworks or just having a total brain fart. We are using the mat theme and I have a layout setup and working great. We are wanting to give the users the ability to select between “Theme 1” and “Theme 2” which will basically just change up some colors on the pages.

I’ve tried everything that comes to mind and tried finding other people doing something similar but not having much luck. As an over simplified example heres what I’m trying to do:

<script>
    import { QLayout } from 'quasar'

    var cssfile = 'DarkCSS'
    import '@/themes/'+cssfile+'.styl'

    export default {
        components: { QLayout },
        data () {
           return {}
        },
.....
</script>

If I use “import ‘@/themes/DarkCSS.styl’” it works just fine so I know at least that will work. But I want it controlled by Vue so doesnt really help me much! I’ve also tried throwing it down in the <style> tags at the end of the page but I cannot use Vue variables down there to control which css file is loaded. Also I dont have to use stylus I can switch over to CSS for what I’m trying to do and maybe thats my only option!?

I’m sure I am just trying to go about this completely wrong any advice would be great!

@lucianoreis I put them right under where you create axios.

  Vue.prototype.$axios = axios.create({
    baseURL: 'http://localhost:80'
  })

  Vue.prototype.$axios.interceptors.response.use(function (response) {

@haizone said in 3 questions I have!?:

@benoitranque many thanks
U have maybe a good tutorial for the framework and Cordova plugin ?

I would start here: http://quasar-framework.org/guide/cordova-introduction.html

The docs are good and work they have a page that goes over Cordova plugins as well. This is just going to get your app setup to work with Cordova though. From there you’ll need to do some research on cordova probably starting on it’s site: https://cordova.apache.org/

Yeah since the update same here. I can get about 6 updates and it’ll crash. Thanks for the link Hawkeye.

Can you show us the code calling “isInteger”? I’ve had nothing but great success with small and large apps with Quasar/Cordova. Sometimes it can get a little tricky though. 1/4th the time is developing in the emulator just to get concepts down and working. The other 3/4 of the project is getting it to work on the actual devices.

Hey All,

I’m working with q-select and trying to figure out how to search/type on focus. A regular select box if you tab into it you can start typing and it auto select as you go. Most semi-power users will use this as a time saver. Right now they’ll have to tab then click the enter key or space bar to bring it up which most users wont know to do.

Is there a correct way to do this?

–

The other issue I’ve found while playing around is when a user does click into it and if you have a filter enabled when they select an option the focus is out of order at that point so if they tab it will then start over from the top of the page. If they tab into it, dont select anything, tab again, it continues as it should. This is more of a heads up for others.

@haizone said in 3 questions I have!?:

@benoitranque many thanks
U have maybe a good tutorial for the framework and Cordova plugin ?

I would start here: http://quasar-framework.org/guide/cordova-introduction.html

The docs are good and work they have a page that goes over Cordova plugins as well. This is just going to get your app setup to work with Cordova though. From there you’ll need to do some research on cordova probably starting on it’s site: https://cordova.apache.org/

Having a tough time tracking this one down but maybe y’all have seen something like it. The code looks fine and works great on dev so not sure what I’m missing… This is being built with 0.15.3, running with quasar dev it works perfect.

Error I’m getting is: _this.userTheme is not a function

Here’s what the function looks like:

export const userTheme = (state) => {
  var pi = _.findIndex(state.user.properties, function (o) {
    return o.type === 'theme'
  })
  if (pi > -1) {
    return _.toInteger(state.user.properties[pi].value)
  } else {
    let ct = this.customerTheme(state)
    if (ct === -1) {
      return 0
    } else {
      return ct
    }
  }
}

export const whichThemeNamed = (state) => {
  let which = this.userTheme(state) <-------Errors out here
  which = (which === 0) ? 'lighttheme' : 'darktheme'
  t.$log('Which Theme Named', {
    theme: which
  })
  return which
}

Yeah I was over thinking it I guess. All I had to do was import Vue and all my prototype methods were then available. I didnt think it would work like this because I was assuming it would create a new instance of Vue and not have the same setup as the initial/main instance.

@lucianoreis I put them right under where you create axios.

  Vue.prototype.$axios = axios.create({
    baseURL: 'http://localhost:80'
  })

  Vue.prototype.$axios.interceptors.response.use(function (response) {

Good Evening!

I’ve been working on converting our app over to the newest .15 version that was released. I had a question come up thought that I’m curios on how y’all handle it. I’m fairly new to Vue as well so may be a basic question.

Prior to .15 I was throwing axios and a few other general items into the window, now I’m trying to use them inside a plugin. Inside of my “auth” store actions.js file I’m trying to access some functions included in some of the plugin files. For example “this.$axios”. I can access these easily from the pages or components folders just not from anything inside the stores folder. Should I be accessing it differently? Heres what I’ve tried:
Vue.$axios
Vue.prototype.$axios

Again probably something simple but racking my brain on this one!

@eleina @Max yes I have these two lines un-commented

require(quasar/dist/quasar.ie)
require(quasar/dist/quasar.ie.${__THEME}.css)

This is really odd! I tried on a couple different computers just to make sure it wasn’t something with this one and it did the same thing. I’ll start a new/blank project tonight and see if its a different package causing it.