Vue

Use Anti-AI UI Framework with Vue 3 for reactive automation resistance.

Installation

Install via npm:

Installation
1.npm install anti-ai-ui vue

Basic Usage

Use the vanilla JS API with Vue's lifecycle hooks:

Basic Usage
1.<template>
2.  <div ref="containerRef" style="position: relative; height: 200px">
3.    <!-- Button will be injected here -->
4.  </div>
5.</template>
6.

7.<script setup>
8.import { ref, onMounted, onUnmounted } from 'vue';
9.import { makeButtonRunaway } from 'anti-ai-ui/vanilla';
10.

11.const containerRef = ref(null);
12.let cleanup = null;
13.

14.onMounted(() => {
15.  cleanup = makeButtonRunaway(containerRef.value, {
16.    buttonText: 'Submit',
17.    evasionDistance: 140,
18.    onCatch: () => {
19.      console.log('Button caught!');
20.    }
21.  });
22.});
23.

24.onUnmounted(() => {
25.  if (cleanup) cleanup();
26.});
27.</script>

Composable Pattern

Create a composable for reusable logic:

Composable
1.// useRunawayButton.js
2.import { ref, onMounted, onUnmounted } from 'vue';
3.import { makeButtonRunaway } from 'anti-ai-ui/vanilla';
4.

5.export function useRunawayButton(options = {}) {
6.  const containerRef = ref(null);
7.  let cleanup = null;
8.

9.  onMounted(() => {
10.    if (containerRef.value) {
11.      cleanup = makeButtonRunaway(containerRef.value, options);
12.    }
13.  });
14.

15.  onUnmounted(() => {
16.    if (cleanup) cleanup();
17.  });
18.

19.  return { containerRef };
20.}
21.

22.// Component usage
23.<template>
24.  <div ref="containerRef" style="position: relative; height: 200px" />
25.</template>
26.

27.<script setup>
28.import { useRunawayButton } from './useRunawayButton';
29.

30.const { containerRef } = useRunawayButton({
31.  buttonText: 'Submit',
32.  onCatch: () => console.log('Caught!')
33.});
34.</script>

Best Practices

  • Always cleanup: Call cleanup functions in onUnmounted
  • Use refs: Access DOM elements with template refs
  • Composables: Create composables for reusable patterns

Next Steps