Laravel Mix | laravel-medialibrary-pro | Spatie

 SPATIE

laravel-medialibrary-pro
========================

spatie.be/open-source

  [Docs](https://spatie.be/docs)  [Laravel-medialibrary-pro](https://spatie.be/docs/laravel-medialibrary-pro/v6)  Legacy  Laravel Mix

 Version   v6

 Other versions for crawler [v6](https://spatie.be/docs/laravel-medialibrary-pro/v6)

- [ Introduction ](https://spatie.be/docs/laravel-medialibrary-pro/v6/introduction)
- [ Requirements ](https://spatie.be/docs/laravel-medialibrary-pro/v6/requirements)
- [ License ](https://spatie.be/docs/laravel-medialibrary-pro/v6/license)
- [ Getting help ](https://spatie.be/docs/laravel-medialibrary-pro/v6/getting-help)
- [ Upgrading ](https://spatie.be/docs/laravel-medialibrary-pro/v6/upgrading)
- [ About us ](https://spatie.be/docs/laravel-medialibrary-pro/v6/about-us)
- [ ](https://spatie.be/docs/laravel-medialibrary-pro/v6/demo-application)

Blade
-----

- [ Installation ](https://spatie.be/docs/laravel-medialibrary-pro/v6/blade/installation)
- [ Usage ](https://spatie.be/docs/laravel-medialibrary-pro/v6/blade/usage)

Livewire
--------

- [ Installation ](https://spatie.be/docs/laravel-medialibrary-pro/v6/livewire/installation)
- [ Attachments ](https://spatie.be/docs/laravel-medialibrary-pro/v6/livewire/attachments)
- [ Collection ](https://spatie.be/docs/laravel-medialibrary-pro/v6/livewire/collection)
- [ Uploading to S3 ](https://spatie.be/docs/laravel-medialibrary-pro/v6/livewire/uploading-to-s3)

React
-----

- [ Installation ](https://spatie.be/docs/laravel-medialibrary-pro/v6/react/installation)
- [ Usage ](https://spatie.be/docs/laravel-medialibrary-pro/v6/react/usage)
- [ Available props ](https://spatie.be/docs/laravel-medialibrary-pro/v6/react/available-props)
- [ Inertia ](https://spatie.be/docs/laravel-medialibrary-pro/v6/react/inertia)
- [ Next.js ](https://spatie.be/docs/laravel-medialibrary-pro/v6/react/nextjs)
- [ Translations ](https://spatie.be/docs/laravel-medialibrary-pro/v6/react/translations)
- [ Vapor support ](https://spatie.be/docs/laravel-medialibrary-pro/v6/react/vapor)
- [ Creating custom components ](https://spatie.be/docs/laravel-medialibrary-pro/v6/react/creating-custom-components)

Vue.js
------

- [ Installation ](https://spatie.be/docs/laravel-medialibrary-pro/v6/vue/installation)
- [ Usage ](https://spatie.be/docs/laravel-medialibrary-pro/v6/vue/usage)
- [ Available props ](https://spatie.be/docs/laravel-medialibrary-pro/v6/vue/available-props)
- [ Inertia ](https://spatie.be/docs/laravel-medialibrary-pro/v6/vue/inertia)
- [ Translations ](https://spatie.be/docs/laravel-medialibrary-pro/v6/vue/translations)
- [ Vapor support ](https://spatie.be/docs/laravel-medialibrary-pro/v6/vue/vapor)
- [ Creating custom components ](https://spatie.be/docs/laravel-medialibrary-pro/v6/vue/creating-custom-components)

Security
--------

- [ Authorisation ](https://spatie.be/docs/laravel-medialibrary-pro/v6/security/authorisation)
- [ Configure allowed mime types ](https://spatie.be/docs/laravel-medialibrary-pro/v6/security/allowed-mime-types)
- [ Rate limiting ](https://spatie.be/docs/laravel-medialibrary-pro/v6/security/rate-limiting)

Advanced
--------

- [ Customizing CSS ](https://spatie.be/docs/laravel-medialibrary-pro/v6/advanced/customizing)
- [ Customize the preview images ](https://spatie.be/docs/laravel-medialibrary-pro/v6/advanced/custom-preview-images)
- [ Customize the upload URL ](https://spatie.be/docs/laravel-medialibrary-pro/v6/advanced/customiz-upload-url)
- [ Usage in a frontend repository ](https://spatie.be/docs/laravel-medialibrary-pro/v6/advanced/usage-in-a-frontend-repository)

Legacy
------

- [ Livewire 2 ](https://spatie.be/docs/laravel-medialibrary-pro/v6/legacy/livewire-2)
- [ Laravel Mix ](https://spatie.be/docs/laravel-medialibrary-pro/v6/legacy/laravel-mix)

 Laravel Mix
===========

###  On this page

1. [ Using Laravel Mix or Webpack with css-loader ](#content-using-laravel-mix-or-webpack-with-css-loader)
2. [ Vue specific configuration ](#content-vue-specific-configuration)

Using Laravel Mix or Webpack with css-loader
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

You can import the built CSS in your own CSS files using `@import "vendor/spatie/laravel-medialibrary-pro/resources/js/media-library-pro-styles";`.

This isn't a very pretty import, but you can make it cleaner by adding this configuration to your Webpack config:

**laravel-mix >6**

```
mix.override((webpackConfig) => {
    webpackConfig.resolve.modules = [
        "node_modules",
        __dirname + "/vendor/spatie/laravel-medialibrary-pro/resources/js",
    ];
});
```

**laravel-mix <6**

```
mix.webpackConfig({
    resolve: {
        modules: [
            "node_modules",
            __dirname + "/vendor/spatie/laravel-medialibrary-pro/resources/js",
        ],
    },
});
```

This will force Webpack to look in `vendor/spatie/laravel-medialibrary-pro/resources/js` when resolving imports, and allows you to shorten your import to this:

```
@import "media-library-pro-styles";
```

If you're using PurgeCSS, you might have to add a rule to your whitelist patterns.

```
mix.purgeCss({ whitelistPatterns: [/^media-library/] });
```

Vue specific configuration
--------------------------------------------------------------------------------------------------------------------------------------

**laravel-mix >6**

```
// webpack.mix.js

mix.override((webpackConfig) => {
    webpackConfig.resolve.modules = [
        "node_modules",
        __dirname + "/vendor/spatie/laravel-medialibrary-pro/resources/js",
    ];
});
```

**laravel-mix <6**

```
// webpack.mix.js

mix.webpackConfig({
    resolve: {
        modules: [
            "node_modules",
            __dirname + "/vendor/spatie/laravel-medialibrary-pro/resources/js",
        ],
    },
});
```

This will force Webpack to look in `vendor/spatie/laravel-medialibrary-pro/resources/js` when resolving imports, and allows you to shorten your import.

```
import { MediaLibraryAttachment } from "media-library-pro-vue3-attachment";
```

If you're using TypeScript, you will also have to add this to your tsconfig:

```
// tsconfig.json

{
    "compilerOptions": {
        "paths": {
            "*": ["*", "vendor/spatie/laravel-medialibrary-pro/resources/js/*"]
        }
    }
}
```