Livewire Tagify Laravel Package

Getting Started

Minimal Setup

1. Installation:

   composer require pharaonic/livewire-tagify
   

   Publish the config (if needed):

   php artisan vendor:publish --provider="Pharaonic\LivewireTagify\LivewireTagifyServiceProvider"
   

2. Basic Usage: Add the directive to your Livewire component's template:

   <livewire:your-component wire:ignore>
       <div x-data x-init="initTagify($wire)">
           @livewireTagify('tagify-input', 'tags', [
               'delimiters' => ['Enter', 'Comma'],
               'placeholder' => 'Add tags...',
           ])
       </div>
   </livewire:your-component>
   

3. First Use Case: Create a Livewire component to handle tagging (e.g., for a post's tags):

   // app/Http/Livewire/PostTags.php
   namespace App\Http\Livewire;
   
   use Livewire\Component;
   use Pharaonic\LivewireTagify\LivewireTagify;
   
   class PostTags extends Component
   {
       use LivewireTagify;
   
       public $tags = [];
   
       public function render()
       {
           return view('livewire.post-tags');
       }
   }
   

Implementation Patterns

Common Workflows

1. Two-Way Binding: Sync tags between Livewire and Tagify:

   @livewireTagify('tagify-input', 'tags', [
       'sync' => true,
       'whitelist' => ['admin', 'user', 'moderator'],
   ])
   

2. Validation: Validate tags on submission:

   protected $rules = [
       'tags' => 'required|array|min:1',
       'tags.*' => 'string|max:255',
   ];
   

3. Dynamic Updates: Update tags via Livewire methods:

   public function addTag($tag)
   {
       $this->tags[] = $tag;
   }
   

4. Integration with Models: Sync tags to a database model:

   public function save()
   {
       $post = Post::find($this->postId);
       $post->tags = $this->tags;
       $post->save();
   }
   

Advanced Patterns

• Custom Styling: Override Tagify styles via CSS or Tailwind:

  .tagify__tag {
      background: #3b82f6;
  }
  

• Remote Suggestions: Fetch suggestions from an API:

  @livewireTagify('tagify-input', 'tags', [
      'remote' => route('api.tags.suggest'),
  ])
  

• Nested Components: Use Tagify inside a modal or nested Livewire component:

  <x-modal>
      <livewire:tag-picker wire:ignore>
          @livewireTagify('modal-tagify', 'tags')
      </livewire:tag-picker>
  </x-modal>
  

Gotchas and Tips

Pitfalls

1. JavaScript Conflicts:

   • Ensure Tagify’s JS is loaded after Alpine.js (if using Alpine).
   • Conflict with other libraries using $wire: Use x-init carefully to avoid duplication.

2. State Sync Issues:

   • If sync is enabled, ensure tags is a public property in your Livewire class.
   • Debug with dd($this->tags) to verify state updates.

3. Delimiters Not Working:

   • Check for typos in delimiters (e.g., ['Enter', 'Comma'] vs. ['\n', ',']).
   • Test in a browser console to isolate the issue.

4. Whitelist Validation:

   • Whitelist tags server-side too (client-side whitelist is bypassable).
   • Example:

     public function updatedTags()
     {
         $this->tags = array_intersect($this->tags, ['admin', 'user']);
     }
     

Debugging Tips

• Inspect Tagify Instance: Add a console log to verify initialization:

  <div x-data x-init="
      initTagify($wire, (instance) => {
          console.log('Tagify initialized:', instance);
      })
  ">
  

• Check for Errors: Open browser dev tools (F12) and look for:

  • Uncaught ReferenceError: initTagify is not defined → Missing JS.
  • Livewire wire:ignore misconfiguration → Ensure the container is ignored.

• Clear Cache: After updates, run:

  php artisan view:clear
  npm run dev
  

Extension Points

1. Custom Directives: Extend the package by creating a custom directive:

   // resources/js/app.js
   document.addEventListener('livewire:init', () => {
       Livewire.hook('tagify:custom', (el, wire, options) => {
           // Custom logic here
       });
   });
   

2. Server-Side Processing: Use updatedTags to process tags before saving:

   public function updatedTags()
   {
       $this->tags = array_map('strtolower', $this->tags);
       $this->tags = array_unique($this->tags);
   }
   

3. Localization: Override Tagify’s labels (e.g., for translations):

   @livewireTagify('tagify-input', 'tags', [
       'labels' => [
           'addTag' => __('Add tag'),
           'removeTag' => __('Remove'),
       ],
   ])
   

4. Performance: For large datasets, lazy-load suggestions:

   @livewireTagify('tagify-input', 'tags', [
       'remote' => route('api.tags.suggest'),
       'remoteDelay' => 300, // 300ms debounce
   ])