Skip to content

Instantly share code, notes, and snippets.

@xxRockOnxx
Last active October 4, 2022 13:34
Show Gist options
  • Save xxRockOnxx/4f7f8413b451229025cab01402924c8a to your computer and use it in GitHub Desktop.
Save xxRockOnxx/4f7f8413b451229025cab01402924c8a to your computer and use it in GitHub Desktop.
Vue Composition vs Options API
<template>
<UsersRepo>
<template v-slot="{ isLoading, fetch, users }">
<button
v-if="users.length === 0"
@click="fetch"
>
Fetch Users
</button>
<Menu
v-if="!isLoading"
:options="users"
class="absolute z-10 w-40"
>
<template v-slot:activator="{ listeners }">
<button v-on="listeners">Open Menu</button>
</template>
<template v-slot:option="{ select, isSelected, option }">
<button
:class="isSelected ? 'selected' : ''"
@click="select"
>
{{ option.name }}
</div>
</template>
</Menu>
</template>
</Users>
</template>
<!-- Versus -->
<template>
<button
v-if="users.length === 0"
@click="fetch"
>
Fetch Users
</button>
<div class="absolute z-10 w-40">
<button v-on="activator.listeners">
Open Menu
</button>
<div
v-for="option in options"
:key="option.name"
:class="option.isSelected ? 'selected' : ''"
@click="option.select"
>
{{ option.name }}
</div>
</div>
</template>
<script setup>
const { users, fetch, isLoading } = useUserRepo()
const { activator, options } = useMenu(users)
return {
fetch,
isLoading,
activator,
options,
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment