@ import alias for vue files with Laravel mix / webpack

Importing vue components and files is easy however sometimes when in nested components import statements look like:

import ../../../components/mycomponent

This can be a problem, especially when the component gets moved to another directory etc. This can all be solved by adding the following to the webpack.mix.js file when using Laravel Mix.

mix.webpackConfig({
    resolve: {
        extensions : [ '.js', '.vue', '.json' ],
        alias: {
            '@': __dirname + '/resources/js'
        },
    },
});

Now files can be imported like this:

import @/components/mycomponent