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] 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: {