Vue

Setup

npm install @likftc/core @likftc/vue

Usage

const { get } = useLikftc(keys);

// custom generator
import { v4 } from "uuid";
const generator = () => v4();
const { get } = useLikftc(keys, generator);

Types:

type keys = WatchSource<(string | number)[]>;
type generator = (() => string | number) | undefined;

and replace the key with get(key):

  <transition-group name="list-complete" tag="ul">
-   <li v-for="key in keys" :key="key" class="list-complete-item">
+   <li v-for="key in keys" :key="get(key)" class="list-complete-item">
      {{ key }}
    </li>
  </transition-group>

Demo

<script lang="ts" setup>
import useLikftc from "@likftc/vue";
import useFrame from "./useFrame";
import { v4 } from "uuid";

let frame = useFrame();
const { get } = useLikftc(frame, v4);
</script>

<template>
  <transition-group name="list-complete" tag="ul">
    <li v-for="item in frame" :key="get(item)" class="list-complete-item">
      {{ item }}
    </li>
  </transition-group>
</template>

<style scoped lang="css" src="./style.css"></style>

<script lang="ts" setup>
import useFrame from "./useFrame";

const frame = useFrame();
</script>

<template>
  <transition-group name="list-complete" tag="ul">
    <li v-for="item in frame" :key="item" class="list-complete-item">
      {{ item }}
    </li>
  </transition-group>
</template>

<style scoped lang="css" src="./style.css"></style>

Check the full demo code here.