Laravel Mix Alias

Laravel Mix Alias

Laravel Mix Alias is an NPM package that provides a convenience method around WebPack’s resolve.alias configuration.

Here’s an example of how you can make require and import statements simpler:

const mix = require('laravel-mix');
require('laravel-mix-alias');

mix.alias({
    '@': '/resources/assets/js',
    '~': '/resources/assets/sass',
    '@components': '/resources/assets/js/components',
});

Which enables you to write import statements like this:

import '~/variables'
import '@components/ToggleInput.vue';

If you’re not familiar with Webpack’s resolve.alias config, here’s how you can use it in Mix without this package:

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

You might prefer the convenience of the mix.alias method this package provides over resolving paths; however, if you prefer this without a package this configuration isn’t super complicated.

If you would like to learn more about extending laravel-mix, Jeffrey Way has provided a helpful document on building a plugin for Laravel Mix. Check it out for ideas on tapping into Laravel Mix!

To learn more about the Laravel Mix Alias package check it out on GitHub at MaximVanhove/laravel-mix-alias and the NPM package laravel-mix-alias.

Filed in: News / Mix

Newsletter

Join 31,000+ others and never miss out on new tips, tutorials, and more.

Laravel News Partners

Laravel Jobs

Senior Fullstack Developer / Architect (w/m/d)
Remote / Munich - Germany
envivo.select GmbH
Medior full stack developer (Laravel)
Deventer (or remote) in the Netherlands, Dutch speaking required.
MSML B.V.
Senior Full Stack PHP Developer (Laravel)
Remote
MAPPEN
Senior Laravel Developer
Remote
ACTO
Senior Full-Stack Engineer
[REMOTE: USA Only]
Curricula