docs: improve the installation guide

Author: Barbapapazes

package.json

@@ -16,6 +16,7 @@
     "@vueuse/shared": "^13.1.0",
     "colortranslator": "^4.1.0",
     "defu": "^6.1.4",
+    "embla-carousel": "^8.6.0",
     "embla-carousel-auto-height": "^8.6.0",
     "embla-carousel-auto-scroll": "^8.6.0",
     "embla-carousel-autoplay": "^8.6.0",
@@ -27,7 +28,9 @@
     "ohash": "^2.0.11",
     "reka-ui": "^2.2.0",
     "tailwind-variants": "^1.0.0",
-    "vue": "^3.5.13"
+    "tailwindcss": "^4.1.4",
+    "vue": "^3.5.13",
+    "vue-component-type-helpers": "^2.2.10"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^4.12.0",
@@ -43,23 +46,20 @@
     "@vitejs/plugin-vue": "^5.2.3",
     "@vitest/ui": "^3.1.2",
     "@vue/tsconfig": "^0.7.0",
-    "embla-carousel": "^8.6.0",
     "eslint": "^9.25.1",
     "jsdom": "^26.1.0",
     "magicast": "^0.3.5",
     "md5": "^2.3.0",
     "scule": "^1.3.0",
     "simple-git": "^3.27.0",
-    "tailwindcss": "^4.1.4",
     "taze": "^18.7.1",
     "typescript": "^5.8.3",
     "ufo": "^1.6.1",
     "unplugin-vue-components": "^28.5.0",
     "vite": "5.4.11",
     "vitepress": "1.5.0",
     "vitepress-plugin-group-icons": "^1.5.2",
-    "vitest": "^3.1.2",
-    "vue-component-type-helpers": "^2.2.10"
+    "vitest": "^3.1.2"
   },
   "pnpm": {
     "patchedDependencies": {

src/installation.md

@@ -1,7 +1,40 @@
 # Installation
 
-Welcome to Vue UI, a component library for Vue.js! 🙌
+To get started, install the required dependencies:
 
-Before installing this component library, you need to know how it works.
+::: code-group
 
-This component library is built with Vue and on top of Reka UI. It also uses Tailwind CSS for styling.
+```bash [npm]
+npm install reka-ui tailwind-variants @vueuse/core @vueuse/shared @vue/integrations colortranslator defu fuse.js ohashembla-carousel embla-carousel-auto-height embla-carousel-auto-scroll embla-carousel-autoplay embla-carousel-class-names embla-carousel-fade embla-carousel-vue embla-carousel-wheel-gestures vue-component-type-helpers && npm install -D vitest @testing-library/vue jsdom @vue/tsconfig
+```
+
+```bash [Yarn]
+yarn add reka-ui tailwind-variants @vueuse/core @vueuse/shared @vue/integrations colortranslator defu fuse.js ohashembla-carousel embla-carousel-auto-height embla-carousel-auto-scroll embla-carousel-autoplay embla-carousel-class-names embla-carousel-fade embla-carousel-vue embla-carousel-wheel-gestures vue-component-type-helpers && yarn add -D vitest @testing-library/vue jsdom @vue/tsconfig
+```
+
+```bash [pnpm]
+pnpm add reka-ui tailwind-variants @vueuse/core @vueuse/shared @vue/integrations colortranslator defu fuse.js ohashembla-carousel embla-carousel-auto-height embla-carousel-auto-scroll embla-carousel-autoplay embla-carousel-class-names embla-carousel-fade embla-carousel-vue embla-carousel-wheel-gestures vue-component-type-helpers && pnpm add -D vitest @testing-library/vue jsdom @vue/tsconfig
+```
+
+```bash [Bun]
+bun add reka-ui tailwind-variants @vueuse/core @vueuse/shared colortranslator @vue/integrations defu embla-carousel embla-carousel-auto-height fuse.js ohashembla-carousel-auto-scroll embla-carousel-autoplay embla-carousel-class-names embla-carousel-fade embla-carousel-vue vue-component-type-helpers embla-carousel-wheel-gestures && bun add -D vitest @testing-library/vue jsdom @vue/tsconfig
+```
+
+:::
+
+Next, install the components using the provided script with the appropriate parameters:
+
+```bash
+curl -sSfL https://vue-ui.barbapapazes.dev/install.sh | bash
+```
+
+> [!NOTE]
+> If the repository `barbapapazes/vue-ui` is private, prepend `bash` with `GITHUB_TOKEN=$(gh auth token)` to authenticate and install the components.
+
+> [!WARNING]
+> Always review scripts from the internet before executing them. Take a moment to inspect the script to ensure its safety.
+
+For guidance on which parameters to use based on your project setup, refer to the following guides:
+
+- [Vite](./usage/vite.md)
+- [Laravel Inertia](./usage/laravel-inertia.md)

src/public/install.sh

@@ -16,7 +16,7 @@ validate_dependencies() {
   done
 
   if [ -z "$GH_TOKEN" ]; then
-    echo "Error: GH_TOKEN environment variable is not set."
+    echo "Error: GITHUB_TOKEN environment variable is not set."
     exit 1
   fi
 }

src/upgrade.md

@@ -0,0 +1,15 @@
+# Upgrade Guide
+
+To upgrade your components, use the same script provided for the installation process:
+
+```bash
+curl -sSfL https://vue-ui.barbapapazes.dev/install.sh | bash
+```
+
+> [!NOTE]
+> If the repository `barbapapazes-sponsors/vue-ui` is private, prepend `bash` with `GITHUB_TOKEN=$(gh auth token)` to authenticate and install the components.
+
+> [!WARNING]
+> Always review scripts from the internet before executing them. Inspect the script to ensure its safety.
+
+> [!WARNING] This process will completely overwrite your existing components, including any local changes. To preserve your modifications, consider using diffing tools such as `git diff` or the comparison features in your preferred IDE before proceeding.

src/usage/inertia.md src/usage/laravel-inertia.mdsrc/usage/inertia.md renamed to src/usage/laravel-inertia.md

@@ -1,37 +1,15 @@
 # Inertia
 
-**[Inertia](https://inertiajs.com/)** is a library that effortlessly allows you to render single-file Vue components directly from your **Laravel** backend by providing them with the necessary data. This integration enables the use of Vue components within Laravel views without requiring a separate API structure.
-
-Through this guide, you'll learn how to use **Reka UI** with **Inertia** and **Vue**. We'll cover the **installation**, **configuration**, and **usage** of this setup.
+Through this guide, you'll learn how to use **Reka UI** with **Inertia** and **Vue**.
 
 > [!NOTE]
 > This guide assumes you have a default Laravel installation with Inertia, **Vue**, and **TypeScript**. If your setup differs, you may need to adapt the instructions, although the general guidelines should still prove helpful.
 
-## Installation
-
-Begin by installing the required dependencies and development dependencies.
-
-::: code-group
-
-```bash [npm]
-npm install reka-ui tailwind-variants @vueuse/core @vueuse/shared color && npm install -D vitest @testing-library/vue jsdom @vue/tsconfig
-```
-
-```bash [Yarn]
-yarn add reka-ui tailwind-variants @vueuse/core @vueuse/shared color && yarn add -D vitest @testing-library/vue jsdom @vue/tsconfig
-```
-
-```bash [pnpm]
-pnpm add reka-ui tailwind-variants @vueuse/core @vueuse/shared color && pnpm add -D vitest @testing-library/vue jsdom @vue/tsconfig
-```
-
-```bash [Bun]
-bun add reka-ui tailwind-variants @vueuse/core @vueuse/shared color && bun add -D vitest @testing-library/vue jsdom @vue/tsconfig
-```
+## Usage
 
-:::
+At this point, you should have installed dependencies and the components. If you haven't done so, please refer to the [installation guide](../installation.md).
 
-Next, configure Vitest to work with Vue and a DOM environment. Open `vite.config.ts` and include the following configuration:
+Then, you can create a `vite.config.ts` file in the root of your project. This file will instruct Vite to correctly resolve the main alias `@/ui` to the `resources/js/UI` directory.
 
 ```ts [vite.config.ts]
 /// <reference types="vitest" />
@@ -56,8 +34,6 @@ export default defineConfig({
 })
 ```
 
-Make sure to update your `vite.config.ts` file with Reka UI and Tailwind Variants in the `optimizeDeps` section to ensure these packages are automatically optimized during startup. The `resolve.alias` configuration creates an alias path for importing Vue components, facilitating easier component management and consistency across your project.
-
 > [!NOTE]
 > If you're currently using a `.js` file for your Vite configuration, it's advisable to switch to a `.ts` file to leverage TypeScript's type-checking and auto-completion capabilities.
 

src/usage/vite.md

@@ -0,0 +1 @@
+# Vite