GSAP Nuxt Module - Packages Installation Problem

NUXT_UI_PRO_LICENSE=<your-license-key>

NUXT_UI_PRO_LICENSE=<your-license-key>

modules[]=your-gsap-module
gsap.role=premium

modules[]=your-gsap-module
gsap.role=premium

import { fileURLToPath } from 'node:url'
import fs from 'node:fs'
import path from 'node:path'
import { execSync } from 'node:child_process'

export const installGsap = (role) => {
  // Only proceed with special installation if a role is specified
  if (role && ['member', 'plus', 'premium', 'business'].includes(role)) {
    const moduleRoot = fileURLToPath(new URL('../', import.meta.url))
    const packageJsonPath = path.join(moduleRoot, 'package.json')
    const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'))
    
    const gsapPackage = `gsap@npm:@gsap/${role}`
    
    // Check if we need to install or update the package
    if (packageJson.dependencies?.gsap !== gsapPackage) {
      console.log(`Installing GSAP Club package for role: ${role}`)
      try {
        execSync(`npm install ${gsapPackage}`, { cwd: moduleRoot, stdio: 'inherit' })
        console.log('GSAP Club package installed successfully')
      } catch (error) {
        console.error('Failed to install GSAP Club package. Make sure your GSAP_TOKEN is set correctly.')
        console.error(error)
      }
    }
  } else {
    console.log('Using standard GSAP package (no role specified or invalid role)')
  }
}

import { fileURLToPath } from 'node:url'
import fs from 'node:fs'
import path from 'node:path'
import { execSync } from 'node:child_process'

export const installGsap = (role) => {
  // Only proceed with special installation if a role is specified
  if (role && ['member', 'plus', 'premium', 'business'].includes(role)) {
    const moduleRoot = fileURLToPath(new URL('../', import.meta.url))
    const packageJsonPath = path.join(moduleRoot, 'package.json')
    const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'))
    
    const gsapPackage = `gsap@npm:@gsap/${role}`
    
    // Check if we need to install or update the package
    if (packageJson.dependencies?.gsap !== gsapPackage) {
      console.log(`Installing GSAP Club package for role: ${role}`)
      try {
        execSync(`npm install ${gsapPackage}`, { cwd: moduleRoot, stdio: 'inherit' })
        console.log('GSAP Club package installed successfully')
      } catch (error) {
        console.error('Failed to install GSAP Club package. Make sure your GSAP_TOKEN is set correctly.')
        console.error(error)
      }
    }
  } else {
    console.log('Using standard GSAP package (no role specified or invalid role)')
  }
}

// In your module.ts or similar file
export default defineNuxtModule({
  meta: {
    name: 'gsap-nuxt',
    configKey: 'gsap'
  },
  defaults: {
    role: undefined
  },
  setup(options, nuxt) {
    // Install the appropriate GSAP package based on role
    installGsap(options.role)
    
    // Rest of your module setup
    // ...
  }
})

// In your module.ts or similar file
export default defineNuxtModule({
  meta: {
    name: 'gsap-nuxt',
    configKey: 'gsap'
  },
  defaults: {
    role: undefined
  },
  setup(options, nuxt) {
    // Install the appropriate GSAP package based on role
    installGsap(options.role)
    
    // Rest of your module setup
    // ...
  }
})

import { fileURLToPath } from 'node:url'
import fs from 'node:fs'
import path from 'node:path'
import { execSync } from 'node:child_process'

export const installGsap = (role) => {
  const moduleRoot = fileURLToPath(new URL('../', import.meta.url))
  const packageJsonPath = path.join(moduleRoot, 'package.json')
  const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'))
  
  // Determine which package should be installed based on role
  const gsapPackage = role && ['member', 'plus', 'premium', 'business'].includes(role) 
    ? `gsap@npm:@gsap/${role}` 
    : 'gsap@latest'
  
  // Always check if the current package matches what should be installed
  if (packageJson.dependencies?.gsap !== gsapPackage) {
    console.log(`Installing GSAP package: ${gsapPackage}`)
    try {
      execSync(`npm install ${gsapPackage}`, { cwd: moduleRoot, stdio: 'inherit' })
      console.log('GSAP package installed successfully')
    } catch (error) {
      console.error('Failed to install GSAP package.')
      console.error(error)
    }
  } else {
    console.log(`Correct GSAP package already installed: ${gsapPackage}`)
  }
}

import { fileURLToPath } from 'node:url'
import fs from 'node:fs'
import path from 'node:path'
import { execSync } from 'node:child_process'

export const installGsap = (role) => {
  const moduleRoot = fileURLToPath(new URL('../', import.meta.url))
  const packageJsonPath = path.join(moduleRoot, 'package.json')
  const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'))
  
  // Determine which package should be installed based on role
  const gsapPackage = role && ['member', 'plus', 'premium', 'business'].includes(role) 
    ? `gsap@npm:@gsap/${role}` 
    : 'gsap@latest'
  
  // Always check if the current package matches what should be installed
  if (packageJson.dependencies?.gsap !== gsapPackage) {
    console.log(`Installing GSAP package: ${gsapPackage}`)
    try {
      execSync(`npm install ${gsapPackage}`, { cwd: moduleRoot, stdio: 'inherit' })
      console.log('GSAP package installed successfully')
    } catch (error) {
      console.error('Failed to install GSAP package.')
      console.error(error)
    }
  } else {
    console.log(`Correct GSAP package already installed: ${gsapPackage}`)
  }
}

npm install -D @nuxt/devtools

npm install -D @nuxt/devtools

export default defineNuxtConfig({
  devtools: { enabled: false },
  // other config
})

export default defineNuxtConfig({
  devtools: { enabled: false },
  // other config
})

npm install -D @nuxt/devtools@latest

npm install -D @nuxt/devtools@latest

npm dedupe

npm dedupe

   npm install -D @nuxt/devtools
   

   npm install -D @nuxt/devtools
   

   export default defineNuxtConfig({
     devtools: { enabled: false },
     // other config
   })
   

   export default defineNuxtConfig({
     devtools: { enabled: false },
     // other config
   })
   

   npm install -D @nuxt/kit
   

   npm install -D @nuxt/kit
   

   npm install -D nuxi
   

   npm install -D nuxi
   

   {
     "dependencies": {
       "@nuxt/kit": "^3.x.x"
     }
   }
   

   {
     "dependencies": {
       "@nuxt/kit": "^3.x.x"
     }
   }
   

   npm install -D @nuxt/bridge nuxi
   

   npm install -D @nuxt/bridge nuxi
   

   npm install -D @nuxt/telemetry
   

   npm install -D @nuxt/telemetry
   

   export default defineNuxtConfig({
     telemetry: false,
     // other config
   })
   

   export default defineNuxtConfig({
     telemetry: false,
     // other config
   })
   

   npm install -D @nuxt/module-builder
   

   npm install -D @nuxt/module-builder
   

   "scripts": {
     "dev:prepare": "nuxi module-build --stub && nuxi module-build prepare && nuxi prepare playground"
   }
   

   "scripts": {
     "dev:prepare": "nuxi module-build --stub && nuxi module-build prepare && nuxi prepare playground"
   }
   

   "scripts": {
     "dev:prepare": "nuxt-module-build --stub && nuxt-module-build prepare && nuxi prepare playground"
   }
   

   "scripts": {
     "dev:prepare": "nuxt-module-build --stub && nuxt-module-build prepare && nuxi prepare playground"
   }
   

   "scripts": {
     "dev:prepare": "npx nuxt-module-build --stub && npx nuxt-module-build prepare && nuxi prepare playground"
   }
   

   "scripts": {
     "dev:prepare": "npx nuxt-module-build --stub && npx nuxt-module-build prepare && nuxi prepare playground"
   }
   

   You could create 2 projects, tenant1 and tenant2 and another project which is extended by tenant1 and tenant2.
   

   You could create 2 projects, tenant1 and tenant2 and another project which is extended by tenant1 and tenant2.
   

   modules[]=your-gsap-module
   gsap.role=premium
   

   modules[]=your-gsap-module
   gsap.role=premium
   

modules[]=your-gsap-module
gsap.role=premium

modules[]=your-gsap-module
gsap.role=premium

/**
 * This object contains lazy-loaded GSAP Club plugins for use in the application.
 */

// Base plugins available to all Club members
const gsapMemberClubPlugins = {
  SplitText: () => import('gsap/SplitText'),
  Flip: () => import('gsap/Flip'),
  ScrollTrigger: () => import('gsap/ScrollTrigger'),
  Observer: () => import('gsap/Observer')
  // Add other member plugins
}

// Plus plugins (includes all Member plugins)
const gsapPlusClubPlugins = {
  ...gsapMemberClubPlugins,
  ScrollSmoother: () => import('gsap/ScrollSmoother'),
  // Add other plus-specific plugins
}

// Premium plugins (includes all Plus plugins)
const gsapPremiumClubPlugins = {
  ...gsapPlusClubPlugins,
  DrawSVGPlugin: () => import('gsap/DrawSVGPlugin'),
  MorphSVGPlugin: () => import('gsap/MorphSVGPlugin'),
  // Add other premium-specific plugins
}

// Business plugins (includes all Premium plugins)
const gsapBusinessClubPlugins = {
  ...gsapPremiumClubPlugins,
  GSDevTools: () => import('gsap/GSDevTools'),
  MotionPathPlugin: () => import('gsap/MotionPathPlugin'),
  // Add all remaining business-specific plugins
}

/**
 * This object contains lazy-loaded GSAP Club plugins for use in the application.
 */

// Base plugins available to all Club members
const gsapMemberClubPlugins = {
  SplitText: () => import('gsap/SplitText'),
  Flip: () => import('gsap/Flip'),
  ScrollTrigger: () => import('gsap/ScrollTrigger'),
  Observer: () => import('gsap/Observer')
  // Add other member plugins
}

// Plus plugins (includes all Member plugins)
const gsapPlusClubPlugins = {
  ...gsapMemberClubPlugins,
  ScrollSmoother: () => import('gsap/ScrollSmoother'),
  // Add other plus-specific plugins
}

// Premium plugins (includes all Plus plugins)
const gsapPremiumClubPlugins = {
  ...gsapPlusClubPlugins,
  DrawSVGPlugin: () => import('gsap/DrawSVGPlugin'),
  MorphSVGPlugin: () => import('gsap/MorphSVGPlugin'),
  // Add other premium-specific plugins
}

// Business plugins (includes all Premium plugins)
const gsapBusinessClubPlugins = {
  ...gsapPremiumClubPlugins,
  GSDevTools: () => import('gsap/GSDevTools'),
  MotionPathPlugin: () => import('gsap/MotionPathPlugin'),
  // Add all remaining business-specific plugins
}

import { gsap } from 'gsap'
import { gsapPlugins } from './gsap-plugins'
import { gsapMemberClubPlugins, gsapPlusClubPlugins, gsapPremiumClubPlugins, gsapBusinessClubPlugins } from './gsap-club-plugins'
import { defineNuxtPlugin, useRuntimeConfig } from '#app'

/**
 * Register GSAP plugins only if required in module options
 */
export default defineNuxtPlugin(async (_nuxtApp) => {
  const config = useRuntimeConfig().public.gsap
  const role = config.role
  const pluginsToRegister = config.plugins || []
  
  // Determine which plugin set to use based on role
  let clubPlugins = {}
  if (role === 'member') {
    clubPlugins = gsapMemberClubPlugins
  } else if (role === 'plus') {
    clubPlugins = gsapPlusClubPlugins
  } else if (role === 'premium') {
    clubPlugins = gsapPremiumClubPlugins
  } else if (role === 'business') {
    clubPlugins = gsapBusinessClubPlugins
  }
  
  // Combine standard plugins with club plugins if a role is specified
  const allPlugins = role ? { ...gsapPlugins, ...clubPlugins } : gsapPlugins

  for (const pluginName of pluginsToRegister as (keyof typeof allPlugins)[]) {
    if (allPlugins[pluginName]) {
      const plugin = await allPlugins[pluginName]()
      _nuxtApp.provide(pluginName, plugin)
      gsap.registerPlugin(plugin)
    }
    else {
      throw new Error(`[gsap-nuxt-module] Plugin "${pluginName}" not found, available plugins: ${Object.keys(allPlugins).join(', ')}`)
    }
  }
})

import { gsap } from 'gsap'
import { gsapPlugins } from './gsap-plugins'
import { gsapMemberClubPlugins, gsapPlusClubPlugins, gsapPremiumClubPlugins, gsapBusinessClubPlugins } from './gsap-club-plugins'
import { defineNuxtPlugin, useRuntimeConfig } from '#app'

/**
 * Register GSAP plugins only if required in module options
 */
export default defineNuxtPlugin(async (_nuxtApp) => {
  const config = useRuntimeConfig().public.gsap
  const role = config.role
  const pluginsToRegister = config.plugins || []
  
  // Determine which plugin set to use based on role
  let clubPlugins = {}
  if (role === 'member') {
    clubPlugins = gsapMemberClubPlugins
  } else if (role === 'plus') {
    clubPlugins = gsapPlusClubPlugins
  } else if (role === 'premium') {
    clubPlugins = gsapPremiumClubPlugins
  } else if (role === 'business') {
    clubPlugins = gsapBusinessClubPlugins
  }
  
  // Combine standard plugins with club plugins if a role is specified
  const allPlugins = role ? { ...gsapPlugins, ...clubPlugins } : gsapPlugins

  for (const pluginName of pluginsToRegister as (keyof typeof allPlugins)[]) {
    if (allPlugins[pluginName]) {
      const plugin = await allPlugins[pluginName]()
      _nuxtApp.provide(pluginName, plugin)
      gsap.registerPlugin(plugin)
    }
    else {
      throw new Error(`[gsap-nuxt-module] Plugin "${pluginName}" not found, available plugins: ${Object.keys(allPlugins).join(', ')}`)
    }
  }
})

export default defineNuxtPlugin({
  name: 'gsap-plugin',
  parallel: true,
  async setup(_nuxtApp) {
    // Plugin code here
  }
})

export default defineNuxtPlugin({
  name: 'gsap-plugin',
  parallel: true,
  async setup(_nuxtApp) {
    // Plugin code here
  }
})