<script>
import { useId } from 'vue';

export default {
    beforeCreate() {
        // useId() (Vue 3.5+) yields an id that is stable across SSR and client
        // renders, avoiding hydration mismatches. The old source (this.$.uid) is
        // a per-render-pass counter that differs between server and client.
        this.$__uniqueId = useId();
    },
    methods: {
        /**
         * Get a unique, SSR-stable id for use when an id is required for inputs,
         * labels, etc. Optionally prefixed.
         *
         * @param {string} prefix = null
         * @returns {string}
         *
         * @example
         *      this.uniqueId('label') => 'label-v-3-0'
         */

        uniqueId(prefix = null) {
            prefix = typeof prefix === 'string' ? prefix.trim() + '-' : '';
            return prefix + this.$__uniqueId;
        },
    },
};
</script>
