Files

T

fargo 1a822493ba format: apply repo prettier (3.8.1) to the folded skills tree

963 markdown files reformatted with the repository's pinned prettier so
pnpm format:check covers the folded tree like every other repo file.

The formatter's embedded-language pass also normalized code fences
(TS semicolons, closed HTML tags in examples, lowercased CSS hex colors,
one renumbered list that skipped an index). Alphanumeric token deltas vs
the fold commit were audited file-by-file; all are formatter-equivalent
markup normalizations plus the four sanitized skills.

2026-08-19 14:37:17 -05:00

4.5 KiB

Raw Blame History

title, impact, impactDescription, type, tags

title

impact

impactDescription

type

Use .once Modifier for Single-Use Event Handlers

Impact: LOW - Vue provides a .once modifier for event listeners that automatically removes the listener after it fires once. This is useful for one-time events like initialization callbacks, first-interaction tracking, or one-time animations.

Task Checklist

Use .once for events that should only fire once
Consider .once for analytics first-interaction tracking
Use .once for initialization events
Remember .once works on both native and component events

Basic Usage

Component events:

<template>
  <!-- Handler fires only on first emit, then stops listening -->
  <ChildComponent @initialized.once="handleInit" />

  <!-- First-time user interaction tracking -->
  <UserForm @submit.once="trackFirstSubmit" />
</template>

<script setup>
function handleInit(data) {
  console.log('Component initialized:', data);
  // This only runs once, even if child emits 'initialized' multiple times
}

function trackFirstSubmit() {
  analytics.track('first_form_submit');
}
</script>

Native DOM events:

<template>
  <!-- First click only -->
  <button @click.once="showWelcomeMessage">Click to see welcome (once)</button>

  <!-- First scroll only -->
  <div @scroll.once="loadMoreContent">Scroll to load more</div>
</template>

Common Use Cases

One-Time Initialization

<template>
  <ThirdPartyChart @ready.once="onChartReady" :data="chartData" />
</template>

<script setup>
function onChartReady(chartInstance) {
  // Store reference, configure chart
  // Only need to do this once
  chartRef.value = chartInstance;
  chartInstance.setOption(customOptions);
}
</script>

First Interaction Analytics

<template>
  <article @click.once="trackEngagement">
    <h2>{{ article.title }}</h2>
    <p>{{ article.excerpt }}</p>
  </article>
</template>

<script setup>
function trackEngagement() {
  analytics.track('article_first_click', {
    articleId: article.id,
  });
}
</script>

Lazy Loading Trigger

<template>
  <div ref="lazyContainer" @mouseenter.once="loadHeavyContent">
    <template v-if="loaded">
      <HeavyComponent :data="data" />
    </template>
    <template v-else>
      <Placeholder />
    </template>
  </div>
</template>

<script setup>
const loaded = ref(false);
const data = ref(null);

async function loadHeavyContent() {
  data.value = await fetchData();
  loaded.value = true;
}
</script>

One-Time Animation

<template>
  <Transition @after-enter.once="onFirstAppearance">
    <div v-if="show" class="animated-content">Content</div>
  </Transition>
</template>

<script setup>
function onFirstAppearance() {
  // Track first time user sees this element
  // Won't fire again if element leaves and re-enters
}
</script>

Combining with Other Modifiers

<template>
  <!-- Once + prevent default -->
  <form @submit.once.prevent="handleFirstSubmit">...</form>

  <!-- Once + stop propagation -->
  <div @click.once.stop="handleClick">...</div>

  <!-- Once + key modifier -->
  <input @keyup.enter.once="submitOnFirstEnter" />
</template>

Equivalent Manual Implementation

Without .once, you'd need to manually track and remove:

<script setup>
const hasHandled = ref(false);

function handleClickManually() {
  if (hasHandled.value) return;
  hasHandled.value = true;

  // Do one-time action
  doSomething();
}
</script>

<template>
  <!-- Manual approach - more verbose -->
  <button @click="handleClickManually">Click</button>

  <!-- .once approach - cleaner -->
  <button @click.once="doSomething">Click</button>
</template>

When NOT to Use .once

Don't use .once when:

You need the event to fire multiple times
You want to conditionally allow repeated fires
The "once" logic is complex (use manual ref tracking instead)

<template>
  <!-- DON'T: User expects multiple submissions to work -->
  <form @submit.once.prevent="handleSubmit">...</form>

  <!-- DO: Allow repeated submissions -->
  <form @submit.prevent="handleSubmit">...</form>
</template>

4.5 KiB Raw Blame History