Access files in the root with simple method

[Hariprasath]

i have mixin folder with some files inside the src folder of quasar
i have files that present inside the folder with a long path
when i want to access the mixin from the file i have to mention long parent path notation in the import statement
if i have short method like ‘@’ symbol to access the ‘src’ folder directly from any file, i am very happy to use quasar
i have this method in previous projects with vue and other vue templates

[s.molinari]

You can also do relative imports by using ../ or ../../.

This @ bit is a Webpack setting: https://webpack-gatsby.netlify.com/configuration/resolve/#resolve-alias

Which you can change to your heart’s desire in quasar.conf.js.

https://quasar-framework.org/guide/app-quasar.conf.js.html#Extending-Webpack-Config-Object

Scott

[Hariprasath]

OK Thank you very Much i got the result
Just Include

    cfg.resolve.alias = {
      ...cfg.resolve.alias,
      '@': path.resolve(__dirname, './src')
    }

at

    extendWebpack (cfg)

function under build object and add

    var path = require('path')

at top of the page

[kosirm]

@Hariprasath Thanks! It’s in documentation, but anyway

[DarkLite1]

@s-molinari Just a small question on this. In the docs this is mentioned:

Does that mean when you can use the following:

import authPopup from 'src/services/auth/authPopup'

Or does it need to be prefixed like shown in many Webpack config?

import authPopup from '@src/services/auth/authPopup'

[s.molinari]

Prefixing the aliases with ‘@’ is something Vue does in their project starter kit. Quasar doesn’t do that and yes, instead of doing ../ or ../../../ to travers up the folder hierarchy, you can just use src/your-path-here and you are good to go.

And if you feel really rambunctious, you could also add the /services folder as an alias too, if you’ll be using it often, so all you’ll need to write is services/auth/authPopup.

Scott