How can I access vue instance?

danielsalles

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 the Plugins, 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.

a47ae

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.

danielsalles

@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?

rstoenescu

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

danielsalles

@rstoenescu

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

But the error persisted.

alt text

rstoenescu

What does your “$ quasar info” say?

danielsalles

@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.

rstoenescu

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

danielsalles

@rstoenescu Oh, my bad.

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

Many thanks for the support offered

No More Posting New Topics!

How can I access vue instance?