From 71f74864aad631606f058b0290540323d92c0531 Mon Sep 17 00:00:00 2001
From: Tim Van Dijck <tim.van.dijck@gmail.com>
Date: Wed, 28 Feb 2024 16:50:46 +0100
Subject: [PATCH 1/4] refactor mlp docs

---
 .phpunit.cache/test-results                   |   1 +
 .../_index.md                                 |   2 +-
 .../customise.md                              |  57 +++++++
 .../getting-started.md                        |  10 ++
 .../handling-uploads-with-vue.md              | 141 +++++-----------
 .../installation.md                           | 157 +-----------------
 .../laravel-mix.md                            |  96 +++++++++++
 .../usage-in-afrontend-repository.md          |  58 +++++++
 8 files changed, 270 insertions(+), 252 deletions(-)
 create mode 100644 .phpunit.cache/test-results
 create mode 100644 docs/handling-uploads-with-media-library-pro/customise.md
 create mode 100644 docs/handling-uploads-with-media-library-pro/getting-started.md
 create mode 100644 docs/handling-uploads-with-media-library-pro/laravel-mix.md
 create mode 100644 docs/handling-uploads-with-media-library-pro/usage-in-afrontend-repository.md

diff --git a/.phpunit.cache/test-results b/.phpunit.cache/test-results
new file mode 100644
index 000000000..f5dd5126f
--- /dev/null
+++ b/.phpunit.cache/test-results
@@ -0,0 +1 @@
+{"version":"pest_2.34.0","defects":{"P\\Tests\\Conversions\\ConversionOrientationTest::__pest_evaluable_it_can_correctly_convert_an_image_with_orientation_exif_data":7},"times":{"P\\Tests\\Conversions\\ConversionOrientationTest::__pest_evaluable_it_can_correctly_convert_an_image_with_orientation_exif_data":0.123}}
\ No newline at end of file
diff --git a/docs/handling-uploads-with-media-library-pro/_index.md b/docs/handling-uploads-with-media-library-pro/_index.md
index cc4743f7e..eab8e8c63 100644
--- a/docs/handling-uploads-with-media-library-pro/_index.md
+++ b/docs/handling-uploads-with-media-library-pro/_index.md
@@ -1,4 +1,4 @@
 ---
-title: Handling uploads with Media Library Pro
+title: Media Library Pro
 weight: 4
 ---
diff --git a/docs/handling-uploads-with-media-library-pro/customise.md b/docs/handling-uploads-with-media-library-pro/customise.md
new file mode 100644
index 000000000..8dcfeab9b
--- /dev/null
+++ b/docs/handling-uploads-with-media-library-pro/customise.md
@@ -0,0 +1,57 @@
+---
+title: Customise
+weight: 2
+---
+
+## Only allow authenticated users to upload files
+
+If in your project, you only want authenticated users to upload files, you can put the macro in a group that applies authentication middleware.
+
+```php
+Route::middleware('auth')->group(function() {
+    Route::mediaLibrary();
+});
+```
+
+We highly encourage you to do this, if you only need authenticated users to upload files.
+
+## Configure allowed mime types
+
+For security purposes, only files that pass [Laravel's `mimes` validation](https://laravel.com/docs/master/validation#rule-mimetypes) with the extensions [mentioned in this class](https://github.com/spatie/laravel-medialibrary-pro/blob/ba6eedd5b2a7f743909b441c0b6fd111d1a73794/src/Support/DefaultAllowedExtensions.php#L5) are allowed by the temporary upload controllers.
+
+If you want your components to accept other mimetypes, add a key `temporary_uploads_allowed_extensions` in the `media-library.php` config file.
+
+```php
+// in config/medialibrary.php
+
+return [
+   // ...
+   
+   'temporary_uploads_allowed_extensions' => [
+        // your extensions
+        ... \Spatie\MediaLibraryPro\Support\DefaultAllowedExtensions::all(), // add this if you want to allow the default ones too
+   ],
+],
+]
+```
+
+## Rate limiting
+
+To protect you from users that upload too many files, the temporary uploads controllers are rate limited. By default, only 10 files can be upload per minute per ip iddress.
+
+To customize rate limiting, add [a rate limiter](https://laravel.com/docs/master/rate-limiting#introduction) named `medialibrary-pro-uploads`. Typically, this would be done in a service provider.
+
+Here's an example where's we'll allow 15 files:
+
+```php
+// in a service provider
+
+use Illuminate\Support\Facades\RateLimiter;
+
+RateLimiter::for('medialibrary-pro-uploads', function (Request $request) {
+    return [
+        Limit::perMinute(10)->by($request->ip()),
+    ];
+});
+```
+
diff --git a/docs/handling-uploads-with-media-library-pro/getting-started.md b/docs/handling-uploads-with-media-library-pro/getting-started.md
new file mode 100644
index 000000000..9de51fc6b
--- /dev/null
+++ b/docs/handling-uploads-with-media-library-pro/getting-started.md
@@ -0,0 +1,10 @@
+---
+title: Getting started
+weight: 2
+---
+
+Things to do to get started:
+
+- Get a license
+- Install the package
+- Configure your frontend
diff --git a/docs/handling-uploads-with-media-library-pro/handling-uploads-with-vue.md b/docs/handling-uploads-with-media-library-pro/handling-uploads-with-vue.md
index adad482a6..26bff6e4e 100644
--- a/docs/handling-uploads-with-media-library-pro/handling-uploads-with-vue.md
+++ b/docs/handling-uploads-with-media-library-pro/handling-uploads-with-vue.md
@@ -21,6 +21,38 @@ In [this repo on GitHub](https://github.com/spatie/laravel-medialibrary-pro-app)
 
 If you are having troubles using the components, take a look in that app to see how we've done it.
 
+## Setup Vite
+If you are using Vite, your `vite.config.js` look something like this:
+
+```js
+import { defineConfig } from 'vite';
+import laravel from 'laravel-vite-plugin';
+import vue from '@vitejs/plugin-vue';
+
+export default defineConfig({
+    resolve: {
+        alias: {
+            'media-library-pro': '/vendor/spatie/laravel-medialibrary-pro/resources/js',
+            'vue': 'vue/dist/vue.esm-bundler.js',
+        }
+    },
+    plugins: [
+        laravel([
+            'resources/js/app.js',
+        ]),
+        vue({
+            template: {
+                transformAssetUrls: {
+                    base: null,
+                    includeAbsolute: false,
+                },
+            },
+        }),
+    ],
+});
+
+```
+
 ## Basic setup
 
 First, the server needs to be able to catch your incoming uploads. Use the `mediaLibrary` macro in your routes file.
@@ -51,64 +83,14 @@ The Vue components post data to `/media-library-pro/uploads` by default. If you
 
 The components aren't available through npm, but are located in `vendor/spatie/laravel-medialibrary-pro/resources/js` when you install the package through Composer. This makes for very long import statements, which you can clean up by adding some configuration to your Webpack/Laravel Mix configuration.
 
-_If you're developing a project where you don't have access to composer, you can download the package through GitHub Packages: [installation steps](./installation#usage-in-a-frontend-repository)_
-
-**laravel-mix >6**
-
-```js
-// webpack.mix.js
-
-mix.override((webpackConfig) => {
-    webpackConfig.resolve.modules = [
-        "node_modules",
-        __dirname + "/vendor/spatie/laravel-medialibrary-pro/resources/js",
-    ];
-});
-```
-
-**laravel-mix <6**
-
-```js
-// 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.
-
-```js
-import { MediaLibraryAttachment } from "media-library-pro-vue3-attachment";
-```
-
-If you're using TypeScript, you will also have to add this to your tsconfig:
-
-```json
-// tsconfig.json
-
-{
-    "compilerOptions": {
-        "paths": {
-            "*": ["*", "vendor/spatie/laravel-medialibrary-pro/resources/js/*"]
-        }
-    }
-}
-```
+_If you're developing a project where you don't have access to composer, you can download the package through GitHub Packages: [installation steps](./usage-in-a-frontend-repository)_
 
 To use a component in your Blade templates, import the components you plan to use in your `app.js` file, and add them to your main Vue app's `components` object.
 
-**Vue 3**
-
 ```js
 import { createApp } from "vue";
-import { MediaLibraryAttachment } from "media-library-pro-vue3-attachment";
-import { MediaLibraryCollection } from "media-library-pro-vue3-collection";
+import { MediaLibraryAttachment } from "media-library-pro/media-library-pro-vue3-attachment";
+import { MediaLibraryCollection } from "media-library-pro/media-library-pro-vue3-collection";
 
 createApp({
     components: {
@@ -146,8 +128,8 @@ You may also choose to import the components on the fly in a `.vue` file.
 </template>
 
 <script>
-    import { MediaLibraryAttachment } from "media-library-pro-vue3-attachment";
-    import { MediaLibraryCollection } from "media-library-pro-vue3-collection";
+    import { MediaLibraryAttachment } from "media-library-pro/media-library-pro-vue3-attachment";
+    import { MediaLibraryCollection } from "media-library-pro/media-library-pro-vue3-collection";
 
     export default {
         components: {
@@ -158,49 +140,6 @@ You may also choose to import the components on the fly in a `.vue` file.
 </script>
 ```
 
-## Vite
-If you are using vite, you need to import an alias to the `vite.config.js`  and some little changes to your Vue component.
-
-```diff
-// vite.config.js
-
-import { defineConfig } from 'vite';
-import laravel from 'laravel-vite-plugin';
-import vue from '@vitejs/plugin-vue';
-
-export default defineConfig({
-    ...
-    resolve: {
-        alias: {
-            '@': '/resources/js',
-+           'spatie-media-lib-pro': '/vendor/spatie/laravel-medialibrary-pro/resources/js',
-        },
-    },
-});
-```
-
-**Component changes Vue2**
-
-```diff
-...
--    import { MediaLibraryAttachment } from "media-library-pro-vue2-attachment";
-+    import { MediaLibraryAttachment } from "spatie-media-lib-pro/media-library-pro-vue2-attachment";
--    import { MediaLibraryCollection } from "media-library-pro-vue2-collection";
-+    import { MediaLibraryCollection } from "spatie-media-lib-pro/media-library-pro-vue2-collection";
-...
-```
-
-**Component changes Vue3**
-
-```diff
-...
--    import { MediaLibraryAttachment } from "media-library-pro-vue3-attachment";
-+    import { MediaLibraryAttachment } from "spatie-media-lib-pro/media-library-pro-vue3-attachment";
--    import { MediaLibraryCollection } from "media-library-pro-vue3-collection";
-+    import { MediaLibraryCollection } from "spatie-media-lib-pro/media-library-pro-vue3-collection";
-...
-```
-
 **CSS Import for SPA use**
 
 If you are using a SPA you can import the CSS into `app.js` like this:
@@ -209,7 +148,7 @@ If you are using a SPA you can import the CSS into `app.js` like this:
 // resources/js/app.js
 import './bootstrap';
 import '../css/app.css';
-+import 'spatie-media-lib-pro/media-library-pro-styles/src/styles.css';
++import 'media-library-pro/media-library-pro-styles/src/styles.css';
 ...
 ```
 
@@ -232,8 +171,8 @@ The most basic components have a `name` prop. This name will be used to identify
 </template>
 
 <script>
-    import { MediaLibraryAttachment } from "media-library-pro-vue3-attachment";
-    import { MediaLibraryCollection } from "media-library-pro-vue3-collection";
+    import { MediaLibraryAttachment } from "media-library-pro/media-library-pro-vue3-attachment";
+    import { MediaLibraryCollection } from "media-library-pro/media-library-pro-vue3-collection";
 
     export default {
         components: {
diff --git a/docs/handling-uploads-with-media-library-pro/installation.md b/docs/handling-uploads-with-media-library-pro/installation.md
index e161a7a46..fe01396b5 100644
--- a/docs/handling-uploads-with-media-library-pro/installation.md
+++ b/docs/handling-uploads-with-media-library-pro/installation.md
@@ -7,6 +7,12 @@ weight: 2
 
 ## Installing the base package
 
+If you haven't installed the base Media Library package, make sure to do so by running:
+
+```bash
+composer require "spatie/laravel-medialibrary:^11.0.0"
+```
+
 ## Getting a license
 
 You must buy a license on [the Media Library Pro product page](https://spatie.be/products/media-library-pro) at spatie.be
@@ -115,165 +121,16 @@ Route::mediaLibrary();
 
 This macro will add the routes to controllers that accept file uploads for all components.
 
-#### Only allow authenticated users to upload files
-
-If in your project, you only want authenticated users to upload files, you can put the macro in a group that applies authentication middleware.
-
-```php
-Route::middleware('auth')->group(function() {
-    Route::mediaLibrary();
-});
-```
-
-We highly encourage you to do this, if you only need authenticated users to upload files.
-
-#### Validating mime types
-
-For security purposes, only files that pass [Laravel's `mimes` validation](https://laravel.com/docs/master/validation#rule-mimetypes) with the extensions [mentioned in this class](https://github.com/spatie/laravel-medialibrary-pro/blob/ba6eedd5b2a7f743909b441c0b6fd111d1a73794/src/Support/DefaultAllowedExtensions.php#L5) are allowed by the temporary upload controllers.
-
-If you want your components to accept other mimetypes, add a key `temporary_uploads_allowed_extensions` in the `media-library.php` config file.
-
-```php
-// in config/medialibrary.php
-
-return [
-   // ...
-   
-   'temporary_uploads_allowed_extensions' => [
-        // your extensions
-        ... \Spatie\MediaLibraryPro\Support\DefaultAllowedExtensions::all(), // add this if you want to allow the default ones too
-   ],
-],
-]
-```
-
-#### Rate limiting
-
-To protect you from users that upload too many files, the temporary uploads controllers are rate limited. By default, only 10 files can be upload per minute per ip iddress.
-
-To customize rate limiting, add [a rate limiter](https://laravel.com/docs/master/rate-limiting#introduction) named `medialibrary-pro-uploads`. Typically, this would be done in a service provider.
-
-Here's an example where's we'll allow 15 files:
-
-```php
-// in a service provider
-
-use Illuminate\Support\Facades\RateLimiter;
-
-RateLimiter::for('medialibrary-pro-uploads', function (Request $request) {
-    return [
-        Limit::perMinute(10)->by($request->ip()),
-    ];
-});
-```
-
-## Using the CSS
+## Front-end setup
 
 You have a couple of options for how you can use the UI components' CSS, depending on your and your project's needs:
 
-### 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**
-
-```js
-mix.override((webpackConfig) => {
-    webpackConfig.resolve.modules = [
-        "node_modules",
-        __dirname + "/vendor/spatie/laravel-medialibrary-pro/resources/js",
-    ];
-});
-```
-
-**laravel-mix <6**
-
-```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 to this:
-
-```css
-@import "media-library-pro-styles";
-```
-
-If you're using PurgeCSS, you might have to add a rule to your whitelist patterns.
-
-```js
-mix.purgeCss({ whitelistPatterns: [/^media-library/] });
-```
-
 ### Directly in Blade/HTML
 
 You should copy the built CSS from `vendor/spatie/laravel-medialibrary-pro/resources/js/media-library-pro-styles/dist/styles.css` into your `public` folder, and then use a `link` tag in your blade/html to get it: `<link rel="stylesheet" href="{{ asset('css/main.css') }}">`.
 
 If you would like to customize the CSS we provide, head over to [the section on Customizing CSS](/docs/laravel-medialibrary/v11/handling-uploads-with-media-library-pro/customizing-css).
 
-## Usage in a frontend repository
-
-If you can't install the package using `composer` because, for example, you're developing an SPA, you can download the packages from GitHub Packages.
-
-### Registering with GitHub Packages
-
-You will need to create a Personal Access Token with the `read:packages` permission on the GitHub account that has access to the [spatie/laravel-medialibrary-pro](https://github.com/spatie/laravel-medialibrary-pro) repository. We suggest creating an entirely new token for this and not using it for anything else. You can safely share this token with team members as long as it has only this permission. Sadly, there is no way to scope the token to only the Media Library Pro repository.
-
-Next up, create a `.npmrc` file in your project's root directory, with the following content:
-
-_.npmrc_
-
-```
-//npm.pkg.github.com/:_authToken=github-personal-access-token-with-packages:read-permission
-@spatie:registry=https://npm.pkg.github.com
-```
-
-Make sure the plaintext token does not get uploaded to GitHub along with your project. Either add the file to your `.gitignore` file, or set the token in your `.bashrc` file as an ENV variable.
-
-_.bashrc_
-
-```
-export GITHUB_PACKAGE_REGISTRY_TOKEN=token-goes-here
-```
-
-_.npmrc_
-
-```
-//npm.pkg.github.com/:_authToken=${GITHUB_PACKAGE_REGISTRY_TOKEN}
-@spatie:registry=https://npm.pkg.github.com
-```
-
-Alternatively, you can use `npm login` to log in to the GitHub Package Registry. Fill in your GitHub credentials, using your Personal Access Token as your password.
-
-```
-npm login --registry=https://npm.pkg.github.com --scope=@spatie
-```
-
-If you get stuck at any point, have a look at [GitHub's documentation on this](https://docs.github.com/en/free-pro-team@latest/packages/publishing-and-managing-packages/installing-a-package).
-
-### Downloading the packages from GitHub Packages
-
-Now, you can use `npm install --save` or `yarn add` to download the packages you need.
-
-```
-yarn add @spatie/media-library-pro-styles @spatie/media-library-pro-vue3-attachment
-```
-
-**You will now have to include the `@spatie/` scope when importing the packages**, this is different from examples in the documentation.
-
-```
-import { MediaLibraryAttachment } from '@spatie/media-library-pro-vue3-attachment';
-```
-
-You can find a list of all the packages on the repository: https://github.com/orgs/spatie/packages?repo_name=laravel-medialibrary-pro.
 
 ## What happens when your license expires?
 
diff --git a/docs/handling-uploads-with-media-library-pro/laravel-mix.md b/docs/handling-uploads-with-media-library-pro/laravel-mix.md
new file mode 100644
index 000000000..acff825a4
--- /dev/null
+++ b/docs/handling-uploads-with-media-library-pro/laravel-mix.md
@@ -0,0 +1,96 @@
+---
+title: Laravel Mix
+weight: 9
+---
+
+## 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**
+
+```js
+mix.override((webpackConfig) => {
+    webpackConfig.resolve.modules = [
+        "node_modules",
+        __dirname + "/vendor/spatie/laravel-medialibrary-pro/resources/js",
+    ];
+});
+```
+
+**laravel-mix <6**
+
+```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 to this:
+
+```css
+@import "media-library-pro-styles";
+```
+
+If you're using PurgeCSS, you might have to add a rule to your whitelist patterns.
+
+```js
+mix.purgeCss({ whitelistPatterns: [/^media-library/] });
+```
+
+## Vue specific configuration
+
+**laravel-mix >6**
+
+```js
+// webpack.mix.js
+
+mix.override((webpackConfig) => {
+    webpackConfig.resolve.modules = [
+        "node_modules",
+        __dirname + "/vendor/spatie/laravel-medialibrary-pro/resources/js",
+    ];
+});
+```
+
+**laravel-mix <6**
+
+```js
+// 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.
+
+```js
+import { MediaLibraryAttachment } from "media-library-pro-vue3-attachment";
+```
+
+If you're using TypeScript, you will also have to add this to your tsconfig:
+
+```json
+// tsconfig.json
+
+{
+    "compilerOptions": {
+        "paths": {
+            "*": ["*", "vendor/spatie/laravel-medialibrary-pro/resources/js/*"]
+        }
+    }
+}
+```
diff --git a/docs/handling-uploads-with-media-library-pro/usage-in-afrontend-repository.md b/docs/handling-uploads-with-media-library-pro/usage-in-afrontend-repository.md
new file mode 100644
index 000000000..74dc648e5
--- /dev/null
+++ b/docs/handling-uploads-with-media-library-pro/usage-in-afrontend-repository.md
@@ -0,0 +1,58 @@
+---
+title: Usage in a frontend repository
+weight: 9
+---
+
+If you can't install the package using `composer` because, for example, you're developing an SPA, you can download the packages from GitHub Packages.
+
+## Registering with GitHub Packages
+
+You will need to create a Personal Access Token with the `read:packages` permission on the GitHub account that has access to the [spatie/laravel-medialibrary-pro](https://github.com/spatie/laravel-medialibrary-pro) repository. We suggest creating an entirely new token for this and not using it for anything else. You can safely share this token with team members as long as it has only this permission. Sadly, there is no way to scope the token to only the Media Library Pro repository.
+
+Next up, create a `.npmrc` file in your project's root directory, with the following content:
+
+_.npmrc_
+
+```
+//npm.pkg.github.com/:_authToken=github-personal-access-token-with-packages:read-permission
+@spatie:registry=https://npm.pkg.github.com
+```
+
+Make sure the plaintext token does not get uploaded to GitHub along with your project. Either add the file to your `.gitignore` file, or set the token in your `.bashrc` file as an ENV variable.
+
+_.bashrc_
+
+```
+export GITHUB_PACKAGE_REGISTRY_TOKEN=token-goes-here
+```
+
+_.npmrc_
+
+```
+//npm.pkg.github.com/:_authToken=${GITHUB_PACKAGE_REGISTRY_TOKEN}
+@spatie:registry=https://npm.pkg.github.com
+```
+
+Alternatively, you can use `npm login` to log in to the GitHub Package Registry. Fill in your GitHub credentials, using your Personal Access Token as your password.
+
+```
+npm login --registry=https://npm.pkg.github.com --scope=@spatie
+```
+
+If you get stuck at any point, have a look at [GitHub's documentation on this](https://docs.github.com/en/free-pro-team@latest/packages/publishing-and-managing-packages/installing-a-package).
+
+## Downloading the packages from GitHub Packages
+
+Now, you can use `npm install --save` or `yarn add` to download the packages you need.
+
+```
+yarn add @spatie/media-library-pro-styles @spatie/media-library-pro-vue3-attachment
+```
+
+**You will now have to include the `@spatie/` scope when importing the packages**, this is different from examples in the documentation.
+
+```
+import { MediaLibraryAttachment } from '@spatie/media-library-pro-vue3-attachment';
+```
+
+You can find a list of all the packages on the repository: https://github.com/orgs/spatie/packages?repo_name=laravel-medialibrary-pro.

From 8c876617085692ab86beec399052af058dea95c1 Mon Sep 17 00:00:00 2001
From: Tim Van Dijck <tim.van.dijck@gmail.com>
Date: Mon, 18 Mar 2024 10:41:12 +0100
Subject: [PATCH 2/4] Update vue docs.

---
 .../handling-uploads-with-vue.md                              | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/docs/handling-uploads-with-media-library-pro/handling-uploads-with-vue.md b/docs/handling-uploads-with-media-library-pro/handling-uploads-with-vue.md
index 26bff6e4e..e413263d0 100644
--- a/docs/handling-uploads-with-media-library-pro/handling-uploads-with-vue.md
+++ b/docs/handling-uploads-with-media-library-pro/handling-uploads-with-vue.md
@@ -282,8 +282,6 @@ The Media Library supports [custom properties](/docs/laravel-medialibrary/v11/ad
 
 Use the `fields` scoped slot to add some fields:
 
-**Vue 3**
-
 ```html
 <media-library-collection name="images" :initial-value="{{ $images }}">
     <template
@@ -343,8 +341,6 @@ When uploading a file, some properties appear by default: its extension, filesiz
 
 You can customize what is displayed here by using the `properties` scoped slot:
 
-**Vue 3**
-
 ```html
 <media-library-attachment
     name="images"

From fb05bab1cec579fa9175bdc6f55d91579e1f596b Mon Sep 17 00:00:00 2001
From: Tim Van Dijck <tim.van.dijck@gmail.com>
Date: Mon, 18 Mar 2024 11:25:49 +0100
Subject: [PATCH 3/4] Update MLP docs.

---
 .../creating-custom-react-components.md       |  2 +-
 .../creating-custom-vue-components.md         |  2 +-
 .../handling-uploads-with-react.md            | 55 +++++++++----------
 3 files changed, 28 insertions(+), 31 deletions(-)

diff --git a/docs/handling-uploads-with-media-library-pro/creating-custom-react-components.md b/docs/handling-uploads-with-media-library-pro/creating-custom-react-components.md
index 01ac023bf..45dfa6077 100644
--- a/docs/handling-uploads-with-media-library-pro/creating-custom-react-components.md
+++ b/docs/handling-uploads-with-media-library-pro/creating-custom-react-components.md
@@ -13,7 +13,7 @@ For more extensive examples, [see the pre-built UI components on GitHub](https:/
 
 ```jsx
 import * as React from "react";
-import { useMediaLibrary } from "media-library-pro-react";
+import { useMediaLibrary } from "media-library-pro/media-library-pro-react";
 
 export default function MediaLibraryAttachment() {
     const {
diff --git a/docs/handling-uploads-with-media-library-pro/creating-custom-vue-components.md b/docs/handling-uploads-with-media-library-pro/creating-custom-vue-components.md
index 8b9acd293..58a070c84 100644
--- a/docs/handling-uploads-with-media-library-pro/creating-custom-vue-components.md
+++ b/docs/handling-uploads-with-media-library-pro/creating-custom-vue-components.md
@@ -47,7 +47,7 @@ For more extensive examples, [see the pre-built UI components on GitHub](https:/
 </template>
 
 <script>
-    import { MediaLibraryRenderless } from 'media-library-pro-vue2';
+    import { MediaLibraryRenderless } from "media-library-pro/media-library-pro-vue3";
 
     export default{
         components: { MediaLibraryRenderless },
diff --git a/docs/handling-uploads-with-media-library-pro/handling-uploads-with-react.md b/docs/handling-uploads-with-media-library-pro/handling-uploads-with-react.md
index b3da80e60..c343703d9 100644
--- a/docs/handling-uploads-with-media-library-pro/handling-uploads-with-react.md
+++ b/docs/handling-uploads-with-media-library-pro/handling-uploads-with-react.md
@@ -53,38 +53,35 @@ _If you're developing a project where you don't have access to composer, you can
 
 The components are located in `vendor/spatie/laravel-medialibrary-pro/resources/js` when you install the package through Composer. This makes for very long import statements, which you can clean up by adding some configuration to your Webpack/Laravel Mix configuration.
 
-**laravel-mix >6**
+## Setup Vite
+If you are using Vite, your `vite.config.js` look something like this:
 
 ```js
-// webpack.mix.js
+import { defineConfig } from 'vite';
+import laravel from 'laravel-vite-plugin';
+import vue from '@vitejs/plugin-vue';
 
-mix.override((webpackConfig) => {
-    webpackConfig.resolve.modules = [
-        "node_modules",
-        __dirname + "/vendor/spatie/laravel-medialibrary-pro/resources/js",
-    ];
-}
-```
-
-**laravel-mix <6**
-
-```js
-// webpack.mix.js
-
-mix.webpackConfig({
+export default defineConfig({
     resolve: {
-        modules: [
-            "node_modules",
-            __dirname + "/vendor/spatie/laravel-medialibrary-pro/resources/js",
-        ],
+        alias: {
+            'media-library-pro': '/vendor/spatie/laravel-medialibrary-pro/resources/js',
+        }
     },
+    plugins: [
+        laravel([
+            'resources/js/app.js',
+        ]),
+        vue({
+            template: {
+                transformAssetUrls: {
+                    base: null,
+                    includeAbsolute: false,
+                },
+            },
+        }),
+    ],
 });
-```
 
-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:
-
-```js
-import { MediaLibraryAttachment } from "media-library-pro-react-attachment";
 ```
 
 If you're using TypeScript, you will also have have to add this to your tsconfig:
@@ -108,8 +105,8 @@ The most basic components have a `name` prop. This name will be used to identify
 ```jsx
 // MyImageUploader.jsx
 
-import { MediaLibraryAttachment } from "media-library-pro-react-attachment";
-import { MediaLibraryCollection } from "media-library-pro-react-collection";
+import { MediaLibraryAttachment } from "media-library-pro/media-library-pro-react-attachment";
+import { MediaLibraryCollection } from "media-library-pro/media-library-pro-react-collection";
 
 export default function MyImageUploader() {
     return (
@@ -188,7 +185,7 @@ See the [Validation rules section](#validation-rules) for a complete list of all
 The components keep track of whether they're ready to be submitted, you can use this to disable a submit button while a file is still uploading or when there are frontend validation errors. This value can be tracked by passing a listener method to the `onIsReadyToSubmitChange` prop. If you submit a form while a file is uploading, Laravel will return a HTTP 500 error with an `invalid uuid` message.
 
 ```jsx
-import { MediaLibraryAttachment } from "media-library-pro-react-attachment";
+import { MediaLibraryAttachment } from "media-library-pro/media-library-pro-react-attachment";
 
 function AvatarComponent() {
     const [isReadyToSubmit, setIsReadyToSubmit] = useState(true);
@@ -332,7 +329,7 @@ When using the components in repository that uses Inertia, the setup is very sim
 
 ```jsx
 import React, { useState } from "react";
-import { MediaLibraryAttachment } from "media-library-pro-react-attachment";
+import { MediaLibraryAttachment } from "media-library-pro/media-library-pro-react-attachment";
 import { usePage } from "@inertiajs/inertia-react";
 import { Inertia } from "@inertiajs/inertia";
 

From f623dd07a85db49eebfa3e9e6c1972bd88695423 Mon Sep 17 00:00:00 2001
From: Tim Van Dijck <tim.van.dijck@gmail.com>
Date: Tue, 19 Mar 2024 15:11:51 +0100
Subject: [PATCH 4/4] Update docs.

---
 .../handling-uploads-with-react.md                | 11 ++++++-----
 .../handling-uploads-with-vue.md                  | 15 ++++++++-------
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/docs/handling-uploads-with-media-library-pro/handling-uploads-with-react.md b/docs/handling-uploads-with-media-library-pro/handling-uploads-with-react.md
index c343703d9..abf6b1c89 100644
--- a/docs/handling-uploads-with-media-library-pro/handling-uploads-with-react.md
+++ b/docs/handling-uploads-with-media-library-pro/handling-uploads-with-react.md
@@ -64,7 +64,8 @@ import vue from '@vitejs/plugin-vue';
 export default defineConfig({
     resolve: {
         alias: {
-            'media-library-pro': '/vendor/spatie/laravel-medialibrary-pro/resources/js',
+            'media-library-pro-react-attachment': '/vendor/spatie/laravel-medialibrary-pro/resources/js/media-library-pro-react-attachment',
+            'media-library-pro-react-collection': '/vendor/spatie/laravel-medialibrary-pro/resources/js/media-library-pro-react-collection',
         }
     },
     plugins: [
@@ -105,8 +106,8 @@ The most basic components have a `name` prop. This name will be used to identify
 ```jsx
 // MyImageUploader.jsx
 
-import { MediaLibraryAttachment } from "media-library-pro/media-library-pro-react-attachment";
-import { MediaLibraryCollection } from "media-library-pro/media-library-pro-react-collection";
+import { MediaLibraryAttachment } from "media-library-pro-react-attachment";
+import { MediaLibraryCollection } from "media-library-pro-react-collection";
 
 export default function MyImageUploader() {
     return (
@@ -185,7 +186,7 @@ See the [Validation rules section](#validation-rules) for a complete list of all
 The components keep track of whether they're ready to be submitted, you can use this to disable a submit button while a file is still uploading or when there are frontend validation errors. This value can be tracked by passing a listener method to the `onIsReadyToSubmitChange` prop. If you submit a form while a file is uploading, Laravel will return a HTTP 500 error with an `invalid uuid` message.
 
 ```jsx
-import { MediaLibraryAttachment } from "media-library-pro/media-library-pro-react-attachment";
+import { MediaLibraryAttachment } from "media-library-pro-react-attachment";
 
 function AvatarComponent() {
     const [isReadyToSubmit, setIsReadyToSubmit] = useState(true);
@@ -329,7 +330,7 @@ When using the components in repository that uses Inertia, the setup is very sim
 
 ```jsx
 import React, { useState } from "react";
-import { MediaLibraryAttachment } from "media-library-pro/media-library-pro-react-attachment";
+import { MediaLibraryAttachment } from "media-library-pro-react-attachment";
 import { usePage } from "@inertiajs/inertia-react";
 import { Inertia } from "@inertiajs/inertia";
 
diff --git a/docs/handling-uploads-with-media-library-pro/handling-uploads-with-vue.md b/docs/handling-uploads-with-media-library-pro/handling-uploads-with-vue.md
index e413263d0..cbb47f0f3 100644
--- a/docs/handling-uploads-with-media-library-pro/handling-uploads-with-vue.md
+++ b/docs/handling-uploads-with-media-library-pro/handling-uploads-with-vue.md
@@ -32,7 +32,8 @@ import vue from '@vitejs/plugin-vue';
 export default defineConfig({
     resolve: {
         alias: {
-            'media-library-pro': '/vendor/spatie/laravel-medialibrary-pro/resources/js',
+            'media-library-pro-vue3-attachment': '/vendor/spatie/laravel-medialibrary-pro/resources/js/media-library-pro-vue3-attachment',
+            'media-library-pro-vue3-collection': '/vendor/spatie/laravel-medialibrary-pro/resources/js/media-library-pro-vue3-collection',
             'vue': 'vue/dist/vue.esm-bundler.js',
         }
     },
@@ -89,8 +90,8 @@ To use a component in your Blade templates, import the components you plan to us
 
 ```js
 import { createApp } from "vue";
-import { MediaLibraryAttachment } from "media-library-pro/media-library-pro-vue3-attachment";
-import { MediaLibraryCollection } from "media-library-pro/media-library-pro-vue3-collection";
+import { MediaLibraryAttachment } from "media-library-pro-vue3-attachment";
+import { MediaLibraryCollection } from "media-library-pro-vue3-collection";
 
 createApp({
     components: {
@@ -128,8 +129,8 @@ You may also choose to import the components on the fly in a `.vue` file.
 </template>
 
 <script>
-    import { MediaLibraryAttachment } from "media-library-pro/media-library-pro-vue3-attachment";
-    import { MediaLibraryCollection } from "media-library-pro/media-library-pro-vue3-collection";
+    import { MediaLibraryAttachment } from "media-library-pro-vue3-attachment";
+    import { MediaLibraryCollection } from "media-library-pro-vue3-collection";
 
     export default {
         components: {
@@ -171,8 +172,8 @@ The most basic components have a `name` prop. This name will be used to identify
 </template>
 
 <script>
-    import { MediaLibraryAttachment } from "media-library-pro/media-library-pro-vue3-attachment";
-    import { MediaLibraryCollection } from "media-library-pro/media-library-pro-vue3-collection";
+    import { MediaLibraryAttachment } from "media-library-pro-vue3-attachment";
+    import { MediaLibraryCollection } from "media-library-pro-vue3-collection";
 
     export default {
         components: {