APERVEIL / DOCS / VUE

Add a shader — Vue

Add an Aperveil WebGPU shader to a Vue app: import the component, give it a size and keep your content in HTML.

Add a shader

Import the installed component and give it a size. The canvas fills the box you give it. In the editor, Install writes these lines for any shader, with the values you tuned.

Hero.vue

<script setup lang="ts">
import DotGrid from "./components/aperveil/dot-grid/vue/DotGrid.vue";
</script>

<template>
  <DotGrid class="hero-shader" :density="72" background="#0d1017ff">
    <template #fallback><div class="hero-shader-fallback" /></template>
  </DotGrid>
</template>

<!-- .hero-shader { width: 100%; height: 560px; } -->

Color Looks, browser support, performance and access are the same on every platform: see the overview.