How can I access vue instance?



  • I have had several problems with flow.
    I would like to access the localStorage (plugin) inside router / index.js for example.

    But the quasar load Router and then loads thePlugins, thus being Vue.localStorage be undefined :/.

    plugins/localStorage.js

    import VueLocalStorage from 'vue-localstorage'
    
    export default ({ app, router, Vue }) => {
    
      Vue.use(VueLocalStorage)
    
    }
    
    

    router/index.js

    import Vue from 'vue'
    import VueRouter from 'vue-router'
    
    import routes from './routes'
    
    Vue.use(VueRouter)
    
    const Router = new VueRouter({
      /*
       * NOTE! Change Vue Router mode from quasar.conf.js -> build -> vueRouterMode
       *
       * If you decide to go with "history" mode, please also set "build.publicPath"
       * to something other than an empty string.
       * Example: '/' instead of ''
       */
    
      // Leave as is and change from quasar.conf.js instead!
      mode: process.env.VUE_ROUTER_MODE,
      base: process.env.VUE_ROUTER_BASE,
      scrollBehavior: () => ({ y: 0 }),
      routes
    })
    
    Router.beforeEach((to, from, next) => {
      Vue.localStorage.set('teste', 'teste')
      next()
    })
    
    export default Router
    
    

    I need to access localStorage to check if a saved token exists, and if there is user information look for on the server.



  • Yeah that propblem is not so easy to solve.
    For your particular problem you could use the Quasar built in LocalStorage utility which you can import everywhere: http://quasar-framework.org/components/web-storage.html

    Edit
    While in this case using Quasars LocalStorage utility would probably more preferable because of one less dependency, I just talked to Raz and of course there is a simple solution. 😃

    The Vue.use() statement is just there to tell Vue.js to use this plugin, so just import the plugin in your router file and use it there. There is also no need to call Vue.use() only in Quasar plugins, you can also call it in your router.

    Furthermore it is totaly possible to export stuff in your Quasar plugins (in the end they are jsut plain JS files which export a function which Quasar runs on initialization) so you can export stuff in your plugin and use it somewhere else.



  • @a47ae Can not make it work. Even following the documentation.

    import Vue from 'vue'
    import VueRouter from 'vue-router'
    import { LocalStorage } from 'quasar'
    
    import routes from './routes'
    
    Vue.use(VueRouter)
    
    const Router = new VueRouter({
      /*
       * NOTE! Change Vue Router mode from quasar.conf.js -> build -> vueRouterMode
       *
       * If you decide to go with "history" mode, please also set "build.publicPath"
       * to something other than an empty string.
       * Example: '/' instead of ''
       */
    
      // Leave as is and change from quasar.conf.js instead!
      mode: process.env.VUE_ROUTER_MODE,
      base: process.env.VUE_ROUTER_BASE,
      scrollBehavior: () => ({ y: 0 }),
      routes
    })
    
    Router.beforeEach((to, from, next) => {
      LocalStorage.set('test_key', 123)
      
      next()
    })
    
    export default Router
    
    

    return:
    alt text

    Yes, im add plugin in config quasar.

        framework: {
          components: [
            'QLayout',
            'QLayoutHeader',
            'QLayoutDrawer',
            'QPageContainer',
            'QPage',
            'QToolbar',
            'QToolbarTitle',
            'QBtn',
            'QIcon',
            'QList',
            'QListHeader',
            'QItem',
            'QItemMain',
            'QItemSide',
            'QField',
            'QInput',
            'LocalStorage'
          ],
    

    What am I thinking wrong?


  • Admin

    @danielsalles Please update to Quasar CLI v0.15.11 in your project folder.



  • @rstoenescu

    I did the npm update, and updated the quasar cli.

    But the error persisted.

    alt text


  • Admin

    What does your “$ quasar info” say?



  • @rstoenescu This

    Operating System        	Linux(4.15.5-1-ARCH) - linux/x64
    NodeJs                  	9.6.1
    
    Global packages         	
      NPM                   	5.7.1
      yarn                  	1.3.2
      quasar-cli            	0.15.11
      vue-cli               	2.9.3
      cordova               	8.0.0
    
    Important local packages	
      quasar-cli            	0.15.11	(Quasar Framework CLI)
      quasar-framework      	0.15.7	(Build responsive websites, PWAs, hybrid mobile apps and Electron apps, all simultaneously using same codebase)
      quasar-extras         	1.0.2	(Quasar Framework fonts, icons and i18n.)
      vue                   	2.5.15	(Reactive, component-oriented view layer for modern web interfaces.)
      vue-router            	3.0.1	(Official router for Vue.js 2)
      vuex                  	3.0.1	(state management for Vue.js)
      electron              	Not available
      babel-core            	6.26.0	(Babel compiler core.)
      webpack               	3.11.0	(Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.)
      webpack-dev-server    	2.11.1	(Serves a webpack app. Updates the browser on changes.)
    
    Networking              	
      Host                  	anarchy
      wlp2s0                	192.168.1.109
    
    

    Strange heheh.


  • Admin

    Did you add ‘LocalStorage’ to quasar.conf.js > framework > plugins ?



  • @rstoenescu Oh, my bad.

    I had added in components. Now I’ve got it, and it’s working.

    Many thanks for the support offered 🙂