Nuxt — Vue

Use the component as it is, in a page, a layout or app.vue: no <ClientOnly> and no plugin are needed. On the server it renders an empty canvas in its box; in the browser it hydrates to the same markup and the shader starts there, where WebGPU is. Nuxt needs no build.transpile entry for the packages.

<template>
  <DotGrid class="hero-shader">
    <template #fallback><img src="/hero.jpg" alt="" /></template>
  </DotGrid>
</template>

The fallback slot shows only in a browser without WebGPU, after the check, so it never differs between server and browser. Wrap the component in <ClientOnly> only if you would rather leave the canvas out of the server's HTML.

• Blocks. They render on the server the same way, and their stylesheet import works in Nuxt as it is.
• Fonts. Load a block's typefaces with @nuxt/fonts or the Google Fonts link in its README.