browser.mjs?v=a506e15d:48 ssr:warn [Vue warn]: resolveComponent can only be used in render() or setu

<script setup lang="ts">
import { h, resolveComponent } from 'vue'

// Correct: Using resolveComponent at the top level of setup
const UButton = resolveComponent('UButton')
const UBadge = resolveComponent('UBadge')

// Then you can use these components in your template or render functions
</script>

<script setup lang="ts">
import { h, resolveComponent } from 'vue'

// Correct: Using resolveComponent at the top level of setup
const UButton = resolveComponent('UButton')
const UBadge = resolveComponent('UBadge')

// Then you can use these components in your template or render functions
</script>

<template>
  <!-- This is NOT OK - passing a variable to resolveComponent -->
  <component :is="resolveComponent(aVariableThatHoldsComponentName)" />
  
  <!-- This is OK - direct string in resolveComponent -->
  <component :is="resolveComponent('MyComponent')" />
  
  <!-- This is OK - using a pre-resolved component -->
  <component :is="conditionalComponent" />
  
  <!-- This is OK - using a function that returns a pre-resolved component -->
  <component :is="getComponent(key)" />
</template>

<template>
  <!-- This is NOT OK - passing a variable to resolveComponent -->
  <component :is="resolveComponent(aVariableThatHoldsComponentName)" />
  
  <!-- This is OK - direct string in resolveComponent -->
  <component :is="resolveComponent('MyComponent')" />
  
  <!-- This is OK - using a pre-resolved component -->
  <component :is="conditionalComponent" />
  
  <!-- This is OK - using a function that returns a pre-resolved component -->
  <component :is="getComponent(key)" />
</template>

<script setup>
import { resolveComponent } from 'vue'
// Create a mapping of component keys to resolved components
const componentMap = {
  key1: resolveComponent('MyComponentA'),
  key2: resolveComponent('MyComponentB'),
  key3: resolveComponent('MyComponentC'),
}

// Function to get a component by key
const getComponent = (key) => {
  return componentMap[key]
}

// Now you can use this in your template
</script>

<script setup>
import { resolveComponent } from 'vue'
// Create a mapping of component keys to resolved components
const componentMap = {
  key1: resolveComponent('MyComponentA'),
  key2: resolveComponent('MyComponentB'),
  key3: resolveComponent('MyComponentC'),
}

// Function to get a component by key
const getComponent = (key) => {
  return componentMap[key]
}

// Now you can use this in your template
</script>

   <template>
     <ClientOnly>
       <CoreTresCanvas>
         <slot />
       </CoreTresCanvas>
     </ClientOnly>
   </template>
   

   <template>
     <ClientOnly>
       <CoreTresCanvas>
         <slot />
       </CoreTresCanvas>
     </ClientOnly>
   </template>
   

   export default defineNuxtConfig({
     build: {
       transpile: ['@tresjs/core']
     }
   })
   

   export default defineNuxtConfig({
     build: {
       transpile: ['@tresjs/core']
     }
   })
   

<template>
  <ClientOnly>
    <!-- Your TresCanvas component or layout slot here -->
    <slot />
  </ClientOnly>
</template>

<template>
  <ClientOnly>
    <!-- Your TresCanvas component or layout slot here -->
    <slot />
  </ClientOnly>
</template>

<ClientOnly fallback-tag="div" fallback="Loading 3D content...">
  <!-- Your TresCanvas component -->
  <slot />
</ClientOnly>

<ClientOnly fallback-tag="div" fallback="Loading 3D content...">
  <!-- Your TresCanvas component -->
  <slot />
</ClientOnly>

<ClientOnly>
  <!-- Your TresCanvas component -->
  <slot />
  <template #fallback>
    <div>Loading 3D content...</div>
  </template>
</ClientOnly>

<ClientOnly>
  <!-- Your TresCanvas component -->
  <slot />
  <template #fallback>
    <div>Loading 3D content...</div>
  </template>
</ClientOnly>

export default defineNuxtConfig({
  experimental: {
    componentIslands: true
  }
})

export default defineNuxtConfig({
  experimental: {
    componentIslands: true
  }
})

<template>
  <div>
    <!-- Server rendered content -->
    <p>Server content</p>
    
    <!-- TresCanvas will be loaded and hydrated client-side -->
    <TresCanvas nuxt-client>
      <slot />
    </TresCanvas>
  </div>
</template>

<template>
  <div>
    <!-- Server rendered content -->
    <p>Server content</p>
    
    <!-- TresCanvas will be loaded and hydrated client-side -->
    <TresCanvas nuxt-client>
      <slot />
    </TresCanvas>
  </div>
</template>

export default defineNuxtConfig({
  experimental: {
    componentIslands: true,
    componentIslands: {
      selectiveClient: true
    }
  }
})

export default defineNuxtConfig({
  experimental: {
    componentIslands: true,
    componentIslands: {
      selectiveClient: true
    }
  }
})

<!-- TresCanvas.server.vue -->
<template>
  <div> <!-- Single root element is required -->
    <TresCanvas window-size="" render-mode="on-demand">
      <slot />
    </TresCanvas>
  </div>
</template>

<!-- TresCanvas.server.vue -->
<template>
  <div> <!-- Single root element is required -->
    <TresCanvas window-size="" render-mode="on-demand">
      <slot />
    </TresCanvas>
  </div>
</template>

export default defineNuxtConfig({
  experimental: {
    componentIslands: true,
    // If you need selective client hydration
    componentIslands: {
      selectiveClient: true
    }
  }
})

export default defineNuxtConfig({
  experimental: {
    componentIslands: true,
    // If you need selective client hydration
    componentIslands: {
      selectiveClient: true
    }
  }
})

export default defineNuxtConfig({
  webpack: {
    warningIgnoreFilters: [
      warning => warning.message.includes('No match found for location with path "/__nuxt_island/')
    ]
  }
})

export default defineNuxtConfig({
  webpack: {
    warningIgnoreFilters: [
      warning => warning.message.includes('No match found for location with path "/__nuxt_island/')
    ]
  }
})

<template>
  <NuxtIsland name="TresCanvas" :props="{ 'window-size': '', 'render-mode': 'on-demand' }">
    <slot />
  </NuxtIsland>
</template>

<template>
  <NuxtIsland name="TresCanvas" :props="{ 'window-size': '', 'render-mode': 'on-demand' }">
    <slot />
  </NuxtIsland>
</template>

   <ClientOnly>
     <TresCanvas window-size="" render-mode="on-demand">
       <!-- content -->
     </TresCanvas>
   </ClientOnly>
   

   <ClientOnly>
     <TresCanvas window-size="" render-mode="on-demand">
       <!-- content -->
     </TresCanvas>
   </ClientOnly>
   

   // nuxt.config.ts
   export default defineNuxtConfig({
     experimental: {
       headNext: true
     }
   })
   

   // nuxt.config.ts
   export default defineNuxtConfig({
     experimental: {
       headNext: true
     }
   })
   

   // Instead of directly modifying props
   const localData = [...props.data]
   localData.shift()
   

   // Instead of directly modifying props
   const localData = [...props.data]
   localData.shift()
   

<!-- TresCanvas.server.vue -->
<template>
  <div class="tres-canvas-container">
    <!-- Server-side placeholder -->
  </div>
</template>

<!-- TresCanvas.client.vue -->
<template>
  <div class="tres-canvas-container">
    <!-- Actual WebGL implementation -->
  </div>
</template>

<!-- TresCanvas.server.vue -->
<template>
  <div class="tres-canvas-container">
    <!-- Server-side placeholder -->
  </div>
</template>

<!-- TresCanvas.client.vue -->
<template>
  <div class="tres-canvas-container">
    <!-- Actual WebGL implementation -->
  </div>
</template>

await Promise.all([
  addComponent({
    name: 'TresCanvas',
    filePath: resolver.resolve('./runtime/components/TresCanvas.client.vue'),
    mode: 'client'
  }),
  addComponent({
    name: 'TresCanvas',
    filePath: resolver.resolve('./runtime/components/TresCanvas.server.vue'),
    mode: 'server'
  }),
])

await Promise.all([
  addComponent({
    name: 'TresCanvas',
    filePath: resolver.resolve('./runtime/components/TresCanvas.client.vue'),
    mode: 'client'
  }),
  addComponent({
    name: 'TresCanvas',
    filePath: resolver.resolve('./runtime/components/TresCanvas.server.vue'),
    mode: 'server'
  }),
])

await addComponent({
  name: 'TresCanvas',
  filePath: resolver.resolve('./runtime/components/TresCanvas.client.vue'),
  mode: 'client'
})

await addComponent({
  name: 'TresCanvas',
  filePath: resolver.resolve('./runtime/components/TresCanvas.client.vue'),
  mode: 'client'
})

<ClientOnly>
  <TresCanvas />
</ClientOnly>

<ClientOnly>
  <TresCanvas />
</ClientOnly>

<!-- TresCanvas.server.vue -->
<template>
  <div class="tres-canvas-container" data-tres-canvas>
    <!-- Server-side placeholder with matching structure -->
    <div class="tres-canvas-content">
      <slot />
    </div>
  </div>
</template>

<!-- TresCanvas.client.vue -->
<template>
  <div class="tres-canvas-container" data-tres-canvas>
    <!-- Client implementation with matching structure -->
    <div class="tres-canvas-content">
      <slot />
    </div>
    <!-- WebGL implementation -->
  </div>
</template>

<!-- TresCanvas.server.vue -->
<template>
  <div class="tres-canvas-container" data-tres-canvas>
    <!-- Server-side placeholder with matching structure -->
    <div class="tres-canvas-content">
      <slot />
    </div>
  </div>
</template>

<!-- TresCanvas.client.vue -->
<template>
  <div class="tres-canvas-container" data-tres-canvas>
    <!-- Client implementation with matching structure -->
    <div class="tres-canvas-content">
      <slot />
    </div>
    <!-- WebGL implementation -->
  </div>
</template>

// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    // Routes with 3D content use client-side rendering
    '/3d/**': { ssr: false },
    // Other routes use full SSR
    '/**': { ssr: true }
  }
})

// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    // Routes with 3D content use client-side rendering
    '/3d/**': { ssr: false },
    // Other routes use full SSR
    '/**': { ssr: true }
  }
})

// nuxt.config.ts
export default defineNuxtConfig({
  experimental: {
    clientFallback: true
  }
})

// nuxt.config.ts
export default defineNuxtConfig({
  experimental: {
    clientFallback: true
  }
})

<NuxtClientFallback>
  <TresCanvas window-size="" render-mode="on-demand">
    <!-- content -->
  </TresCanvas>
  <template #fallback>
    <!-- Fallback content if SSR fails -->
    <div class="loading-placeholder">Loading 3D content...</div>
  </template>
</NuxtClientFallback>

<NuxtClientFallback>
  <TresCanvas window-size="" render-mode="on-demand">
    <!-- content -->
  </TresCanvas>
  <template #fallback>
    <!-- Fallback content if SSR fails -->
    <div class="loading-placeholder">Loading 3D content...</div>
  </template>
</NuxtClientFallback>

// nuxt.config.ts
export default defineNuxtConfig({
  experimental: {
    componentIslands: true,
    componentIslands: {
      selectiveClient: 'deep'
    }
  }
})

// nuxt.config.ts
export default defineNuxtConfig({
  experimental: {
    componentIslands: true,
    componentIslands: {
      selectiveClient: 'deep'
    }
  }
})