From 7f8b61e6e9be0c187e46aaa28253514b0f0a4b78 Mon Sep 17 00:00:00 2001
From: Rodrigo Hernando <rhernandog@gmail.com>
Date: Fri, 10 Apr 2026 14:18:08 -0400
Subject: [PATCH] Nuxt demo update - Updates the demo for Nuxt, no need to
 import the composable and use the client suffix in the file name - Updates
 the README.MD file in the examples folder - Updates the SKILL.md file in the
 frameworks folder

---
 examples/README.md                                       | 4 ++--
 .../app/composables/{useGSAP.client.ts => useGSAP.ts}    | 0
 examples/nuxt/app/pages/index.vue                        | 1 -
 skills/gsap-frameworks/SKILL.md                          | 9 +++------
 4 files changed, 5 insertions(+), 9 deletions(-)
 rename examples/nuxt/app/composables/{useGSAP.client.ts => useGSAP.ts} (100%)

diff --git a/examples/README.md b/examples/README.md
index 4d565dc..1e611fb 100644
--- a/examples/README.md
+++ b/examples/README.md
@@ -24,6 +24,6 @@ These examples are intended as reference implementations for AI agents and for q
 
 ## Nuxt
 
-- **examples/nuxt/** — Nuxt 4 with GSAP client-only re-usable composable.
+- **examples/nuxt/** — Nuxt 4 with GSAP re-usable composable.
 - From repo root: `cd examples/nuxt && npm install && npm run dev`.
-- Patterns: GSAP as client-only composable (`useGSAP.client.ts`), for gsap access, lazy-loading plugins, `gsap.context(() => {}, scope)` cleanup.
+- Patterns: GSAP as reusable composable (`useGSAP.ts`), for gsap access, lazy-loading plugins, `gsap.context(() => {}, scope)` cleanup.
diff --git a/examples/nuxt/app/composables/useGSAP.client.ts b/examples/nuxt/app/composables/useGSAP.ts
similarity index 100%
rename from examples/nuxt/app/composables/useGSAP.client.ts
rename to examples/nuxt/app/composables/useGSAP.ts
diff --git a/examples/nuxt/app/pages/index.vue b/examples/nuxt/app/pages/index.vue
index 2b4e5e4..956404a 100644
--- a/examples/nuxt/app/pages/index.vue
+++ b/examples/nuxt/app/pages/index.vue
@@ -1,6 +1,5 @@
 <script setup>
 import { onMounted, onUnmounted } from "vue";
-import useGSAP from "./composables/useGSAP.client";
 
 const { gsap, ScrollTrigger, lazyLoadPlugin } = useGSAP();
 
diff --git a/skills/gsap-frameworks/SKILL.md b/skills/gsap-frameworks/SKILL.md
index 3f8af87..3c2df86 100644
--- a/skills/gsap-frameworks/SKILL.md
+++ b/skills/gsap-frameworks/SKILL.md
@@ -89,14 +89,14 @@ onUnmounted(() => {
 </template>
 ```
 
-## Nuxt 3
+## Nuxt 4
 
 > See `examples/nuxt/` for a runnable Nuxt 4 project with plugin registration, lazy loading, and SSR-safe patterns.
 
-Use a **client-only composable** (`.client.ts` suffix) to register GSAP Plugins, it never runs on the server:
+Use a **reusable composable** to register GSAP Plugins and also to lazy load Plugins that are not extensively used in your application:
 
 ```typescript
-// composables/useGSAP.client.ts
+// composables/useGSAP.ts
 import { gsap } from "gsap";
 import { ScrollTrigger } from "gsap/ScrollTrigger";
 
@@ -193,12 +193,9 @@ export default function () {
 Access in components via `useGSAP()`:
 
 ```javascript
-import useGSAP from "./composables/useGSAP.client";
-
 const { gsap, ScrollTrigger, lazyLoadPlugin } = useGSAP();
 ```
 
-- ✅ **`.client.ts` suffix** ensures the composable only runs in the browser (SSR-safe). Never import GSAP in server-rendered code.
 - ✅ **`useGSAP()`** provides typed access to the gsap instance and lazy load method.
 - ✅ **Lazy-load any plugin** (SplitText, MorphSVG, etc.) that is not widely used in your app to reduce initial bundle size.
 - ✅ Use **gsap.context(scope)** and **onUnmounted → ctx.revert()** in components, same as Vue 3.