Here is the solution (with the help from @eduardodgarciac):

onTouchPan (event) {
  if (event.isFirst) {
    this.$nextTick(() => {
      document.documentElement.style.cursor = 'col-resize'
    })
  }
  if (event.isFinal) {
    // no need to revert the cursor here since TouchPad does this anyway
  }
}

Hi,

I’m trying to utilize the TouchPan directive in order to enable drag-n-drop for a div element.

That div plays the role of a “drag handle” for a QDrawer and I need the cursor to be “col-resize” during the dragging. The default cursor while panning is “grabbing” and I don’t know how to change it.

I tried changing the cursor in the first handler call:

onTouchPan (event) {
  if (event.isFirst) {
    document.documentElement.style.cursor = 'col-resize'
  }
  if (event.isFinal) {
    document.documentElement.style.cursor = ''
  }
}

but this did not work - in the TouchPan.js code, the “grabbing” cursor is set after the call to my handler.

I also don’t want to set the cursor outside of “isFirst” check because that would effectively set the style on every event, which is a lot.

Any ideas?

Hi,

I upgraded the following packages:

• eslint 5.16.0 => 6.7.1
• eslint-plugin-vue 5.2.3 =>6.0.1
• @vue/eslint-config-standard 4.0.0 => 5.0.0

and now when I start my dev app I get a list of the following warnings:

Module Warning (from ./node_modules/eslint-loader/dist/cjs.js):
Failed to load plugin 'import' declared in '.eslintrc.js » @vue/eslint-config-standard » D:\Projects\editor\node_modules\eslint-config-standard\index.js': Cannot find module 'eslint-plugin-import'
Require stack:
- D:\Projects\editor\__placeholder__.js

I also get an error in WebStorm (when I open a .js file) with a stacktrace:

Error: Failed to load plugin 'import' declared in '.eslintrc.js » @vue/eslint-config-standard » D:\Projects\editor\node_modules\eslint-config-standard\index.js': Cannot find module 'eslint-plugin-import'
Require stack:
- D:\Projects\editor\__placeholder__.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:954:17)
    at Function.resolve (internal/modules/cjs/helpers.js:75:19)
    at Object.resolve (D:\Projects\editor\node_modules\eslint\lib\shared\relative-module-resolver.js:44:50)
    at ConfigArrayFactory._loadPlugin (D:\Projects\editor\node_modules\eslint\lib\cli-engine\config-array-factory.js:957:39)
    at D:\Projects\editor\node_modules\eslint\lib\cli-engine\config-array-factory.js:846:33
    at Array.reduce (<anonymous>)
    at ConfigArrayFactory._loadPlugins (D:\Projects\editor\node_modules\eslint\lib\cli-engine\config-array-factory.js:842:22)
    at ConfigArrayFactory._normalizeObjectConfigDataBody (D:\Projects\editor\node_modules\eslint\lib\cli-engine\config-array-factory.js:665:32)
    at _normalizeObjectConfigDataBody.next (<anonymous>)
    at ConfigArrayFactory._normalizeObjectConfigData (D:\Projects\editor\node_modules\eslint\lib\cli-engine\config-array-factory.js:594:20)
Process finished with exit code -1

Is Quasar compatible with ESlint 6.x or shall I stick to 5.x?

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

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

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?

An update to the solution has been added above

I am using 1.1.1.1 as my resolver but I still cannot get to the quasar.dev site.

Using https://www.digwebinterface.com/?hostnames=quasar.dev&type=A&trace=on&ns=resolver&useresolver=1.1.1.1 it resolves to 34.65.177.142
Using https://www.digwebinterface.com/?hostnames=quasar.dev&type=A&ns=resolver&useresolver=1.1.1.1 it resolves to 34.65.228.161

I have put the latter in my hosts file and can open the site but is this IP the correct one? Will it change in the future?

@metalsadman - sure, go ahead

I have found the following solution:

1. Install the “raw-loader” loader
2. Import the SCSS using the following statement:

import style from '!raw-loader!sass-loader!./my-styles.scss'

Note: the “!” at the beginning is to override the default loaders configuration. In my case Quasar chains the “style-loader” for SCSS files by default (to output a tag in the head) so I have to disable it in this case.

And now I have the compiled CSS code in the  style  variable.

Update: After adding the above import statement, my ESLint complained that I shouldn’t use the import syntax to configure webpack loaders (more details why: https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-webpack-loader-syntax.md). So I removed the import statement and added this code to my quasar.conf.js:

build: {
  // ...
  extendWebpack (cfg) {
    // ...
    const ruleIndex = cfg.module.rules.findIndex(rule => rule.test.toString() === '/\\.scss$/')
    cfg.module.rules[ruleIndex].oneOf.unshift({
      test: /my-styles\.scss$/,
      use: [
        'raw-loader',
        {
          loader: 'postcss-loader',
          options: {
            plugins: [
              require('autoprefixer')
            ]
          }
        },
        'sass-loader'
      ]
    })
    // ...
  }
  // ...
}

Note that in this case I have also added the postcss-loader with the autoprefixer plugin as I wanted my CSS to be enriched with vendor prefixes.