Add "append" and "prepend" slots for vue-vuetify extended renderers

Open Beginner friendly
  • Is something wrong?
#2,668 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

@simeyc is already working on this.

Since Nov 12, 2026.

  • #2669 by @simeyc — open

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
75/100
Issue type
Feature
Clarity
Clearly specified
Activity status
Active
Tech stack
typescript
Domain
frontend

Research direction

Start by locating AutocompleteEnumControlRenderer and AutocompleteOneOfEnumControlRenderer in the Vue Vuetify package, then compare their slot handling with the other control renderers. Add the prepend and append slots to both extended renderers and check that the slot content reaches the underlying Vuetify components with consistent formatting.

Written by the indexing model from the issue text.

Description

Is your feature request related to a problem? Please describe.

The jsonforms/vue-vuetify README states that "all control renderers now support prepend and append slots". However, these slots are missing for the extended renderers, namely AutocompleteEnumControlRenderer and AutocompleteOneOfEnumControlRenderer. This means that when using extendedVuetifyRenderers, enum controls lack the slots while others have them.

Describe the solution you'd like

Add the "prepend" and "append" slots to the extended renderers, for consistency with the others.

Describe alternatives you've considered

My current workaround is to implement a custom renderer which wraps the autocomplete renderers in a div with the slot content either side, like:

<template>
    <!-- Adds slots to the default autocomplete oneOf enum renderer. -->
    <div class="d-flex align-center">
        <div v-if="$slots.prepend" class="mr-4">
            <slot name="prepend" />
        </div>
        <AutocompleteEnumControlRenderer class="flex-fill" v-bind="props" />
        <div v-if="$slots.append" class="ml-4">
            <slot name="append" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { type RendererProps } from '@jsonforms/vue';
import { AutocompleteEnumControlRenderer } from '@jsonforms/vue-vuetify';

const props = defineProps<RendererProps>();
</script>

However, this doesn't actually pass the slot content to the underlying Vuetify components (v-select/v-autocomplete), so it's a bit of a hack and formatting is off.

Package

Vue Vuetify Renderers

Additional context

I intend to push a PR for this shortly.

Dominant language
TypeScript
Stars
2.8k
Forks
423
Avg merge
5d 16h
Merged PRs (30d)
9

Getting set up

Open in Codespaces

Starts the project's dev container in your browser, under your own GitHub account.

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from eclipsesource/jsonforms

All issues in eclipsesource/jsonforms

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.