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/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/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-react.md b/docs/handling-uploads-with-media-library-pro/handling-uploads-with-react.md
index b3da80e60..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
@@ -53,38 +53,36 @@ _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-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: [
+        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:
@@ -188,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-react-attachment";
+import { MediaLibraryAttachment } from "media-library-pro-react-attachment";
 
 function AvatarComponent() {
     const [isReadyToSubmit, setIsReadyToSubmit] = useState(true);
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..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
@@ -21,6 +21,39 @@ 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-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',
+        }
+    },
+    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,60 +84,10 @@ 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";
@@ -158,49 +141,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 +149,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';
 ...
 ```
 
@@ -343,8 +283,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
@@ -404,8 +342,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"
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.