State management - vue-stash

  • Hi guys,

    I’ve been very happy using the vue-stash alternative to Vuex.
    Problem is I had to manually edit the entry.js file to accomodate for its usage since it requires the store to be defined in the data object of the first Vue instance ( new Vue(app) ) to be injected in all components.
    Here’s what I did to make it work:

    <% if (store) { %>data: {store},<% } %>

    Instead of:

    <% if (store) { %>store,<% } %>

    However I did this only for the SPA template. And if I ever update the cli it will be reset so it’s not really persistant. 🙂
    I tried to put a different identifier there, for example stash, but I don’t know where does it come from.
    I’d love to do a PR to support vue-stash if I understand the inner workings better.
    I saw references to plugins, animations - all quasar.conf.js properties, so I fiddled with it and the cli files, but no success.

  • I think I made it work:
    Set stash: true in quasar.conf.js

    stash: true,
    // app plugins (/src/plugins),
    plugins: ['i18n', 'axios'],

    Then in cli entry.js

    <% if (stash) { %>
    import stash from 'src/stash'
    <% } %>
    const app = {
      el: '#q-app',
    <% if (store) { %>store,<% } %>
    <% if (stash) { %>data: { store: stash },<% } %>

    Your stash file has to look something like this:

    import Vue from 'vue';
    import VueStash from 'vue-stash';
    const store = {
      user: {
        name: 'cody'
    export default store;

    You can also load vue-stash like a plugin with the new tooling (like axios, i18n…), but you still need to export the store(stash) file.

  • Admin


    This can be done entirely using the app plugin system. Notice you can do injections to app (export default ({ ...., >>> app <<<, ...})) and you can also re-export any other things you need, like the store, if you really need it (const store = { ..... } then export { store, ...any_other_named_export }).

    Also, worth mentioning that app is ‘src/App.vue’, so if you feel uncomfortable to do the data injection in an app plugin, you can directly do that in src/App.vue.

    There is no need to touch entry.js, nor should you.

  • Thanks a lot! I saw the injections but it didn’t really occur to me. 🙂
    I’ll definitely try that. I’m glad if it can be done without modifications to the quasar core.

    Update: That did the trick. Thank you so much! BTW I used the plugin system. 🙂

  • @danikane

    I wish to use vue-stash, but without much success. can you give a step-by-step setup for using it as plugin? thanks in advance!

  • This is the way I am using vue-stash

    npm install vue-stash

    Then :

    quasar new plugin store

    it creates store.js in the src/plugins folder. Open it and add :

    // import something here
    import VueStash from 'vue-stash'
    // leave the export, even if you don't use it
    export default ({ app, router, Vue }) => {
      // something to do
      Vue.use(VueStash) = {
        store: {
    // define your data here for example
         user: {
             name: 'Bob',
             email: ''

    Then you have to open the quasar config : quasar.conf.js and add ‘store’ in the plugins array

    plugins: [

    and your good to go. To load the store in your vue files, include :

    store: {
    \\ precise the date you want top import here, for example as mentioned above

    be careful to completely define your data in the store.js file if you want them to be reactive.

  • when use:

    quasar new plugin store

    i get the following error:

    app:new ⚠️  Invalid asset type: plugin +0ms

  • Are you using v1? “Plugin” is now called “boot”

  • Yes, indeed, thanks

    now I try to make it works.
    did as the example above, but when try to get I get undefined
    but I get 140+ errors like this:

    typeError: Cannot set property $store of #<Vue> which has only a getter...

  • @itailewin
    fixed by removing VUEX,

Log in to reply