PHPstorm using @ for path declaration not working

Hello there,

i am trying to get my declarations to work using @
import Component from '@/components/test.vue';
But what i get ist Cannot find declaration.
The src folder is marked as Resource root.

I hope that this description is enough that someone can understand my problem.

Thanks in advance

Comment actions Permalink

Make sure to specify path/to/node_modules/@vue/cli-service/webpack.config.js as a value of  Settings | Languages & Frameworks | JavaScript | Webpack, webpack configuration file and re-open the project


Comment actions Permalink

I'm having the exact same issue, except that I am using Laravel mix, and I put my webpack.config.js file at the root of my project. The alias seemed to break when I restarted my machine this afternoon. I just updated to PHPStorm 2020.1 yesterday.


When I run npm run dev or watch, I get "Error: Cannot find module '@/components/Components'"


const path = require('path')
const webpack = require('webpack')

module.exports = {

resolve: {
extensions: ['.js', '.json', '.vue'],
alias: {
'@': path.resolve(__dirname, './resources/assets/js')


Comment actions Permalink

as the error occurs when building your application, it doesn't seem to have anything to do with the IDE. Something is wrong with your project setup

Comment actions Permalink

Of course you're correct. My mistake -- I should have realized that before commenting. I ran ran npm install again, and now it works fine. 

Comment actions Permalink

same problem here on a vue-cli project

there is no webpack config by default, so i tried the solution given by Elena Pogorelova

but no success.


i tried on a nuxt project, and click navigation on paths with @ alias for vue components is working fine. so no idea what(s wrong on the vue-cli project.

i tried to copy the eslintrc config for paths, but still no success.



Please sign in to leave a comment.