vue_proximity_prefetch_directive_cursor_hover_data_loading.ts

1import { createApp, defineComponent } from 'vue';
2import ProximityPrefetch from 'v-proximity-prefetch';
3
4// Define a component that uses the directive
5const App = defineComponent({
6  setup() {
7    const prefetchData = () => {
8      console.log('Prefetching data as the cursor is near the button...');
9      // Your logic to prefetch data, e.g., fetching a module or API call
10    };
11
12    return {
13      prefetchData,
14    };
15  },
16  template: `
17    <div style="padding: 100px;">
18      <button v-proximity-prefetch="prefetchData">
19        Hover near me to prefetch
20      </button>
21    </div>
22  `,
23});
24
25const app = createApp(App);
26
27// Register the directive globally
28app.use(ProximityPrefetch);
29
30app.mount('#app');