NuxtJS webpack aliases

Solved by creating ts-shims.d.ts:

declare module '*.vue' {
  import Vue from 'vue'
  // noinspection JSUnusedGlobalSymbols
  export default Vue
}

webpack aliases are not respected in Typescript projects, your have to define the corresponding path mappings in tsconfig.json instead, like

"baseUrl": ".",
"paths": {
  "~/*": [
    "./*"
  ],
  "@/*": [
    "./*"
  ]
},

>Solved by creating ts-shims.d.ts

Yes, you need to tell the TypeScript compiler what .vue files will look like when they're imported

See https://github.com/Microsoft/TypeScript-Vue-Starter#single-file-components

Elena, this works for TS imports inside .vue/.ts files, but if i import scss inside .vue/.scss file, then i have to create a fake webpack.config.js with the following contents:

const path = require('path')

module.exports = {
  resolve: {
    // for WebStorm
    alias: {
      '@': path.resolve(__dirname)
    }
  }
}

Then WebStorm is able to follow scss imports in a .vue/.scss files, by using @import '~@/assets/scss/file.scss';

That's because of NuxtJS is generating webpack config file only during a build. Is that right solution?

>Is that right solution?

Yes:)

One thing is bothering me, how can i make autocomplete work with this setup?

what problems making it work have you faced?

Please, take a look at this video: https://youtu.be/dCCEjM6-u-M

No path autocomplete.

Thanks, reproduced. Please follow https://youtrack.jetbrains.com/issue/WEB-41982 for updates

Seems like not so many people are actually using WebStorm? Because these issues is still unnoticed. I started to use it 1 week ago and created loads of issues in youtrack already :)

Now i use this solution. Now used Vue.js without TypeScript.

Code put in "webpack.config.js". It ignored by "nuxt", but used by IDE.

And, "yes", notes in files refers to this page. Need to test this solution, when we starting to use TypeScript 

// For "hint" about "import path" with "~"
//  Go to "Settings -> Language & Frameworks -> Javascript -> Webpack" and choose this file.
//  https://github.com/nuxt/nuxt.js/issues/2936

// [Possible_alternative]-[BEGIN]
//  https://intellij-support.jetbrains.com/hc/en-us/community/posts/360006380799-NuxtJS-webpack-aliases
//
// Solved by creating ts-shims.d.ts:
// ---
// declare module '*.vue' {
//   import Vue from 'vue'
//   // noinspection JSUnusedGlobalSymbols
//   export default Vue
// }
// ---
// [Possible_alternative]-[END]

// About "path.resolve"
//  https://webpack.js.org/configuration/resolve/

module.exports = {
    resolve: {
        // for IDE (WebStorm, PyCharm, etc)
        alias: {
            '@': path.resolve(__dirname, 'webclient/'),
            '~': path.resolve(__dirname, 'webclient/'),
        }
    }
};

As of 2020/03 (https://github.com/nuxt/nuxt.js/pull/7029) you can set manual path to `node_modules/nuxt/webpack.config.js`