[Solved] How to access route in a boot file?

ddenev

Hi,

I am developing a SPA that uses a 3-rd party WordPress REST API client library (wp-api) and currently I bootstrap it in a boot file like this:

import WPAPI from 'wpapi'

export default ({ Vue }) => {
  Vue.prototype.$wp = new WPAPI({
    endpoint: 'http://my-wordpress-app.local/?rest_route=/',
    username: 'username',
    password: 'password'
  })
}

Now, I need to supply the endpoint URL dynamically, so I pass it as a query parameter in the URL to my SPA, e.g. http://my-spa-app.local:8082/?site=http%3A%2F%2Fmy-wordpress-app.local&post=24

Is it possible to get the site URL parameter from Vue router in the boot file?

I tried console-logging router.currentRoute (after passing it to the boot file with export default ({ Vue, router }) of course) but none of the properties I’m interested in were populated.

It seems to me that the route is not yet ready when boot files are running but I might be missing something obvious.

I was also thinking about using the URLSearchParams API but it feels a little bit like a hack in the Vue/Quasar world. Is it OK to use it or should I struggle to find a way with Vue Router?

metalsadman

@ddenev export default ({ Vue, router }) => { router.push(...) } https://quasar.dev/quasar-cli/cli-documentation/boot-files#Anatomy-of-a-boot-file

ddenev

@metalsadman , thanks but I think you might have misunderstood my question

I need to get the query param from the URL, not push something to the route.

I am accessing my SPA at an URL that contains query params and I need to make those query params available in a boot file. I was hoping that the router would be prepared, at the time boot files run, to provide that info.

Or maybe I got your answer wrong?

tof06

@ddenev You also have a urlPath param. It contains the full path with query. You’ll have to parse it though.

But there’s something I don’t catch. Boot files are only executed on app initialization. If you change route inside your SPA, your boot file won’t be called again. So, it’s a bit strange to me to have a boot file dependent on a route ?

metalsadman

@tof06 said in How to access route in a boot file?:

@ddenev You also have a urlPath param. It contains the full path with query. You’ll have to parse it though.

But there’s something I don’t catch. Boot files are only executed on app initialization. If you change route inside your SPA, your boot file won’t be called again. So, it’s a bit strange to me to have a boot file dependent on a route ?

yep, @ddenev you probably need your logic in a navigation guard ie. router.beforeEach, ~~best place would be in your scr/router/index.js.~~ nvm, look like you can also implement the guard in the same boot file, from docs example https://quasar.dev/quasar-cli/cli-documentation/boot-files#Router-authentication.

ddenev

@metalsadman Yes, already checked the router docs, nothing fancy there. The path property of router.currentRoute is not populated, it just contains '/'.

@tof06 I noticed the urlPath in the docs as well and it’s an option, yes. It’s just similar to using the URLSearchParams API, e.g.:

const params = new URLSearchParams(location.search)
const endpoint = params.get('site')

I just wanted to use the Vue Router way before I fallback to native JS
To address your question about the route - I indeed need this only at app init (my SPA is called at this URL initially and the site is passed as a query param) - I am aware that the boot file won’t be called again, but then - I don’t need to.

@metalsadman said:

yep, @ddenev you probably need your logic in a navigation guard ie. router.beforeEach, ~~best place would be in your scr/router/index.js.~~ nvm, look like you can also implement the guard in the same boot file, from docs example https://quasar.dev/quasar-cli/cli-documentation/boot-files#Router-authentication.

Aha! That might seem it

export default ({ Vue, router }) => {
  router.beforeEach((to, from, next) => {
    console.log(to)
    next()
  })

and the to.query object now contains the site and post properties. Neat!

Thank you both!