Nuxt Crouton
Advanced

Bulk Operations

Perform updates on multiple records at once

Efficiently update or delete multiple records at once with bulk operations.

Basic Bulk Update

Select multiple items and apply updates to all of them:

<script setup lang="ts">
const selectedIds = ref<string[]>([])
const { update } = useCollectionMutation('shopProducts')

const handleBulkUpdate = async (updates: any) => {
  for (const id of selectedIds.value) {
    await update(id, updates)
  }
  selectedIds.value = []
}
</script>

<template>
  <div>
    <!-- Selection UI -->
    <CroutonCollection
      v-model:selected="selectedIds"
      selectable
    />

    <!-- Bulk actions -->
    <UButton
      v-if="selectedIds.length > 0"
      @click="handleBulkUpdate({ featured: true })"
    >
      Mark {{ selectedIds.length }} as Featured
    </UButton>
  </div>
</template>

How It Works

  1. Selection: Use the selectable prop on CroutonCollection to enable row selection
  2. Track Selection: Bind selected IDs to a reactive ref with v-model:selected
  3. Apply Updates: Loop through selected IDs and apply mutations
  4. Clear Selection: Reset the selection array after completion

Multiple Bulk Actions

Provide different bulk operations for the same selection:

<script setup lang="ts">
const selectedIds = ref<string[]>([])
const { update, deleteItems } = useCollectionMutation('shopProducts')

const bulkFeature = async () => {
  for (const id of selectedIds.value) {
    await update(id, { featured: true })
  }
  selectedIds.value = []
}

const bulkUnpublish = async () => {
  for (const id of selectedIds.value) {
    await update(id, { published: false })
  }
  selectedIds.value = []
}

const bulkDelete = async () => {
  if (confirm(`Delete ${selectedIds.value.length} items?`)) {
    for (const id of selectedIds.value) {
      await deleteItems([id])
    }
    selectedIds.value = []
  }
}
</script>

<template>
  <div v-if="selectedIds.length > 0" class="flex gap-2">
    <UButton @click="bulkFeature">
      Mark as Featured
    </UButton>
    <UButton @click="bulkUnpublish" color="gray">
      Unpublish
    </UButton>
    <UButton @click="bulkDelete" color="red">
      Delete {{ selectedIds.length }}
    </UButton>
  </div>
</template>

Best Practices

  • Always confirm destructive bulk operations (like delete)
  • Show the number of selected items in button labels
  • Clear selection after successful operations
  • Consider adding loading states during bulk operations
  • Use optimistic updates for better UX
  • Handle errors gracefully (some items might fail)

Related Sections

Conditional Fields & Dependent Dropdowns

Create dynamic forms with conditional logic

Optimistic Updates & Custom Validation

Enhance UX with instant feedback and custom validation rules