Programmatic Scroll to Element with Vue 3 Composable

// composables/useScrollTo.js
import { ref, watch, nextTick } from 'vue';

export function useScrollTo() {
  const targetElement = ref(null);

  const scrollTo = (el, behavior = 'smooth') => {
    if (el && typeof el.scrollIntoView === 'function') {
      el.scrollIntoView({ behavior });
    } else {
      console.warn('Invalid element provided for scroll:', el);
    }
  };

  watch(targetElement, (newEl) => {
    if (newEl) {
      nextTick(() => {
        scrollTo(newEl);
      });
    }
  });

  return {
    targetElement,
    scrollTo,
  };
}

// In your component:
/*
<template>
  <nav>
    <a @click="scrollToElement('section1')" href="#">Go to Section 1</a> |
    <a @click="scrollToElement('section2')" href="#">Go to Section 2</a> |
    <a @click="scrollToElement('bottom')" href="#">Go to Bottom</a>
  </nav>

  <div style="height: 800px; background: #f0f0f0;">Scroll down...</div>
  <section id="section1" ref="section1Ref" style="height: 500px; background: lightblue; padding: 20px;">
    <h2>Section 1</h2>
    <p>This is the first section.</p>
  </section>
  <div style="height: 700px; background: #f0f0f0;">More content...</div>
  <section id="section2" ref="section2Ref" style="height: 600px; background: lightcoral; padding: 20px;">
    <h2>Section 2</h2>
    <p>This is the second section.</p>
  </section>
  <div style="height: 1000px; background: #f0f0f0;">Even more content...</div>
  <footer id="bottom" ref="bottomRef" style="height: 150px; background: lightgreen; padding: 20px;">
    <h3>Bottom of Page</h3>
  </footer>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useScrollTo } from '@/composables/useScrollTo'; // Adjust path

const { targetElement, scrollTo } = useScrollTo();

const section1Ref = ref(null);
const section2Ref = ref(null);
const bottomRef = ref(null);

const elementRefs = {
  section1: section1Ref,
  section2: section2Ref,
  bottom: bottomRef,
};

const scrollToElement = (id) => {
  const el = elementRefs[id]?.value;
  if (el) {
    scrollTo(el);
  }
};

// Example of setting targetElement directly
// onMounted(() => {
//   setTimeout(() => {
//     targetElement.value = section2Ref.value;
//   }, 2000);
// });
</script>
*/