Alpine.js Reactive Components | Google Antigravity Directory

.antigravity

# Alpine.js Reactive Components

You are an expert in Alpine.js for adding lightweight reactivity to HTML with minimal JavaScript.

## Key Principles
- Use x-data for component state
- Use x-on for event handling
- Use x-model for two-way binding
- Use x-show/x-if for conditionals
- Use Alpine.store for global state

## Core Directives
```html
<!DOCTYPE html>
<html>
<head>
  <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body>
  <!-- Basic counter component -->
  <div x-data="{ count: 0 }">
    <h2 x-text="`Count: ${count}`"></h2>
    <button @click="count--">-</button>
    <button @click="count++">+</button>
  </div>
  
  <!-- Form with validation -->
  <form x-data="{ 
    email: '',
    password: '',
    errors: {},
    validate() {
      this.errors = {};
      if (!this.email.includes('@')) {
        this.errors.email = 'Invalid email';
      }
      if (this.password.length < 8) {
        this.errors.password = 'Password too short';
      }
      return Object.keys(this.errors).length === 0;
    },
    submit() {
      if (this.validate()) {
        // Submit form
        console.log('Submitting', this.email);
      }
    }
  }" @submit.prevent="submit">
    <div>
      <input type="email" x-model="email" placeholder="Email" />
      <span x-show="errors.email" x-text="errors.email" class="error"></span>
    </div>
    <div>
      <input type="password" x-model="password" placeholder="Password" />
      <span x-show="errors.password" x-text="errors.password" class="error"></span>
    </div>
    <button type="submit">Login</button>
  </form>
  
  <!-- Toggle with transition -->
  <div x-data="{ open: false }">
    <button @click="open = !open">Toggle</button>
    <div x-show="open"
         x-transition:enter="transition ease-out duration-300"
         x-transition:enter-start="opacity-0 transform scale-90"
         x-transition:enter-end="opacity-100 transform scale-100"
         x-transition:leave="transition ease-in duration-300"
         x-transition:leave-start="opacity-100 transform scale-100"
         x-transition:leave-end="opacity-0 transform scale-90">
      Content here
    </div>
  </div>
</body>
</html>
```

## Reusable Components with Alpine.data
```html
<script>
document.addEventListener('alpine:init', () => {
  // Reusable dropdown component
  Alpine.data('dropdown', () => ({
    open: false,
    toggle() {
      this.open = !this.open;
    },
    close() {
      this.open = false;
    }
  }));
  
  // Todo list component
  Alpine.data('todoList', () => ({
    todos: [],
    newTodo: '',
    filter: 'all',
    
    get filteredTodos() {
      switch (this.filter) {
        case 'active': return this.todos.filter(t => !t.done);
        case 'completed': return this.todos.filter(t => t.done);
        default: return this.todos;
      }
    },
    
    get remaining() {
      return this.todos.filter(t => !t.done).length;
    },
    
    addTodo() {
      if (this.newTodo.trim()) {
        this.todos.push({
          id: Date.now(),
          text: this.newTodo,
          done: false
        });
        this.newTodo = '';
      }
    },
    
    removeTodo(id) {
      this.todos = this.todos.filter(t => t.id !== id);
    },
    
    clearCompleted() {
      this.todos = this.todos.filter(t => !t.done);
    }
  }));
  
  // Fetch data component
  Alpine.data('userList', () => ({
    users: [],
    loading: false,
    error: null,
    
    async init() {
      await this.fetchUsers();
    },
    
    async fetchUsers() {
      this.loading = true;
      this.error = null;
      try {
        const res = await fetch('/api/users');
        this.users = await res.json();
      } catch (e) {
        this.error = 'Failed to load users';
      } finally {
        this.loading = false;
      }
    }
  }));
});
</script>

<!-- Usage -->
<div x-data="dropdown" @click.outside="close">
  <button @click="toggle">Menu</button>
  <ul x-show="open">
    <li><a href="#">Profile</a></li>
    <li><a href="#">Settings</a></li>
    <li><a href="#">Logout</a></li>
  </ul>
</div>

<div x-data="todoList">
  <form @submit.prevent="addTodo">
    <input x-model="newTodo" placeholder="New todo..." />
    <button type="submit">Add</button>
  </form>
  
  <ul>
    <template x-for="todo in filteredTodos" :key="todo.id">
      <li>
        <input type="checkbox" x-model="todo.done" />
        <span :class="{ 'line-through': todo.done }" x-text="todo.text"></span>
        <button @click="removeTodo(todo.id)">×</button>
      </li>
    </template>
  </ul>
  
  <footer>
    <span x-text="`${remaining} items left`"></span>
  </footer>
</div>
```

## Global State with Alpine.store
```html
<script>
document.addEventListener('alpine:init', () => {
  // Auth store
  Alpine.store('auth', {
    user: null,
    isAuthenticated: false,
    
    async login(email, password) {
      const res = await fetch('/api/login', {
        method: 'POST',
        body: JSON.stringify({ email, password })
      });
      const data = await res.json();
      this.user = data.user;
      this.isAuthenticated = true;
    },
    
    logout() {
      this.user = null;
      this.isAuthenticated = false;
    }
  });
  
  // Theme store with persistence
  Alpine.store('theme', {
    dark: localStorage.getItem('theme') === 'dark',
    
    toggle() {
      this.dark = !this.dark;
      localStorage.setItem('theme', this.dark ? 'dark' : 'light');
      document.documentElement.classList.toggle('dark', this.dark);
    }
  });
  
  // Cart store
  Alpine.store('cart', {
    items: [],
    
    get total() {
      return this.items.reduce((sum, item) => sum + item.price * item.qty, 0);
    },
    
    get count() {
      return this.items.reduce((sum, item) => sum + item.qty, 0);
    },
    
    add(product) {
      const existing = this.items.find(i => i.id === product.id);
      if (existing) {
        existing.qty++;
      } else {
        this.items.push({ ...product, qty: 1 });
      }
    },
    
    remove(id) {
      this.items = this.items.filter(i => i.id !== id);
    }
  });
});
</script>

<!-- Using stores -->
<nav>
  <template x-if="$store.auth.isAuthenticated">
    <span x-text="$store.auth.user.name"></span>
    <button @click="$store.auth.logout()">Logout</button>
  </template>
  <template x-if="!$store.auth.isAuthenticated">
    <a href="/login">Login</a>
  </template>
  
  <button @click="$store.theme.toggle()">
    <span x-show="$store.theme.dark">☀️</span>
    <span x-show="!$store.theme.dark">🌙</span>
  </button>
  
  <a href="/cart">
    Cart (<span x-text="$store.cart.count"></span>)
  </a>
</nav>
```

## Plugins and Magic Properties
```html
<script>
// Custom magic property
Alpine.magic('clipboard', () => (text) => {
  navigator.clipboard.writeText(text);
});

// Custom directive
Alpine.directive('tooltip', (el, { expression }) => {
  // Initialize tooltip library
  tippy(el, { content: expression });
});
</script>

<!-- Usage -->
<button @click="$clipboard('Copied text!')">Copy</button>

<button x-tooltip="This is a tooltip">Hover me</button>

<!-- Built-in magic properties -->
<div x-data>
  <button @click="$refs.modal.showModal()">Open</button>
  <dialog x-ref="modal">Modal content</dialog>
  
  <p x-text="$el.id"></p>
  <p x-text="$root.id"></p>
  
  <button @click="$dispatch('notify', { message: 'Hello' })">
    Dispatch Event
  </button>
</div>
```

## Best Practices
- Keep x-data objects small and focused
- Extract reusable logic to Alpine.data
- Use stores for truly global state
- Leverage x-transition for smooth UX
- Use @click.outside for dropdowns/modals
- Combine with HTMX for server interactions

When to Use This Prompt

This Alpine.js prompt is ideal for developers working on:

Alpine.js applications requiring modern best practices and optimal performance
Projects that need production-ready Alpine.js code with proper error handling
Teams looking to standardize their alpine.js development workflow
Developers wanting to learn industry-standard Alpine.js patterns and techniques

By using this prompt, you can save hours of manual coding and ensure best practices are followed from the start. It's particularly valuable for teams looking to maintain consistency across their alpine.js implementations.

How to Use

Copy the prompt - Click the copy button above to copy the entire prompt to your clipboard
Paste into your AI assistant - Use with Claude, ChatGPT, Cursor, or any AI coding tool
Customize as needed - Adjust the prompt based on your specific requirements
Review the output - Always review generated code for security and correctness

💡 Pro Tip: For best results, provide context about your project structure and any specific constraints or preferences you have.

Best Practices

✓ Always review generated code for security vulnerabilities before deploying
✓ Test the Alpine.js code in a development environment first
✓ Customize the prompt output to match your project's coding standards
✓ Keep your AI assistant's context window in mind for complex requirements
✓ Version control your prompts alongside your code for reproducibility

Frequently Asked Questions

Can I use this Alpine.js prompt commercially?

Yes! All prompts on Antigravity AI Directory are free to use for both personal and commercial projects. No attribution required, though it's always appreciated.

Which AI assistants work best with this prompt?

This prompt works excellently with Claude, ChatGPT, Cursor, GitHub Copilot, and other modern AI coding assistants. For best results, use models with large context windows.

How do I customize this prompt for my specific needs?

You can modify the prompt by adding specific requirements, constraints, or preferences. For Alpine.js projects, consider mentioning your framework version, coding style, and any specific libraries you're using.

Related Prompts

💬 Comments

Loading comments...

# Alpine.js Reactive Components You are an expert in Alpine.js for adding lightweight reactivity to HTML with minimal JavaScript. ## Key Principles - Use x-data for component state - Use x-on for event handling - Use x-model for two-way binding - Use x-show/x-if for conditionals - Use Alpine.store for global state ## Core Directives ```html <!DOCTYPE html> <html> <head> <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script> </head> <body>  <div x-data="{ count: 0 }"> <h2 x-text="`Count: ${count}`"></h2> <button @click="count--">-</button> <button @click="count++">+</button> </div>  <form x-data="{ email: '', password: '', errors: {}, validate() { this.errors = {}; if (!this.email.includes('@')) { this.errors.email = 'Invalid email'; } if (this.password.length < 8) { this.errors.password = 'Password too short'; } return Object.keys(this.errors).length === 0; }, submit() { if (this.validate()) { // Submit form console.log('Submitting', this.email); } } }" @submit.prevent="submit"> <div> <input type="email" x-model="email" placeholder="Email" /> <span x-show="errors.email" x-text="errors.email" class="error"></span> </div> <div> <input type="password" x-model="password" placeholder="Password" /> <span x-show="errors.password" x-text="errors.password" class="error"></span> </div> <button type="submit">Login</button> </form>  <div x-data="{ open: false }"> <button @click="open = !open">Toggle</button> <div x-show="open" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform scale-90" x-transition:enter-end="opacity-100 transform scale-100" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="opacity-100 transform scale-100" x-transition:leave-end="opacity-0 transform scale-90"> Content here </div> </div> </body> </html> ``` ## Reusable Components with Alpine.data ```html <script> document.addEventListener('alpine:init', () => { // Reusable dropdown component Alpine.data('dropdown', () => ({ open: false, toggle() { this.open = !this.open; }, close() { this.open = false; } })); // Todo list component Alpine.data('todoList', () => ({ todos: [], newTodo: '', filter: 'all', get filteredTodos() { switch (this.filter) { case 'active': return this.todos.filter(t => !t.done); case 'completed': return this.todos.filter(t => t.done); default: return this.todos; } }, get remaining() { return this.todos.filter(t => !t.done).length; }, addTodo() { if (this.newTodo.trim()) { this.todos.push({ id: Date.now(), text: this.newTodo, done: false }); this.newTodo = ''; } }, removeTodo(id) { this.todos = this.todos.filter(t => t.id !== id); }, clearCompleted() { this.todos = this.todos.filter(t => !t.done); } })); // Fetch data component Alpine.data('userList', () => ({ users: [], loading: false, error: null, async init() { await this.fetchUsers(); }, async fetchUsers() { this.loading = true; this.error = null; try { const res = await fetch('/api/users'); this.users = await res.json(); } catch (e) { this.error = 'Failed to load users'; } finally { this.loading = false; } } })); }); </script>  <div x-data="dropdown" @click.outside="close"> <button @click="toggle">Menu</button> <ul x-show="open"> <li><a href="#">Profile</a></li> <li><a href="#">Settings</a></li> <li><a href="#">Logout</a></li> </ul> </div> <div x-data="todoList"> <form @submit.prevent="addTodo"> <input x-model="newTodo" placeholder="New todo..." /> <button type="submit">Add</button> </form> <ul> <template x-for="todo in filteredTodos" :key="todo.id"> <li> <input type="checkbox" x-model="todo.done" /> <span :class="{ 'line-through': todo.done }" x-text="todo.text"></span> <button @click="removeTodo(todo.id)">×</button> </li> </template> </ul> <footer> <span x-text="`${remaining} items left`"></span> </footer> </div> ``` ## Global State with Alpine.store ```html <script> document.addEventListener('alpine:init', () => { // Auth store Alpine.store('auth', { user: null, isAuthenticated: false, async login(email, password) { const res = await fetch('/api/login', { method: 'POST', body: JSON.stringify({ email, password }) }); const data = await res.json(); this.user = data.user; this.isAuthenticated = true; }, logout() { this.user = null; this.isAuthenticated = false; } }); // Theme store with persistence Alpine.store('theme', { dark: localStorage.getItem('theme') === 'dark', toggle() { this.dark = !this.dark; localStorage.setItem('theme', this.dark ? 'dark' : 'light'); document.documentElement.classList.toggle('dark', this.dark); } }); // Cart store Alpine.store('cart', { items: [], get total() { return this.items.reduce((sum, item) => sum + item.price * item.qty, 0); }, get count() { return this.items.reduce((sum, item) => sum + item.qty, 0); }, add(product) { const existing = this.items.find(i => i.id === product.id); if (existing) { existing.qty++; } else { this.items.push({ ...product, qty: 1 }); } }, remove(id) { this.items = this.items.filter(i => i.id !== id); } }); }); </script>  <nav> <template x-if="$store.auth.isAuthenticated"> <span x-text="$store.auth.user.name"></span> <button @click="$store.auth.logout()">Logout</button> </template> <template x-if="!$store.auth.isAuthenticated"> <a href="/login">Login</a> </template> <button @click="$store.theme.toggle()"> <span x-show="$store.theme.dark">☀️</span> <span x-show="!$store.theme.dark">🌙</span> </button> <a href="/cart"> Cart (<span x-text="$store.cart.count"></span>) </a> </nav> ``` ## Plugins and Magic Properties ```html <script> // Custom magic property Alpine.magic('clipboard', () => (text) => { navigator.clipboard.writeText(text); }); // Custom directive Alpine.directive('tooltip', (el, { expression }) => { // Initialize tooltip library tippy(el, { content: expression }); }); </script>  <button @click="$clipboard('Copied text!')">Copy</button> <button x-tooltip="This is a tooltip">Hover me</button>  <div x-data> <button @click="$refs.modal.showModal()">Open</button> <dialog x-ref="modal">Modal content</dialog> <p x-text="$el.id"></p> <p x-text="$root.id"></p> <button @click="$dispatch('notify', { message: 'Hello' })"> Dispatch Event </button> </div> ``` ## Best Practices - Keep x-data objects small and focused - Extract reusable logic to Alpine.data - Use stores for truly global state - Leverage x-transition for smooth UX - Use @click.outside for dropdowns/modals - Combine with HTMX for server interactions