Added useTemplateRef API support

src/components/landing/DisplayHeader/DisplayHeader.vue

@@ -6,7 +6,7 @@
       </router-link>
 
       <div class="nav-cta-group">
-        <nav class="landing-nav-items" ref="navRef">
+        <nav class="landing-nav-items">
           <router-link class="nav-link" :class="{ 'active-link': activeItem === 'home' }" to="/">Home</router-link>
 
           <router-link class="nav-link" to="/text-animations/split-text">Docs</router-link>
@@ -25,7 +25,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue';
+import { watch, useTemplateRef } from 'vue';
 import { gsap } from 'gsap';
 import VueBitsLogo from '@/components/common/Logo.vue';
 import { useStars } from '@/composables/useStars';
@@ -38,8 +38,7 @@ interface Props {
 
 defineProps<Props>();
 
-const navRef = ref<HTMLElement | null>(null);
-const starCountRef = ref<HTMLElement | null>(null);
+const starCountRef = useTemplateRef<HTMLElement>('starCountRef');
 const stars = useStars();
 
 const openGitHub = () => {

src/components/landing/FeatureCards/FeatureCards.vue

@@ -44,13 +44,13 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, defineComponent, h } from 'vue';
+import { ref, onMounted, onUnmounted, defineComponent, h, useTemplateRef } from 'vue';
 import { gsap } from 'gsap';
 import CountUp from '../../../content/Animations/CountUp/CountUp.vue';
 import './FeatureCards.css';
 
 const isMobile = ref(false);
-const gridRef = ref<HTMLDivElement | null>(null);
+const gridRef = useTemplateRef<HTMLDivElement>('gridRef');
 
 const checkIsMobile = () => {
   isMobile.value = window.innerWidth <= 768;

src/components/landing/PlasmaWave/PlasmaWave.vue

@@ -13,7 +13,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch } from 'vue';
+import { ref, onMounted, onUnmounted, watch, useTemplateRef } from 'vue';
 import { Renderer, Camera, Transform, Program, Mesh, Geometry } from 'ogl';
 
 interface Props {
@@ -150,7 +150,7 @@ void main() {
 
 const isMobile = ref(false);
 const isVisible = ref(true);
-const containerRef = ref<HTMLDivElement | null>(null);
+const containerRef = useTemplateRef<HTMLDivElement>('containerRef');
 const uniformOffset = ref(new Float32Array([props.xOffset, props.yOffset]));
 const uniformResolution = ref(new Float32Array([1, 1]));
 const rendererRef = ref<Renderer | null>(null);

src/components/navs/Sidebar.vue

@@ -101,7 +101,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, nextTick, watch, defineComponent, h, computed } from 'vue';
+import { ref, onMounted, onUnmounted, nextTick, watch, defineComponent, h, computed, useTemplateRef } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { CATEGORIES, NEW, UPDATED } from '../../constants/Categories';
 import Logo from '../../assets/logos/vue-bits-logo.svg';
@@ -118,8 +118,8 @@ const pendingActivePath = ref<string | null>(null);
 const isScrolledToBottom = ref(false);
 const isTransitioning = ref(false);
 
-const sidebarRef = ref<HTMLDivElement>();
-const sidebarContainerRef = ref<HTMLDivElement>();
+const sidebarRef = useTemplateRef<HTMLDivElement>('sidebarRef');
+const sidebarContainerRef = useTemplateRef<HTMLDivElement>('sidebarContainerRef');
 
 let hoverTimeoutRef: number | null = null;
 let hoverDelayTimeoutRef: number | null = null;

src/content/Animations/AnimatedContent/AnimatedContent.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch } from 'vue';
+import { onMounted, onUnmounted, watch, useTemplateRef } from 'vue';
 import { gsap } from 'gsap';
 import { ScrollTrigger } from 'gsap/ScrollTrigger';
 
@@ -37,7 +37,7 @@ const emit = defineEmits<{
   complete: [];
 }>();
 
-const containerRef = ref<HTMLDivElement>();
+const containerRef = useTemplateRef<HTMLDivElement>('containerRef');
 
 onMounted(() => {
   const el = containerRef.value;

src/content/Animations/BlobCursor/BlobCursor.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import gsap from 'gsap';
-import { onMounted, onUnmounted, ref } from 'vue';
+import { onMounted, onUnmounted, ref, useTemplateRef } from 'vue';
 
 interface BlobCursorProps {
   blobType?: 'circle' | 'square';
@@ -48,7 +48,7 @@ const props = withDefaults(defineProps<BlobCursorProps>(), {
   zIndex: 100
 });
 
-const containerRef = ref<HTMLDivElement | null>(null);
+const containerRef = useTemplateRef<HTMLDivElement>('containerRef');
 const blobsRef = ref<(HTMLElement | null)[]>([]);
 
 const updateOffset = () => {

src/content/Animations/ClickSpark/ClickSpark.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, computed, watch } from 'vue';
+import { ref, onMounted, onUnmounted, computed, watch, useTemplateRef } from 'vue';
 
 interface Spark {
   x: number;
@@ -36,8 +36,8 @@ const props = withDefaults(defineProps<Props>(), {
   extraScale: 1.0
 });
 
-const containerRef = ref<HTMLDivElement | null>(null);
-const canvasRef = ref<HTMLCanvasElement | null>(null);
+const containerRef = useTemplateRef<HTMLDivElement>('containerRef');
+const canvasRef = useTemplateRef<HTMLCanvasElement>('canvasRef');
 const sparks = ref<Spark[]>([]);
 const startTimeRef = ref<number | null>(null);
 const animationId = ref<number | null>(null);

src/content/Animations/CountUp/CountUp.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch, computed } from 'vue';
+import { ref, onMounted, onUnmounted, watch, computed, useTemplateRef } from 'vue';
 
 interface Props {
   to: number;
@@ -28,7 +28,7 @@ const props = withDefaults(defineProps<Props>(), {
   separator: ''
 });
 
-const elementRef = ref<HTMLSpanElement | null>(null);
+const elementRef = useTemplateRef<HTMLSpanElement>('elementRef');
 const currentValue = ref(props.direction === 'down' ? props.to : props.from);
 const isInView = ref(false);
 const animationId = ref<number | null>(null);

src/content/Animations/Cubes/Cubes.vue

@@ -77,7 +77,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted, withDefaults } from 'vue';
+import { ref, computed, onMounted, onUnmounted, withDefaults, useTemplateRef } from 'vue';
 import gsap from 'gsap';
 
 interface Gap {
@@ -122,7 +122,7 @@ const props = withDefaults(defineProps<Props>(), {
   rippleSpeed: 2
 });
 
-const sceneRef = ref<HTMLDivElement | null>(null);
+const sceneRef = useTemplateRef<HTMLDivElement>('sceneRef');
 const rafRef = ref<number | null>(null);
 const idleTimerRef = ref<number | null>(null);
 const userActiveRef = ref(false);

src/content/Animations/FadeContent/FadeContent.vue

@@ -13,7 +13,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue';
+import { ref, onMounted, onUnmounted, useTemplateRef } from 'vue';
 
 interface Props {
   blur?: boolean;
@@ -36,7 +36,7 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const inView = ref(false);
-const elementRef = ref<HTMLDivElement | null>(null);
+const elementRef = useTemplateRef<HTMLDivElement>('elementRef');
 let observer: IntersectionObserver | null = null;
 
 onMounted(() => {

src/content/Animations/GlareHover/GlareHover.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue';
+import { computed, useTemplateRef } from 'vue';
 
 interface GlareHoverProps {
   width?: string;
@@ -33,7 +33,7 @@ const props = withDefaults(defineProps<GlareHoverProps>(), {
   style: () => ({})
 });
 
-const overlayRef = ref<HTMLDivElement | null>(null);
+const overlayRef = useTemplateRef<HTMLDivElement>('overlayRef');
 
 const rgba = computed(() => {
   const hex = props.glareColor.replace('#', '');

src/content/Animations/ImageTrail/ImageTrail.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { nextTick, onMounted, ref } from 'vue';
+import { nextTick, onMounted, useTemplateRef } from 'vue';
 import { gsap } from 'gsap';
 
 function lerp(a: number, b: number, n: number): number {
@@ -1194,7 +1194,7 @@ const props = withDefaults(defineProps<ImageTrailProps>(), {
   variant: 1
 });
 
-const containerRef = ref<HTMLDivElement>();
+const containerRef = useTemplateRef<HTMLDivElement>('containerRef');
 
 onMounted(async () => {
   await nextTick();

src/content/Animations/Magnet/Magnet.vue

@@ -19,7 +19,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
+import { ref, computed, onMounted, onUnmounted, watch, useTemplateRef } from 'vue';
 
 interface Props {
   padding?: number;
@@ -45,7 +45,7 @@ defineOptions({
   inheritAttrs: false
 });
 
-const magnetRef = ref<HTMLDivElement | null>(null);
+const magnetRef = useTemplateRef<HTMLDivElement>('magnetRef');
 const isActive = ref(false);
 const position = ref({ x: 0, y: 0 });
 

src/content/Animations/MagnetLines/MagnetLines.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, computed } from 'vue';
+import { onMounted, onUnmounted, computed, useTemplateRef } from 'vue';
 
 interface MagnetLinesProps {
   rows?: number;
@@ -25,7 +25,7 @@ const props = withDefaults(defineProps<MagnetLinesProps>(), {
   style: () => ({})
 });
 
-const containerRef = ref<HTMLDivElement | null>(null);
+const containerRef = useTemplateRef<HTMLDivElement>('containerRef');
 
 const total = computed(() => props.rows * props.columns);
 

src/content/Animations/MetaBalls/MetaBalls.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Camera, Mesh, Program, Renderer, Transform, Triangle, Vec3 } from 'ogl';
-import { onMounted, onUnmounted, shallowRef, watch } from 'vue';
+import { onMounted, onUnmounted, useTemplateRef, watch } from 'vue';
 
 interface MetaBallsProps {
   color?: string;
@@ -118,7 +118,7 @@ void main() {
 }
 `;
 
-const containerRef = shallowRef<HTMLDivElement>();
+const containerRef = useTemplateRef<HTMLDivElement>('containerRef');
 let cleanUpAnimation: () => void = () => {};
 
 const setupAnimation = () => {

src/content/Animations/MetallicPaint/MetallicPaint.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue';
+import { ref, onMounted, onUnmounted, watch, nextTick, useTemplateRef } from 'vue';
 
 interface ShaderParams {
   patternScale: number;
@@ -30,7 +30,7 @@ const props = withDefaults(defineProps<Props>(), {
   })
 });
 
-const canvasRef = ref<HTMLCanvasElement | null>(null);
+const canvasRef = useTemplateRef<HTMLCanvasElement>('canvasRef');
 const gl = ref<WebGL2RenderingContext | null>(null);
 const uniforms = ref<Record<string, WebGLUniformLocation>>({});
 const totalAnimationTime = ref(0);

src/content/Animations/Noise/Noise.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount } from 'vue';
+import { onMounted, onBeforeUnmount, useTemplateRef } from 'vue';
 
 interface NoiseProps {
   patternRefreshInterval?: number;
@@ -21,7 +21,7 @@ const props = withDefaults(defineProps<NoiseProps>(), {
   mixBlendMode: 'normal'
 });
 
-const grainRef = ref<HTMLCanvasElement | null>(null);
+const grainRef = useTemplateRef<HTMLCanvasElement>('grainRef');
 
 let animationId = 0;
 let frame = 0;

src/content/Animations/PixelTransition/PixelTransition.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, watch, onUnmounted, nextTick } from 'vue';
+import { ref, onMounted, watch, onUnmounted, nextTick, useTemplateRef } from 'vue';
 import { gsap } from 'gsap';
 
 interface PixelTransitionProps {
@@ -20,9 +20,9 @@ const props = withDefaults(defineProps<PixelTransitionProps>(), {
   aspectRatio: '100%'
 });
 
-const containerRef = ref<HTMLDivElement | null>(null);
-const pixelGridRef = ref<HTMLDivElement | null>(null);
-const activeRef = ref<HTMLDivElement | null>(null);
+const containerRef = useTemplateRef<HTMLDivElement>('containerRef');
+const pixelGridRef = useTemplateRef<HTMLDivElement>('pixelGridRef');
+const activeRef = useTemplateRef<HTMLDivElement>('activeRef');
 const isActive = ref(false);
 let delayedCall: gsap.core.Tween | null = null;
 

src/content/Animations/Ribbons/Ribbons.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch } from 'vue';
+import { onMounted, onUnmounted, watch, useTemplateRef } from 'vue';
 import { Renderer, Transform, Vec3, Color, Polyline } from 'ogl';
 
 interface RibbonsProps {
@@ -36,7 +36,7 @@ const props = withDefaults(defineProps<RibbonsProps>(), {
   backgroundColor: () => [0, 0, 0, 0]
 });
 
-const ribbonsContainer = ref<HTMLDivElement>();
+const ribbonsContainer = useTemplateRef<HTMLDivElement>('ribbonsContainer');
 
 let renderer: Renderer;
 let scene: Transform;

src/content/Animations/ShapeBlur/ShapeBlur.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch } from 'vue';
+import { onMounted, onUnmounted, watch, useTemplateRef } from 'vue';
 import * as THREE from 'three';
 
 interface ShapeBlurProps {
@@ -28,7 +28,7 @@ const props = withDefaults(defineProps<ShapeBlurProps>(), {
   circleEdge: 0.5
 });
 
-const shapeBlurContainer = ref<HTMLDivElement>();
+const shapeBlurContainer = useTemplateRef<HTMLDivElement>('shapeBlurContainer');
 
 let animationFrameId: number;
 let time = 0;

src/content/Animations/SplashCursor/SplashCursor.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, withDefaults } from 'vue';
+import { onMounted, withDefaults, useTemplateRef } from 'vue';
 
 /* ---------- types ---------- */
 interface ColorRGB {
@@ -50,7 +50,7 @@ const props = withDefaults(defineProps<SplashCursorProps>(), {
 });
 
 /* ---------- refs ---------- */
-const canvasRef = ref<HTMLCanvasElement | null>(null);
+const canvasRef = useTemplateRef<HTMLCanvasElement>('canvasRef');
 
 /* ---------- helper types ---------- */
 interface Pointer {

src/content/Backgrounds/Aurora/Aurora.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch, type CSSProperties } from 'vue';
+import { onMounted, onUnmounted, watch, type CSSProperties, useTemplateRef } from 'vue';
 import { Renderer, Program, Mesh, Color, Triangle } from 'ogl';
 
 interface AuroraProps {
@@ -27,7 +27,7 @@ const props = withDefaults(defineProps<AuroraProps>(), {
   style: () => ({})
 });
 
-const containerRef = ref<HTMLDivElement>();
+const containerRef = useTemplateRef<HTMLDivElement>('containerRef');
 
 const VERT = `#version 300 es
 in vec2 position;