How do I configure my @neutrinojs/vue project to accept at (@) sign for imports ?

[folaht]

I want to be able to do this:

import MyGuestbook from '@/components/MyGuestbook.vue'

Per usual this is the recommended solution:

webpack.config.js

resolve: {
    extensions: [
      '.js', '.vue', '.json'
    ],
    alias: {
      '@': resolve('src'),
      '@root': resolve('.')
    }
  }

However this does not work as the recommended package here is @neutrinojs/vue in combination with webpack and I’m still not familiar with either of them.

I’ve tried the following as well to no avail:

neutrinorc.js

module.exports = {
  use: [
    '@neutrinojs/standardjs',
    [
      '@neutrinojs/vue',
      {
        html: {
          title: 'Yropeên'
        }
      }
    ],
    '@neutrinojs/jest',
    (neutrino) => {
	  neutrino.config.resolve.extensions
	    .add('.js')
	    .add('.json')
	    .add('.vue');
		
      neutrino.config.resolve.alias
      .set('@', 'src')
      .set('@root', '.');
	}
  ]
};

[folaht]

yarn add babel-plugin-root-import -dev

.babelrc

{
  "plugins": [
    ["babel-plugin-root-import", {
      "rootPathSuffix": "src",
      "rootPathPrefix": "@"
    }]
  ]
}