How to shortcut the path to the assets directory in vuejs SPA?

You can do that by defining an alias in your Webpack config.

For example, assuming your working with a Laravel Mix based project, create a file called webpack.config.js with the following content:

const path = require('path')

module.exports = {
  resolve: {
    alias: {
      '@assets': path.resolve(__dirname, '<path-to-assets-folder')
    }
  }
}

@sidneygijzen Thanks :

my files structure is :

node_modules
---------------------
public
---------
resources|
-------------------|js
                        -----|assets
                               -----------|svg
                                              ------|files(...)

I dont have webpack.config.js but I have webpack.mix.js

I added in webpack.mix.js

const path = require('path')

module.exports = {
    resolve: {
        alias: {
            '@assets': path.resolve(__dirname, 'resources/js/assets')
        }
    }
}

in component :

<img src='@assets/svg/icons8-bus-30.png'/>

and it's not working !

It indeed doesn't work to put that code directly in webpack.mix.js. You really have to create a file called webpack.config.js with the mentioned content.

Additionally you have to load the config then in webpack.mix.js with the following

const webpackConfig = require('./webpack.config')

mix.webpackConfig(webpackConfig)

If you don't want to use a separate config file, I think adding the following snippet in webpack.mix.js should work as well:

mix.webpackConfig({
  resolve: {
    alias: {
      '@assets': path.resolve(__dirname, '<path-to-assets-folder')
    }
  }
})

More info see the Laravel Mix docs page.

This will work to create an alias in webpack.mix.js

mix.webpackConfig({
        resolve: {
            alias: {
                '@assets': path.resolve('resources/js/assets'),
            },
        },
    })

Thanks @sidneygijzen Thanks @wingly