Quasar v2 create re-usable js file with vue3

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

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.

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

Spread the love

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.