October 2021

I had a little problem migrating Quasar v1 to v2. I wanted to have a re-usable (importable) .js file that I could import in every SFC.
This particular case used i18n.

I create a directory lib under the src dir.
Since this .js file was to set the default menu items in every SFC I named it defaultItems.js.
So it lives in src/lib/defaultItems.js

The content of the file

import { useStore } from 'vuex'
import { useI18n } from 'vue-i18n';

export default function () {
  const i18n = useI18n()
  const items = [
    {
      label: i18n.t('sidebar.home'),
      to: {path: '/'}
    },
    {
      label: i18n.t('sidebar.feed'),
      to: {path: '/feed/'}
    },
    {
      label: i18n.t('sidebar.groups'),
      to: {path: '/groups/'}
    }
  ]
  const store = useStore()
  store.dispatch('sideMenu/setItems', items)
}

import { useStore } from 'vuex'

import { useI18n } from 'vue-i18n';

export default function () {

const i18n = useI18n()

const items = [

{

label: i18n.t('sidebar.home'),

to: {path: '/'}

{

label: i18n.t('sidebar.feed'),

to: {path: '/feed/'}

{

label: i18n.t('sidebar.groups'),

to: {path: '/groups/'}

}

]

const store = useStore()

store.dispatch('sideMenu/setItems', items)

}

You see a bunch of things.

import { useStore } from 'vuex'
and
import { useI18n } from 'vue-i18n';

Vue3 has this new use* functions that allow for instance vuex to be accessed via useStore() or vue-i18n to be accessed via useI18n() anywhere.

So that’s pretty simple.

You can now import the defaultItems.js file in your SFC.

<script>
import defaultItems from 'src/lib/defaultItems';

export default defineComponent({
  name: 'PageIndex',
  mounted() {
    defaultItems()
  }
})
</script>

import defaultItems from 'src/lib/defaultItems';

export default defineComponent({

name: 'PageIndex',

mounted() {

defaultItems()

}

})

</script>

Of course now that I see this, it’s wrong to store the translated text in the vuex store. Only the references should be stored there and the translation should happen in the display component.
e.g. the label shouldn’t be i18n.t(‘sidebar.home’) but only ‘sidebar.home’ and later do $t() or <v-t> in the component

Month: October 2021

Quasar v2 create re-usable js file with vue3