@hawkeye64 Placed a breakpoint on the red line. On reload the breakpoint is hit 3 times. The first 2 times its ok, on the third time the style property of n is undefined. (So n is ok, n.style - undefined

I want to embed this component in my quasar project: https://github.com/gruhn/vue-qrcode-reader

I installed it via yarn and while reading the docs I came accross this warning:

⚠️ A css file is included when importing the package. You may have to setup your bundler to embed the css in your page.

The CSS file is in node_modules/vue-qrcode-reader/dist. Since I’m not familiar with WebPack I was wondering how is the RIGHT way to import this css? Should I copy it to my css folder and include it in the quasar.conf -> css array, or there is a better way?

@dobromir Another clue: yarn gives me this warning:
vuelidate-error-extractor@2.2.2" has unmet peer dependency "vue@^2.5.16".

Does somebody know why I’m receiving this error:
SAFARI

CHROME

In Firefox it does not show.

Everything works as expected, but I was wondering what is causing it

@s-molinari Yes Scott, you’re right that the select is in the toolbar. This is what happens with the dark prop

Almost, but I don’t like the darkened background when selecting an option. If there’s no other option I guess I’ll hide the prefix and leave it like this

The grey down arrow still bugs me though

Given this q-select:

    <q-select
            :options="languages"
            v-model="lang"
            prefix="Language: "
            color="white"
    />

I get this:

But using color="white" I thought I would get something like this:

How can I color the pointed elements white? The prefix, the option text, the pointed down arrow, and the underline?

@dobromir Try to reinstall Quasar-CLI. Then do a

$ quasar init <folder-name>
$ cd <folder-name>
$ quasar dev

I suggest enabling vuei18n in the init of the project because this way you’ll have a setup identical to mine.

With this and the code I posted in https://forum.quasar-framework.org/post/10043 you’ll have a setup identical to mine

@dobromir Yes. The codesandbox link was provided by @metalsadman in order to guide me on how to use your extension. I’m using Quasar CLI and in the 1st topic I have posted the related code. Can you run the extension by plugging it in the Quasar CLI created project with i18n? Because I and @metalsadman can’t get it to work. Do you need more code?

https://quasar-framework.org/components/internationalization.html#Dynamically-Changing-Language this described method to dynamically change the language. As you can see from my setLanguage function in mutations.js it’s the same thing as in the link, but it doesn’t work. Using Quasar.i18n.set(lang.default) to set the new language, the UI does not update and when I call Quasar.i18n.getLocale() afterwards I get us-gb, which is not the language that I’ve set.

Sorry for my bad English, if you cannot understand I’ll try to understand it better. See the code examples

I want to access the $i18n object in a vuex action in order to reactively change the language. Reading the documentation I came across https://quasar-framework.org/components/internationalization.html#Dynamically-Changing-Language but this doesn’t work for me.

Here’s what I’ve got. mutations.js

export function setLanguage (state, language) {
  state.currentLanguage = language
  LocalStorage.set(LANGUAGE, language)

  import(`src/i18n/${language}`).then(lang => {
    Quasar.i18n.set(lang.default)
    Quasar.i18n.locale = language
    console.log(Quasar.i18n.getLocale())
  })
}

1. lang is successfully populated with the corresponding language set.
2. I know this line Quasar.i18n.locale = language isn’t in the tutorial, but I tried with it.
3. The console.log below outputs the old language and in the UI nothing changes.

I successfully made a component that changes the language, which works reactively on the UI (everything is refreshed with the new language) using the $i18n injected property, but I don’t know how to access it outside of a Vue component

SelectLanguage.vue

<template>
    <q-select
            :options="[
      { label: 'English (US)',         value: 'en-us' },
      { label: 'Bulgarian (BG)',         value: 'bg-bg' },
        ]"
            v-model="lang"/>
</template>

<script>
export default {
  data () {
    return {
      lang: this.$q.i18n.lang
    }
  },
  watch: {
    lang (lang) {
      this.$i18n.locale = lang
    }
  }
}
</script>

Using the line this.$i18n.locale = lang everything just works.

Another question I have, which I’ll maybe answer myself if someone helps me with this problem, is how to access the fallbackLocale outside of a Vue component