VueEasyWrapper

For full control over positioning, compose VueEasyWrapper with VueEasyControl and VueEasyOptions and bring your own popper (e.g. floating-vue).

With floating-vue

Let floating-vue handle positioning; VueEasyWrapper just shares state between the trigger and the options list. Wrap the control and the popper in your own containers — the library doesn't ship any chrome.

<script setup>
import { ref } from 'vue';
import { Dropdown } from 'floating-vue';
import { VueEasyWrapper, VueEasyControl, VueEasyOptions } from 'vue-easy-select';

const value = ref('');
const options = [ /* ... */ ];
</script>

<template>
    <VueEasyWrapper v-model="value" :options="options" name="select" placeholder="Pick something">
        <Dropdown auto-size="min">
            <template #default="{ shown }">
                <div class="trigger">
                    <VueEasyControl :is-open="shown">
                        <template #arrow>
                            {{ shown ? "⬆️" : "⬇️" }}
                        </template>
                    </VueEasyControl>
                </div>
            </template>
            <template #popper="{ hide }">
                <div class="popper">
                    <VueEasyOptions @selected="hide" />
                </div>
            </template>
        </Dropdown>
    </VueEasyWrapper>
</template>

<style scoped>
.trigger {
    max-width: 280px;
    border: 1px solid #e1e5e8;
    border-radius: 6px;
    background: #fff;
}
.popper {
    min-width: 200px;
    border: 1px solid #e1e5e8;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
</style>

Without a popper (inline)

Skip the popper entirely and render the options list inline below the control. The library ships zero container styling — bring your own wrapper, border, and separators to fit your design.

Pick something

🔻

001002003004005006

• ⚫️ 001
• ⚫️ 002
• ⚪️ 003
• ⚫️ 004
• ⚫️ 005
• ⚫️ 006

<script setup>
import { ref } from 'vue';
import { VueEasyWrapper, VueEasyControl, VueEasyOptions } from 'vue-easy-select';

const value = ref('');
const options = [ /* ... */ ];
</script>

<template>
    <div class="inline-wrapper">
        <VueEasyWrapper
            v-model="value"
            :is-allow-empty="true"
            :options="options"
            name="select"
            placeholder="Pick something"
        >
            <VueEasyControl>
                <template #arrow>🔻</template>
            </VueEasyControl>
            <div class="inline-wrapper__divider" />
            <VueEasyOptions>
                <template #item="{ item }">
                    {{ item.disabled ? '⚪️' : !item.isChecked ? "⚫️" : "🔘️" }}
                    {{ item.name }}
                </template>
            </VueEasyOptions>
        </VueEasyWrapper>
    </div>
</template>

<style scoped>
.inline-wrapper {
    max-width: 280px;
    border: 1px solid #e1e5e8;
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
}
.inline-wrapper__divider {
    height: 1px;
    background: #e1e5e8;
}
</style>