From cb548e532a5ce05dec8e2730ff91a85465bb3ea8 Mon Sep 17 00:00:00 2001
From: schonhoff <42345405+schonhoff@users.noreply.github.com>
Date: Mon, 15 Aug 2022 08:12:38 +0200
Subject: [PATCH 1/2] Adding a short vite description

Thanks to @plakhin in https://github.com/spatie/laravel-medialibrary/issues/2971#issuecomment-1214285746 for the answer.
I could only test the vue 3 change.
---
 .../handling-uploads-with-vue.md              | 43 +++++++++++++++++++
 1 file changed, 43 insertions(+)

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 15471cb25..14fc32134 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
@@ -177,6 +177,49 @@ 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";
+...
+```
+
 ## Your first components
 
 The most basic components have a `name` prop. This name will be used to identify the media when it's uploaded to the server.

From 24110c941c165cf9de56b07cb40da446db08ee6d Mon Sep 17 00:00:00 2001
From: schonhoff <42345405+schonhoff@users.noreply.github.com>
Date: Mon, 15 Aug 2022 09:52:22 +0200
Subject: [PATCH 2/2] Added CSS Import for SPA use

---
 .../handling-uploads-with-vue.md                  | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

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 14fc32134..f468b823c 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
@@ -220,6 +220,21 @@ export default defineConfig({
 ...
 ```
 
+**CSS Import for SPA use**
+
+If you are using a SPA you can import the CSS into `app.js` like this:
+
+```diff
+// resources/js/app.js
+import './bootstrap';
+import '../css/app.css';
++import 'spatie-media-lib-pro/media-library-pro-styles/src/styles.css';
+...
+```
+
+If you want to import the CSS into `app.css` you can still use the import mentioned in [Customizing CSS](./customizing-css).
+
+
 ## Your first components
 
 The most basic components have a `name` prop. This name will be used to identify the media when it's uploaded to the server.