Trying out Quasar Framework (QF) I ran into a minor challenge setting up the Webpack @ alias like Vue provides out of the box for imports.

import firebaseCfg from '@/firebase/config'

QF uses quasar.conf.js to simplify working with Webpack. So there is no Webpack config file that the alias can be added to directly.

Example of the Webpack resolve alias configuration that Vue provides out of the box.

  ...
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },
  ...

After some Googeling I found the solution. Add the following to quasar.conf.js file to get the @ alias to work.

At the top of the file.

let path = require('path')

To the build section.

  ...
  build: {
    scopeHoisting: true,
    vueRouterMode: 'history',
    // vueCompiler: true,
    // gzip: true,
    // analyze: true,
    // extractCSS: false,
    extendWebpack (cfg) {
      cfg.module.rules.push({
        enforce: 'pre',
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        exclude: /(node_modules|quasar)/
      })
      // Create aliases for importing
      cfg.resolve.alias = {
        ...cfg.resolve.alias,
        '@': path.resolve(__dirname, 'src')
      }
    }
  },
  ...

Pretty straight forward once you know how 🙂