From 2b2e9622cb5a3a156d1071e4c424538c9c8e306b Mon Sep 17 00:00:00 2001
From: selemondev <selemondev19@gmail.com>
Date: Thu, 21 Sep 2023 13:38:14 +0300
Subject: [PATCH] chore (app): refactor

---
 packages/nuxt-ui-vue/package.json             |  3 +-
 packages/nuxt-ui-vue/src/App.vue              |  4 +-
 packages/nuxt-ui-vue/src/components/Hello.vue | 13 ----
 .../src/components/data/Table/UTable.vue      | 18 ++++-
 .../elements/Accordion/UAccordion.vue         | 14 ++--
 .../src/components/elements/Alert/UAlert.vue  | 21 +++---
 .../components/elements/Avatar/UAvatar.vue    | 15 ++---
 .../src/components/elements/Badge/UBadge.vue  | 14 ++--
 .../components/elements/Button/UButton.vue    | 14 ++--
 .../elements/Button/UButtonGroup.vue          | 14 ++--
 .../elements/Dropdown/UDropdown.vue           | 16 ++---
 .../src/components/elements/Icon/UIcon.vue    | 17 ++---
 .../src/components/elements/Kbd/UKbd.vue      | 14 ++--
 .../src/components/elements/Link/ULink.vue    | 15 ++---
 .../components/forms/Checkbox/UCheckbox.vue   | 14 ++--
 .../components/forms/FormGroup/UFormGroup.vue |  2 +-
 .../src/components/forms/Input/UInput.vue     | 14 ++--
 .../src/components/forms/Radio/URadio.vue     | 14 ++--
 .../src/components/forms/Range/URange.vue     | 16 ++---
 .../src/components/forms/Select/USelect.vue   | 16 ++---
 .../forms/SelectMenu/USelectMenu.vue          |  3 +-
 .../components/forms/Textarea/UTextarea.vue   | 16 ++---
 .../src/components/forms/Toggle/UToggle.vue   | 16 ++---
 .../src/components/layouts/Card/UCard.vue     | 16 ++---
 .../layouts/Container/UContainer.vue          | 18 +++--
 .../components/layouts/Skeleton/USkeleton.vue | 16 ++---
 .../Command-Palette/CommandPalette.vue        | 49 +++++++++-----
 .../Command-Palette/CommandPaletteGroup.vue   | 12 ++--
 .../navigation/Pagination/UPagination.vue     | 16 ++---
 .../src/components/navigation/Tabs/UTabs.vue  | 16 ++---
 .../UVerticalNavigation.vue                   | 16 ++---
 .../overlays/ContextMenu/UContextMenu.vue     | 16 ++---
 .../src/components/overlays/Modal/UModal.vue  | 16 ++---
 .../overlays/Notification/UNotification.vue   | 16 ++---
 .../overlays/Notification/UNotifications.vue  | 16 ++---
 .../components/overlays/Popover/UPopover.vue  | 16 ++---
 .../overlays/Slideover/USlideover.vue         | 14 ++--
 .../components/overlays/Tooltip/UTooltip.vue  | 16 ++---
 .../nuxt-ui-vue/src/composables/usePopper.ts  | 65 +++++++++++--------
 packages/nuxt-ui-vue/src/lodash-es.d.ts       |  1 -
 packages/nuxt-ui-vue/src/plugin.ts            |  3 +-
 packages/nuxt-ui-vue/src/utils/lodash.ts      | 31 +++++++++
 42 files changed, 332 insertions(+), 340 deletions(-)
 delete mode 100644 packages/nuxt-ui-vue/src/components/Hello.vue
 delete mode 100755 packages/nuxt-ui-vue/src/lodash-es.d.ts
 create mode 100644 packages/nuxt-ui-vue/src/utils/lodash.ts

diff --git a/packages/nuxt-ui-vue/package.json b/packages/nuxt-ui-vue/package.json
index b4cd5d4..a6a0aca 100755
--- a/packages/nuxt-ui-vue/package.json
+++ b/packages/nuxt-ui-vue/package.json
@@ -43,7 +43,8 @@
     "defu": "^6.1.2",
     "esno": "^0.17.0",
     "fuse.js": "^6.6.2",
-    "lodash-es": "^4.17.21",
+    "ohash": "^1.1.3",
+    "scule": "^1.0.0",
     "tailwind-merge": "^1.14.0",
     "vue": "^3.3.4",
     "vue-router": "^4.2.4"
diff --git a/packages/nuxt-ui-vue/src/App.vue b/packages/nuxt-ui-vue/src/App.vue
index 04d85e1..7770572 100755
--- a/packages/nuxt-ui-vue/src/App.vue
+++ b/packages/nuxt-ui-vue/src/App.vue
@@ -1,3 +1,5 @@
 <template>
-  <div />
+  <div class="grid place-items-center w-full min-h-screen">
+    <!-- <UKbd>K</UKbd> -->
+  </div>
 </template>
diff --git a/packages/nuxt-ui-vue/src/components/Hello.vue b/packages/nuxt-ui-vue/src/components/Hello.vue
deleted file mode 100644
index 9091f41..0000000
--- a/packages/nuxt-ui-vue/src/components/Hello.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<script setup lang="ts">
-import { useToast } from '@/composables/useToast'
-
-const toast = useToast()
-</script>
-
-<template>
-  <UButton
-    label="Show toast" @click="toast.add({
-      title: 'Update downloaded.',
-    })"
-  />
-</template>
diff --git a/packages/nuxt-ui-vue/src/components/data/Table/UTable.vue b/packages/nuxt-ui-vue/src/components/data/Table/UTable.vue
index cb47dda..cd3eaae 100755
--- a/packages/nuxt-ui-vue/src/components/data/Table/UTable.vue
+++ b/packages/nuxt-ui-vue/src/components/data/Table/UTable.vue
@@ -1,9 +1,10 @@
 <script lang='ts'>
 import { computed, defineComponent, ref, toRaw } from 'vue'
 import type { PropType } from 'vue'
-import { capitalize, get, omit, orderBy } from 'lodash-es'
+import { upperFirst } from 'scule'
 import { defu } from 'defu'
 import { twMerge } from 'tailwind-merge'
+import { get, omit } from '../../../utils/lodash'
 import UButton from '../../elements/Button/UButton.vue'
 import UIcon from '../../elements/Icon/UIcon.vue'
 import UCheckbox from '../../forms/Checkbox/UCheckbox.vue'
@@ -95,7 +96,7 @@ export default defineComponent({
 
     const wrapperClass = computed(() => twMerge(variant.value.root, attrs.class as string))
 
-    const columns = computed(() => props.columns ?? Object.keys(omit(props.rows[0] ?? {}, ['click'])).map(key => ({ key, label: capitalize(key), sortable: false })))
+    const columns = computed(() => props.columns ?? Object.keys(omit(props.rows[0] ?? {}, ['click'])).map(key => ({ key, label: upperFirst(key), sortable: false })))
 
     const sort = ref(defu({}, props.sort, { column: null, direction: 'asc' }))
 
@@ -105,7 +106,18 @@ export default defineComponent({
 
       const { column, direction } = sort.value
 
-      return orderBy(props.rows, column, direction)
+      return props.rows.slice().sort((a, b) => {
+        const aValue = a[column]
+        const bValue = b[column]
+        if (aValue === bValue)
+          return 0
+
+        if (direction === 'asc')
+          return aValue < bValue ? -1 : 1
+
+        else
+          return aValue > bValue ? -1 : 1
+      })
     })
 
     const selected = computed({
diff --git a/packages/nuxt-ui-vue/src/components/elements/Accordion/UAccordion.vue b/packages/nuxt-ui-vue/src/components/elements/Accordion/UAccordion.vue
index a4a3c4a..662c17b 100755
--- a/packages/nuxt-ui-vue/src/components/elements/Accordion/UAccordion.vue
+++ b/packages/nuxt-ui-vue/src/components/elements/Accordion/UAccordion.vue
@@ -1,9 +1,9 @@
 <script setup lang='ts'>
-import { computed, defineComponent, ref } from 'vue'
+import { computed, ref } from 'vue'
 import type { PropType } from 'vue'
-import { omit } from 'lodash-es'
 import { Disclosure as HDisclosure, DisclosureButton as HDisclosureButton, DisclosurePanel as HDisclosurePanel } from '@headlessui/vue'
 import classNames from 'classnames'
+import { omit } from '../../../utils/lodash'
 import UButton from '../Button/UButton.vue'
 import UIcon from '../Icon/UIcon.vue'
 import type { AccordionItem } from '@/Types/components/accordionItem'
@@ -15,6 +15,10 @@ import nuxtLabsTheme from '@/theme/nuxtLabsTheme'
 import stateEmitter from '@/utils/stateEmitter'
 import { useVariants } from '@/composables/useVariants'
 
+defineOptions({
+  name: Components.UAccordion,
+})
+
 const props = defineProps({
   ...getVariantPropsWithClassesList<UAccordion>(),
   items: {
@@ -98,12 +102,6 @@ const transitions = computed(() => {
 })
 </script>
 
-<script lang="ts">
-export default defineComponent({
-  name: Components.UAccordion,
-})
-</script>
-
 <template>
   <div :class="variant.root">
     <HDisclosure v-for="(item, index) in items" v-slot="{ open, close }" :key="index" :default-open="defaultOpen || item.defaultOpen">
diff --git a/packages/nuxt-ui-vue/src/components/elements/Alert/UAlert.vue b/packages/nuxt-ui-vue/src/components/elements/Alert/UAlert.vue
index f074c1b..8fa5d0e 100755
--- a/packages/nuxt-ui-vue/src/components/elements/Alert/UAlert.vue
+++ b/packages/nuxt-ui-vue/src/components/elements/Alert/UAlert.vue
@@ -1,8 +1,9 @@
 <script setup lang='ts'>
-import { computed, defineComponent } from 'vue'
+import { computed, useAttrs } from 'vue'
 import type { PropType } from 'vue'
 import classNames from 'classnames'
 import UIcon from '../Icon/UIcon.vue'
+import { omit } from '../../../utils/lodash'
 import UAvatar from '../Avatar/UAvatar.vue'
 import UButton from '../Button/UButton.vue'
 import type { UAlert } from '@/Types/componentsTypes/components'
@@ -14,6 +15,11 @@ import { getVariantPropsWithClassesList } from '@/utils/getVariantProps'
 import type { VariantJSWithClassesListProps } from '@/utils/getVariantProps'
 import { useVariants } from '@/composables/useVariants'
 
+defineOptions({
+  name: Components.UAlert,
+  inheritAttrs: false,
+})
+
 const props = defineProps({
   ...getVariantPropsWithClassesList<UAlert>(),
   title: {
@@ -60,6 +66,10 @@ const emit = defineEmits<{
   (event: 'close'): void
 }>()
 
+const attrs = useAttrs()
+
+const attrsOmitted = omit(attrs, ['class'])
+
 const variant = computed(() => {
   const customProps = {
     ...props,
@@ -94,15 +104,8 @@ function handleClose() {
 }
 </script>
 
-<script lang="ts">
-export default defineComponent({
-  name: Components.UAlert,
-  inheritAttrs: false,
-})
-</script>
-
 <template>
-  <div :class="alertClass">
+  <div :class="alertClass" v-bind="attrsOmitted">
     <div
       class="flex gap-3"
       :class="{ 'items-start': (description || $slots.description), 'items-center': !description && !$slots.description }"
diff --git a/packages/nuxt-ui-vue/src/components/elements/Avatar/UAvatar.vue b/packages/nuxt-ui-vue/src/components/elements/Avatar/UAvatar.vue
index 0683b2a..54535f4 100755
--- a/packages/nuxt-ui-vue/src/components/elements/Avatar/UAvatar.vue
+++ b/packages/nuxt-ui-vue/src/components/elements/Avatar/UAvatar.vue
@@ -1,9 +1,9 @@
 <script setup lang='ts'>
 import type { PropType } from 'vue'
-import { omit } from 'lodash-es'
-import { computed, defineComponent, ref, useAttrs, watch } from 'vue'
+import { computed, ref, useAttrs, watch } from 'vue'
 import classNames from 'classnames'
 import { Icon } from '@iconify/vue'
+import { omit } from '../../../utils/lodash'
 import type { VariantJSWithClassesListProps } from '../../../utils/getVariantProps'
 import { getVariantPropsWithClassesList } from '../../../utils/getVariantProps'
 import type { UAvatar } from '../../../Types/componentsTypes/components'
@@ -14,6 +14,11 @@ import { Positions } from '@/Types/enums/Positions'
 
 export type AvatarSize = '3xs' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'
 export type AvatarChipPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'
+
+defineOptions({
+  name: Components.UAvatar,
+})
+
 const props = defineProps({
   ...getVariantPropsWithClassesList<UAvatar>(),
   name: {
@@ -149,12 +154,6 @@ const attrs = useAttrs()
 const attrsOmitted = omit(attrs, ['class'])
 </script>
 
-<script lang="ts">
-export default defineComponent({
-  name: Components.UAvatar,
-})
-</script>
-
 <template>
   <span :class="[avatarWrapperClasses, avatarClasses]" :title="props.name">
     <img v-if="url && !error" v-bind="attrsOmitted" :class="avatarClasses" :src="url" :alt="props.name" @error="onError">
diff --git a/packages/nuxt-ui-vue/src/components/elements/Badge/UBadge.vue b/packages/nuxt-ui-vue/src/components/elements/Badge/UBadge.vue
index 25d53b1..30d19ae 100755
--- a/packages/nuxt-ui-vue/src/components/elements/Badge/UBadge.vue
+++ b/packages/nuxt-ui-vue/src/components/elements/Badge/UBadge.vue
@@ -1,5 +1,5 @@
 <script setup lang='ts'>
-import { computed, defineComponent } from 'vue'
+import { computed } from 'vue'
 import classNames from 'classnames'
 import nuxtLabsTheme from '@/theme/nuxtLabsTheme'
 import { getVariantPropsWithClassesList } from '@/utils/getVariantProps'
@@ -8,6 +8,11 @@ import type { UBadge } from '@/Types/componentsTypes/components'
 import { Components } from '@/Types/enums/Components'
 import { useVariants } from '@/composables/useVariants'
 
+defineOptions({
+  name: Components.UBadge,
+  inheritAttrs: false,
+})
+
 const props = defineProps({
   ...getVariantPropsWithClassesList<UBadge>(),
   size: {
@@ -61,13 +66,6 @@ const badgeClass = computed(() => {
 })
 </script>
 
-<script lang="ts">
-export default defineComponent({
-  name: Components.UBadge,
-  inheritAttrs: false,
-})
-</script>
-
 <template>
   <span :class="badgeClass">
     <slot>{{ label }}</slot>
diff --git a/packages/nuxt-ui-vue/src/components/elements/Button/UButton.vue b/packages/nuxt-ui-vue/src/components/elements/Button/UButton.vue
index 102a726..27dbe6f 100755
--- a/packages/nuxt-ui-vue/src/components/elements/Button/UButton.vue
+++ b/packages/nuxt-ui-vue/src/components/elements/Button/UButton.vue
@@ -1,5 +1,5 @@
 <script setup lang='ts'>
-import { computed, defineComponent, useAttrs, useSlots } from 'vue'
+import { computed, useAttrs, useSlots } from 'vue'
 import type { PropType } from 'vue'
 import classNames from 'classnames'
 import type { RouteLocationRaw } from 'vue-router'
@@ -11,6 +11,11 @@ import UIcon from '../../elements/Icon/UIcon.vue'
 import { useVariants } from '../../../composables/useVariants'
 import nuxtLabsTheme from '../../../theme/nuxtLabsTheme'
 
+defineOptions({
+  name: Components.UButton,
+  inheritAttrs: false,
+})
+
 const props = defineProps({
   ...getVariantPropsWithClassesList<UButton>(),
 
@@ -167,13 +172,6 @@ const buttonClass = computed(() => {
 })
 </script>
 
-<script lang="ts">
-export default defineComponent({
-  name: Components.UButton,
-  inheritAttrs: false,
-})
-</script>
-
 <template>
   <component :is="props.to ? 'a' : 'button'" :class="buttonClass" :aria-label="ariaLabel" v-bind="bind">
     <slot name="leading" :disabled="disabled" :loading="loading">
diff --git a/packages/nuxt-ui-vue/src/components/elements/Button/UButtonGroup.vue b/packages/nuxt-ui-vue/src/components/elements/Button/UButtonGroup.vue
index 6a417df..0850401 100755
--- a/packages/nuxt-ui-vue/src/components/elements/Button/UButtonGroup.vue
+++ b/packages/nuxt-ui-vue/src/components/elements/Button/UButtonGroup.vue
@@ -1,10 +1,15 @@
 <script setup lang="ts">
-import { computed, defineComponent } from 'vue'
+import { computed } from 'vue'
 import { getVariantPropsWithClassesList } from '../../../utils/getVariantProps'
 import type { UButtonGroup } from '../../../Types/componentsTypes/components'
 import { Components } from '../../../Types/enums/Components'
 import { useVariants } from '../../../composables/useVariants'
 
+defineOptions({
+  name: Components.UButtonGroup,
+  inheritAttrs: false,
+})
+
 const props = defineProps({
   ...getVariantPropsWithClassesList<UButtonGroup>(),
   orientation: {
@@ -26,13 +31,6 @@ const variant = computed(() => {
 })
 </script>
 
-<script lang="ts">
-export default defineComponent({
-  name: Components.UButtonGroup,
-  inheritAttrs: false,
-})
-</script>
-
 <template>
   <div :class="variant.root">
     <slot />
diff --git a/packages/nuxt-ui-vue/src/components/elements/Dropdown/UDropdown.vue b/packages/nuxt-ui-vue/src/components/elements/Dropdown/UDropdown.vue
index 144aae7..36e0167 100755
--- a/packages/nuxt-ui-vue/src/components/elements/Dropdown/UDropdown.vue
+++ b/packages/nuxt-ui-vue/src/components/elements/Dropdown/UDropdown.vue
@@ -1,9 +1,9 @@
 <script setup lang='ts'>
-import { computed, defineComponent, onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { Menu as HMenu, MenuButton as HMenuButton, MenuItem as HMenuItem, MenuItems as HMenuItems } from '@headlessui/vue'
 import type { PropType } from 'vue'
 import { defu } from 'defu'
-import { omit } from 'lodash-es'
+import { omit } from '../../../utils/lodash'
 import ULink from '../Link/ULink.vue'
 import UIcon from '../Icon/UIcon.vue'
 import UAvatar from '../Avatar/UAvatar.vue'
@@ -18,6 +18,11 @@ import { getVariantPropsWithClassesList } from '@/utils/getVariantProps'
 import type { VariantJSWithClassesListProps } from '@/utils/getVariantProps'
 import nuxtLabsTheme from '@/theme/nuxtLabsTheme'
 
+defineOptions({
+  name: Components.UDropdown,
+  inheritAttrs: false,
+})
+
 const props = defineProps({
   ...getVariantPropsWithClassesList<UDropdown>(),
   items: {
@@ -128,13 +133,6 @@ function onMouseLeave() {
 }
 </script>
 
-<script lang="ts">
-export default defineComponent({
-  name: Components.UDropdown,
-  inheritAttrs: false,
-})
-</script>
-
 <template>
   <HMenu v-slot="{ open }" as="div" :class="variant.root" @mouseleave="onMouseLeave">
     <HMenuButton
diff --git a/packages/nuxt-ui-vue/src/components/elements/Icon/UIcon.vue b/packages/nuxt-ui-vue/src/components/elements/Icon/UIcon.vue
index dfd90cc..11d77fe 100755
--- a/packages/nuxt-ui-vue/src/components/elements/Icon/UIcon.vue
+++ b/packages/nuxt-ui-vue/src/components/elements/Icon/UIcon.vue
@@ -1,17 +1,14 @@
 <script setup lang="ts">
 import { Icon, loadIcon } from '@iconify/vue'
-import { computed, defineComponent, ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { Components } from '../../../Types/enums/Components'
 import type { UIcon } from '../../../Types/componentsTypes/components'
 import { getVariantPropsWithClassesList } from '../../../utils/getVariantProps'
 import { useVariants } from '../../../composables/useVariants'
 
-export type IconSizes = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '6xl' | '8xl'
-export type IconNumberSize = number
-export interface Props {
-  name: string
-  size?: IconNumberSize | IconSizes
-}
+defineOptions({
+  name: Components.UIcon,
+})
 const props = defineProps({
   ...getVariantPropsWithClassesList<UIcon>(),
   size: {
@@ -56,12 +53,6 @@ const ariaProps = {
 fetchIcon()
 </script>
 
-<script lang="ts">
-export default defineComponent({
-  name: Components.UIcon,
-})
-</script>
-
 <template>
   <span v-if="isFetching" :style="styleClass" :class="variant.root" v-bind="ariaProps" />
   <Icon v-else-if="icon" :class="iconClass" :style="styleClass" :icon="icon" v-bind="ariaProps" />
diff --git a/packages/nuxt-ui-vue/src/components/elements/Kbd/UKbd.vue b/packages/nuxt-ui-vue/src/components/elements/Kbd/UKbd.vue
index 87b3a84..89e02f2 100755
--- a/packages/nuxt-ui-vue/src/components/elements/Kbd/UKbd.vue
+++ b/packages/nuxt-ui-vue/src/components/elements/Kbd/UKbd.vue
@@ -1,5 +1,5 @@
 <script setup lang='ts'>
-import { computed, defineComponent } from 'vue'
+import { computed } from 'vue'
 import { useVariants } from '@/composables/useVariants'
 import { getVariantPropsWithClassesList } from '@/utils/getVariantProps'
 import type { VariantJSWithClassesListProps } from '@/utils/getVariantProps'
@@ -7,6 +7,11 @@ import { Components } from '@/Types/enums/Components'
 import type { UKbd } from '@/Types/componentsTypes/components'
 import nuxtLabsTheme from '@/theme/nuxtLabsTheme'
 
+defineOptions({
+  name: Components.UKbd,
+  inheritAttrs: false,
+})
+
 const props = defineProps({
   ...getVariantPropsWithClassesList<UKbd>(),
   value: {
@@ -35,13 +40,6 @@ const variant = computed(() => {
 })
 </script>
 
-<script lang="ts">
-export default defineComponent({
-  name: Components.UKbd,
-  inheritAttrs: false,
-})
-</script>
-
 <template>
   <kbd :class="[variant.root, nuxtLabsTheme.UKbd.base.size[size], variant.padding, variant.rounded, variant.font, variant.background, variant.ring]">
     <slot>{{ value }}</slot>
diff --git a/packages/nuxt-ui-vue/src/components/elements/Link/ULink.vue b/packages/nuxt-ui-vue/src/components/elements/Link/ULink.vue
index cc676d0..41ea7a9 100755
--- a/packages/nuxt-ui-vue/src/components/elements/Link/ULink.vue
+++ b/packages/nuxt-ui-vue/src/components/elements/Link/ULink.vue
@@ -1,9 +1,13 @@
 <script setup lang='ts'>
 import { RouterLink } from 'vue-router'
-import { isEqual } from 'lodash-es'
-import { defineComponent } from 'vue'
+import { isEqual } from 'ohash'
 import { Components } from '@/Types/enums/Components'
 
+defineOptions({
+  name: Components.ULink,
+  inheritAttrs: false,
+})
+
 const props = defineProps({
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-expect-error
@@ -51,13 +55,6 @@ function resolveLinkClass(route: { query: any; hash: any }, $route: { query: any
 }
 </script>
 
-<script lang="ts">
-export default defineComponent({
-  name: Components.ULink,
-  inheritAttrs: false,
-})
-</script>
-
 <template>
   <button v-if="!$attrs.to" v-bind="$attrs" :class="inactiveClass">
     <slot />
diff --git a/packages/nuxt-ui-vue/src/components/forms/Checkbox/UCheckbox.vue b/packages/nuxt-ui-vue/src/components/forms/Checkbox/UCheckbox.vue
index d64ca81..2a86581 100755
--- a/packages/nuxt-ui-vue/src/components/forms/Checkbox/UCheckbox.vue
+++ b/packages/nuxt-ui-vue/src/components/forms/Checkbox/UCheckbox.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, defineComponent } from 'vue'
+import { computed } from 'vue'
 import classNames from 'classnames'
 import type { VariantJSWithClassesListProps } from '@/utils/getVariantProps'
 import { getVariantPropsWithClassesList } from '@/utils/getVariantProps'
@@ -9,6 +9,11 @@ import { useFormEvents } from '@/composables/useFormEvents'
 import { useVariants } from '@/composables/useVariants'
 import nuxtLabsTheme from '@/theme/nuxtLabsTheme'
 
+defineOptions({
+  name: Components.UCheckbox,
+  inheritAttrs: false,
+})
+
 const props = defineProps({
   ...getVariantPropsWithClassesList<UCheckbox>(),
   value: {
@@ -96,13 +101,6 @@ const inputClass = computed(() => {
 })
 </script>
 
-<script lang="ts">
-export default defineComponent({
-  name: Components.UCheckbox,
-  inheritAttrs: false,
-})
-</script>
-
 <template>
   <div :class="variant.root">
     <div class="flex items-center h-5">
diff --git a/packages/nuxt-ui-vue/src/components/forms/FormGroup/UFormGroup.vue b/packages/nuxt-ui-vue/src/components/forms/FormGroup/UFormGroup.vue
index c8a191b..b01584d 100755
--- a/packages/nuxt-ui-vue/src/components/forms/FormGroup/UFormGroup.vue
+++ b/packages/nuxt-ui-vue/src/components/forms/FormGroup/UFormGroup.vue
@@ -1,8 +1,8 @@
 <script lang='ts'>
 import { computed, defineComponent, inject, provide } from 'vue'
 import type { Ref } from 'vue'
-import { omit } from 'lodash-es'
 import { twMerge } from 'tailwind-merge'
+import { omit } from '../../../utils/lodash'
 import type { VariantJSWithClassesListProps } from '@/utils/getVariantProps'
 import { getVariantPropsWithClassesList } from '@/utils/getVariantProps'
 import type { UFormGroup } from '@/Types/componentsTypes/components'
diff --git a/packages/nuxt-ui-vue/src/components/forms/Input/UInput.vue b/packages/nuxt-ui-vue/src/components/forms/Input/UInput.vue
index 932c538..63f7f9e 100755
--- a/packages/nuxt-ui-vue/src/components/forms/Input/UInput.vue
+++ b/packages/nuxt-ui-vue/src/components/forms/Input/UInput.vue
@@ -1,5 +1,5 @@
 <script setup lang='ts'>
-import { computed, defineComponent, onMounted, ref, useSlots } from 'vue'
+import { computed, onMounted, ref, useSlots } from 'vue'
 import classNames from 'classnames'
 import UIcon from '../../elements/Icon/UIcon.vue'
 import { useFormEvents } from '@/composables/useFormEvents'
@@ -10,6 +10,11 @@ import { Components } from '@/Types/enums/Components'
 import type { UInput } from '@/Types/componentsTypes/components'
 import nuxtLabsTheme from '@/theme/nuxtLabsTheme'
 
+defineOptions({
+  name: Components.UInput,
+  inheritAttrs: false,
+})
+
 const props = defineProps({
   ...getVariantPropsWithClassesList<UInput>(),
   modelValue: {
@@ -200,13 +205,6 @@ const trailingIconClass = computed(() => {
 })
 </script>
 
-<script lang="ts">
-export default defineComponent({
-  name: Components.UInput,
-  inheritAttrs: false,
-})
-</script>
-
 <template>
   <div :class="variant.root">
     <input
diff --git a/packages/nuxt-ui-vue/src/components/forms/Radio/URadio.vue b/packages/nuxt-ui-vue/src/components/forms/Radio/URadio.vue
index 7fd05cc..15dd8b4 100755
--- a/packages/nuxt-ui-vue/src/components/forms/Radio/URadio.vue
+++ b/packages/nuxt-ui-vue/src/components/forms/Radio/URadio.vue
@@ -1,5 +1,5 @@
 <script setup lang='ts'>
-import { computed, defineComponent } from 'vue'
+import { computed } from 'vue'
 import classNames from 'classnames'
 import type { URadio } from '@/Types/componentsTypes/components'
 import type { VariantJSWithClassesListProps } from '@/utils/getVariantProps'
@@ -9,6 +9,11 @@ import { useVariants } from '@/composables/useVariants'
 import nuxtLabsTheme from '@/theme/nuxtLabsTheme'
 import { useFormEvents } from '@/composables/useFormEvents'
 
+defineOptions({
+  name: Components.URadio,
+  inheritAttrs: false,
+})
+
 const props = defineProps({
   ...getVariantPropsWithClassesList<URadio>(),
   value: {
@@ -85,13 +90,6 @@ const inputClass = computed(() => {
 })
 </script>
 
-<script lang="ts">
-export default defineComponent({
-  name: Components.URadio,
-  inheritAttrs: false,
-})
-</script>
-
 <template>
   <div :class="variant.root">
     <div class="flex items-center h-5">
diff --git a/packages/nuxt-ui-vue/src/components/forms/Range/URange.vue b/packages/nuxt-ui-vue/src/components/forms/Range/URange.vue
index 4f7a02c..f4ce197 100755
--- a/packages/nuxt-ui-vue/src/components/forms/Range/URange.vue
+++ b/packages/nuxt-ui-vue/src/components/forms/Range/URange.vue
@@ -1,7 +1,7 @@
 <script setup lang='ts'>
-import { computed, defineComponent, useAttrs } from 'vue'
+import { computed, useAttrs } from 'vue'
 import classNames from 'classnames'
-import { omit } from 'lodash-es'
+import { omit } from '../../../utils/lodash'
 import type { VariantJSWithClassesListProps } from '@/utils/getVariantProps'
 import { getVariantPropsWithClassesList } from '@/utils/getVariantProps'
 import type { URange } from '@/Types/componentsTypes/components'
@@ -10,6 +10,11 @@ import { useFormEvents } from '@/composables/useFormEvents'
 import { useVariants } from '@/composables/useVariants'
 import nuxtLabsTheme from '@/theme/nuxtLabsTheme'
 
+defineOptions({
+  name: Components.URange,
+  inheritAttrs: false,
+})
+
 const props = defineProps({
   ...getVariantPropsWithClassesList<URange>(),
   modelValue: {
@@ -138,13 +143,6 @@ const attrs = useAttrs()
 const attrsOmitted = omit(attrs, ['class'])
 </script>
 
-<script lang="ts">
-export default defineComponent({
-  name: Components.URange,
-  inheritAttrs: false,
-})
-</script>
-
 <template>
   <div :class="wrapperClass">
     <input
diff --git a/packages/nuxt-ui-vue/src/components/forms/Select/USelect.vue b/packages/nuxt-ui-vue/src/components/forms/Select/USelect.vue
index 62a98ae..c69859f 100755
--- a/packages/nuxt-ui-vue/src/components/forms/Select/USelect.vue
+++ b/packages/nuxt-ui-vue/src/components/forms/Select/USelect.vue
@@ -1,8 +1,8 @@
 <script setup lang='ts'>
-import { computed, defineComponent, useAttrs, useSlots } from 'vue'
+import { computed, useAttrs, useSlots } from 'vue'
 import type { ComputedRef } from 'vue'
 import classNames from 'classnames'
-import { get, omit } from 'lodash-es'
+import { get, omit } from '../../../utils/lodash'
 import type { USelect } from '@/Types/componentsTypes/components'
 import { Components } from '@/Types/enums/Components'
 import { useFormEvents } from '@/composables/useFormEvents'
@@ -11,6 +11,11 @@ import { getVariantPropsWithClassesList } from '@/utils/getVariantProps'
 import { useVariants } from '@/composables/useVariants'
 import nuxtLabsTheme from '@/theme/nuxtLabsTheme'
 
+defineOptions({
+  name: Components.USelect,
+  inheritAttrs: false,
+})
+
 const props = defineProps({
   ...getVariantPropsWithClassesList<USelect>(),
   modelValue: {
@@ -250,13 +255,6 @@ const attrs = useAttrs()
 const attrsOmitted = omit(attrs, ['class'])
 </script>
 
-<script lang="ts">
-export default defineComponent({
-  name: Components.USelect,
-  inheritAttrs: false,
-})
-</script>
-
 <template>
   <div :class="variant.root">
     <!-- @vue-ignore -->
diff --git a/packages/nuxt-ui-vue/src/components/forms/SelectMenu/USelectMenu.vue b/packages/nuxt-ui-vue/src/components/forms/SelectMenu/USelectMenu.vue
index 68dc7d6..615e273 100755
--- a/packages/nuxt-ui-vue/src/components/forms/SelectMenu/USelectMenu.vue
+++ b/packages/nuxt-ui-vue/src/components/forms/SelectMenu/USelectMenu.vue
@@ -1,7 +1,5 @@
 <script lang="ts">
 import { computed, defineComponent, ref, watch } from 'vue'
-import type { ComponentPublicInstance, PropType } from 'vue'
-import { omit } from 'lodash-es'
 import {
   Combobox as HCombobox,
   ComboboxButton as HComboboxButton,
@@ -17,6 +15,7 @@ import {
 import { computedAsync, useDebounceFn } from '@vueuse/core'
 import classNames from 'classnames'
 import defu from 'defu'
+import { omit } from '../../../utils/lodash'
 import UIcon from '@/components/elements/Icon/UIcon.vue'
 import UAvatar from '@/components/elements/Avatar/UAvatar.vue'
 import type { PopperOptions } from '@/Types/components/popper'
diff --git a/packages/nuxt-ui-vue/src/components/forms/Textarea/UTextarea.vue b/packages/nuxt-ui-vue/src/components/forms/Textarea/UTextarea.vue
index d5796bc..ddcd5f5 100755
--- a/packages/nuxt-ui-vue/src/components/forms/Textarea/UTextarea.vue
+++ b/packages/nuxt-ui-vue/src/components/forms/Textarea/UTextarea.vue
@@ -1,7 +1,7 @@
 <script setup lang='ts'>
-import { computed, defineComponent, nextTick, onMounted, ref, useAttrs, watch } from 'vue'
+import { computed, nextTick, onMounted, ref, useAttrs, watch } from 'vue'
 import classNames from 'classnames'
-import { omit } from 'lodash-es'
+import { omit } from '../../../utils/lodash'
 import type { VariantJSWithClassesListProps } from '@/utils/getVariantProps'
 import { getVariantPropsWithClassesList } from '@/utils/getVariantProps'
 import { Components } from '@/Types/enums/Components'
@@ -10,6 +10,11 @@ import nuxtLabsTheme from '@/theme/nuxtLabsTheme'
 import { useVariants } from '@/composables/useVariants'
 import { useFormEvents } from '@/composables/useFormEvents'
 
+defineOptions({
+  name: Components.UTextarea,
+  inheritAttrs: false,
+})
+
 const props = defineProps({
   ...getVariantPropsWithClassesList<UTextarea>(),
   modelValue: {
@@ -163,13 +168,6 @@ const attrs = useAttrs()
 const attrsOmitted = omit(attrs, ['class'])
 </script>
 
-<script lang="ts">
-export default defineComponent({
-  name: Components.UTextarea,
-  inheritAttrs: false,
-})
-</script>
-
 <template>
   <div :class="variant.root">
     <!-- @vue-ignore -->
diff --git a/packages/nuxt-ui-vue/src/components/forms/Toggle/UToggle.vue b/packages/nuxt-ui-vue/src/components/forms/Toggle/UToggle.vue
index f7247f7..d8de10f 100755
--- a/packages/nuxt-ui-vue/src/components/forms/Toggle/UToggle.vue
+++ b/packages/nuxt-ui-vue/src/components/forms/Toggle/UToggle.vue
@@ -1,8 +1,8 @@
 <script setup lang='ts'>
-import { computed, defineComponent, useAttrs } from 'vue'
-import { omit } from 'lodash-es'
+import { computed, useAttrs } from 'vue'
 import classNames from 'classnames'
 import { Switch as HSwitch } from '@headlessui/vue'
+import { omit } from '../../../utils/lodash'
 import UIcon from '../../elements/Icon/UIcon.vue'
 import type { VariantJSWithClassesListProps } from '@/utils/getVariantProps'
 import { getVariantPropsWithClassesList } from '@/utils/getVariantProps'
@@ -12,6 +12,11 @@ import { useFormEvents } from '@/composables/useFormEvents'
 import { useVariants } from '@/composables/useVariants'
 import nuxtLabsTheme from '@/theme/nuxtLabsTheme'
 
+defineOptions({
+  name: Components.UToggle,
+  inheritAttrs: false,
+})
+
 const props = defineProps({
   ...getVariantPropsWithClassesList<UToggle>(),
   name: {
@@ -88,13 +93,6 @@ const attrs = useAttrs()
 const attrsOmitted = omit(attrs, ['class'])
 </script>
 
-<script lang="ts">
-export default defineComponent({
-  name: Components.UToggle,
-  inheritAttrs: false,
-})
-</script>
-
 <template>
   <HSwitch
     v-model="active"
diff --git a/packages/nuxt-ui-vue/src/components/layouts/Card/UCard.vue b/packages/nuxt-ui-vue/src/components/layouts/Card/UCard.vue
index 3181ed4..d973ab9 100755
--- a/packages/nuxt-ui-vue/src/components/layouts/Card/UCard.vue
+++ b/packages/nuxt-ui-vue/src/components/layouts/Card/UCard.vue
@@ -1,13 +1,18 @@
 <script setup lang='ts'>
-import { computed, defineComponent, useAttrs } from 'vue'
+import { computed, useAttrs } from 'vue'
 import { twJoin, twMerge } from 'tailwind-merge'
-import { omit } from 'lodash-es'
+import { omit } from '../../../utils/lodash'
 import type { VariantJSWithClassesListProps } from '@/utils/getVariantProps'
 import { getVariantPropsWithClassesList } from '@/utils/getVariantProps'
 import type { UCard } from '@/Types/componentsTypes/components'
 import { Components } from '@/Types/enums/Components'
 import { useVariants } from '@/composables/useVariants'
 
+defineOptions({
+  name: Components.UCard,
+  inheritAttrs: false,
+})
+
 const props = defineProps({
   ...getVariantPropsWithClassesList<UCard>(),
   as: {
@@ -43,13 +48,6 @@ const cardClass = computed(() => {
 const attrsOmitted = omit(attrs, ['class'])
 </script>
 
-<script lang="ts">
-export default defineComponent({
-  name: Components.UCard,
-  inheritAttrs: false,
-})
-</script>
-
 <template>
   <component
     :is="$attrs.onSubmit ? 'form' : as"
diff --git a/packages/nuxt-ui-vue/src/components/layouts/Container/UContainer.vue b/packages/nuxt-ui-vue/src/components/layouts/Container/UContainer.vue
index c38a7b8..033bc7c 100755
--- a/packages/nuxt-ui-vue/src/components/layouts/Container/UContainer.vue
+++ b/packages/nuxt-ui-vue/src/components/layouts/Container/UContainer.vue
@@ -1,15 +1,20 @@
 <script setup lang='ts'>
-import { computed, defineComponent, useAttrs } from 'vue'
-import { omit } from 'lodash-es'
+import { computed, useAttrs } from 'vue'
 import { twJoin, twMerge } from 'tailwind-merge'
+import { omit } from '../../../utils/lodash'
 import type { VariantJSWithClassesListProps } from '@/utils/getVariantProps'
 import { getVariantPropsWithClassesList } from '@/utils/getVariantProps'
 import type { UContainer } from '@/Types/componentsTypes/components'
 import { Components } from '@/Types/enums/Components'
 import { useVariants } from '@/composables/useVariants'
 
+defineOptions({
+  name: Components.UContainer,
+  inheritAttrs: false,
+})
+
 const props = defineProps({
-  ...getVariantPropsWithClassesList<UCard>(),
+  ...getVariantPropsWithClassesList<UContainer>(),
   as: {
     type: String,
     default: 'div',
@@ -40,13 +45,6 @@ const containerClass = computed(() => {
 })
 </script>
 
-<script lang="ts">
-export default defineComponent({
-  name: Components.UContainer,
-  inheritAttrs: false,
-})
-</script>
-
 <template>
   <component :is="as" :class="containerClass" v-bind="attrsOmitted">
     <slot />
diff --git a/packages/nuxt-ui-vue/src/components/layouts/Skeleton/USkeleton.vue b/packages/nuxt-ui-vue/src/components/layouts/Skeleton/USkeleton.vue
index fcb1756..b3a5d98 100755
--- a/packages/nuxt-ui-vue/src/components/layouts/Skeleton/USkeleton.vue
+++ b/packages/nuxt-ui-vue/src/components/layouts/Skeleton/USkeleton.vue
@@ -1,13 +1,18 @@
 <script setup lang='ts'>
-import { computed, defineComponent, useAttrs } from 'vue'
-import { omit } from 'lodash-es'
+import { computed, useAttrs } from 'vue'
 import { twJoin, twMerge } from 'tailwind-merge'
+import { omit } from '../../../utils/lodash'
 import type { VariantJSWithClassesListProps } from '@/utils/getVariantProps'
 import { getVariantPropsWithClassesList } from '@/utils/getVariantProps'
 import type { USkeleton } from '@/Types/componentsTypes/components'
 import { Components } from '@/Types/enums/Components'
 import { useVariants } from '@/composables/useVariants'
 
+defineOptions({
+  name: Components.USkeleton,
+  inheritAttrs: false,
+})
+
 const props = defineProps({
   ...getVariantPropsWithClassesList<USkeleton>(),
 })
@@ -36,13 +41,6 @@ const skeletonClass = computed(() => {
 })
 </script>
 
-<script lang="ts">
-export default defineComponent({
-  name: Components.USkeleton,
-  inheritAttrs: false,
-})
-</script>
-
 <template>
   <div :class="skeletonClass" v-bind="attrsOmitted" />
 </template>
diff --git a/packages/nuxt-ui-vue/src/components/navigation/Command-Palette/CommandPalette.vue b/packages/nuxt-ui-vue/src/components/navigation/Command-Palette/CommandPalette.vue
index 8b88fdf..fcf7ac0 100755
--- a/packages/nuxt-ui-vue/src/components/navigation/Command-Palette/CommandPalette.vue
+++ b/packages/nuxt-ui-vue/src/components/navigation/Command-Palette/CommandPalette.vue
@@ -1,3 +1,4 @@
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script lang='ts'>
 import { computed, defineComponent, onMounted, ref, watch } from 'vue'
 import type { ComponentPublicInstance, ComputedRef, PropType } from 'vue'
@@ -6,8 +7,8 @@ import { Combobox as HCombobox, ComboboxInput as HComboboxInput, ComboboxOptions
 import type { UseFuseOptions } from '@vueuse/integrations/useFuse'
 import { useFuse } from '@vueuse/integrations/useFuse'
 import { twJoin } from 'tailwind-merge'
-import { groupBy, map, omit } from 'lodash-es'
 import defu from 'defu'
+import { omit } from '../../../utils/lodash'
 import UIcon from '../../elements/Icon/UIcon.vue'
 import UButton from '../../elements/Button/UButton.vue'
 import CommandPaletteGroup from './CommandPaletteGroup.vue'
@@ -153,32 +154,46 @@ export default defineComponent({
       matchAllWhenSearchEmpty: true,
     }))
 
-    const commands = computed(() => props.groups.filter(group => !group.search).reduce((acc, group) => {
-      return acc.concat(group.commands.map(command => ({ ...command, group: group.key })))
-    }, [] as Command[]))
+    const commands = computed(() => {
+      const commands: Command[] = []
+      for (const group of props.groups) {
+        if (!group.search)
+          commands.push(...group.commands.map(command => ({ ...command, group: group.key })))
+      }
+      return commands
+    })
 
     const searchResults = ref<{ [key: string]: any }>({})
 
     const { results } = useFuse(query, commands, options)
 
-    const groups = computed(() => ([
-      ...map(groupBy(results.value, command => command.item.group), (results, key) => {
-        const commands = results.map((result) => {
+    const groups = computed(() => {
+      const groups: Group[] = []
+      const groupedCommands: Record<string, typeof results['value']> = {}
+      for (const command of results.value) {
+        // @ts-expect-error
+        groupedCommands[command.item.group] ||= []
+        // @ts-expect-error
+        groupedCommands[command.item.group].push(command)
+      }
+      for (const key in groupedCommands) {
+        const group = props.groups.find(group => group.key === key)
+        const commands = groupedCommands[key].slice(0, options.value.resultLimit).map((result) => {
           const { item, ...data } = result
-
           return {
             ...item,
             ...data,
-          }
+          } as Command
         })
-
-        return {
-          ...props.groups.find(group => group.key === key),
-          commands: commands.slice(0, options.value.resultLimit),
-        } as Group
-      }),
-      ...props.groups.filter(group => !!group.search).map(group => ({ ...group, commands: (searchResults.value[group.key] || []).slice(0, options.value.resultLimit) })).filter(group => group.commands.length),
-    ]))
+        // @ts-expect-error
+        groups.push({ ...group, commands })
+      }
+      for (const group of props.groups) {
+        if (group.search && searchResults.value[group.key]?.length)
+          groups.push({ ...group, commands: (searchResults.value[group.key] || []).slice(0, options.value.resultLimit) })
+      }
+      return groups
+    })
 
     const debouncedSearch = useDebounceFn(async () => {
       const searchableGroups = props.groups.filter(group => !!group.search)
diff --git a/packages/nuxt-ui-vue/src/components/navigation/Command-Palette/CommandPaletteGroup.vue b/packages/nuxt-ui-vue/src/components/navigation/Command-Palette/CommandPaletteGroup.vue
index 4df5966..f22f18f 100755
--- a/packages/nuxt-ui-vue/src/components/navigation/Command-Palette/CommandPaletteGroup.vue
+++ b/packages/nuxt-ui-vue/src/components/navigation/Command-Palette/CommandPaletteGroup.vue
@@ -1,5 +1,5 @@
 <script setup lang='ts'>
-import { computed, defineComponent } from 'vue'
+import { computed } from 'vue'
 import type { PropType } from 'vue'
 import { ComboboxOption as HComboboxOption } from '@headlessui/vue'
 import UIcon from '../../elements/Icon/UIcon.vue'
@@ -11,6 +11,10 @@ import { useVariants } from '@/composables/useVariants'
 import type { Group } from '@/Types/components/command-palette'
 import type { UCommandPalette } from '@/Types/componentsTypes/components'
 
+defineOptions({
+  name: Components.UCommandPaletteGroup,
+})
+
 const props = defineProps({
   group: {
     type: Object as PropType<Group>,
@@ -81,12 +85,6 @@ function highlight(text: string, { indices, value }: { indices: number[][]; valu
 }
 </script>
 
-<script lang="ts">
-export default defineComponent({
-  name: Components.UCommandPaletteGroup,
-})
-</script>
-
 <template>
   <div :class="variant.groupWrapper" role="option">
     <h2 v-if="label" :class="variant.groupLabel">
diff --git a/packages/nuxt-ui-vue/src/components/navigation/Pagination/UPagination.vue b/packages/nuxt-ui-vue/src/components/navigation/Pagination/UPagination.vue
index 1197c88..d586215 100755
--- a/packages/nuxt-ui-vue/src/components/navigation/Pagination/UPagination.vue
+++ b/packages/nuxt-ui-vue/src/components/navigation/Pagination/UPagination.vue
@@ -1,8 +1,8 @@
 <script setup lang='ts'>
-import { computed, defineComponent, useAttrs } from 'vue'
+import { computed, useAttrs } from 'vue'
 import type { PropType } from 'vue'
 import { twMerge } from 'tailwind-merge'
-import { omit } from 'lodash-es'
+import { omit } from '../../../utils/lodash'
 import UButton from '../../elements/Button/UButton.vue'
 import UButtonGroup from '@/components/elements/Button/UButtonGroup.vue'
 import type { VariantJSWithClassesListProps } from '@/utils/getVariantProps'
@@ -13,6 +13,11 @@ import { useVariants } from '@/composables/useVariants'
 import nuxtLabsTheme from '@/theme/nuxtLabsTheme'
 import type { Button } from '@/Types/components/button'
 
+defineOptions({
+  name: Components.UPagination,
+  inheritAttrs: false,
+})
+
 const props = defineProps({
   ...getVariantPropsWithClassesList<UPagination>(),
   modelValue: {
@@ -168,13 +173,6 @@ function onClickNext() {
 const attrsOmitted = omit(attrs, ['class'])
 </script>
 
-<script lang="ts">
-export default defineComponent({
-  name: Components.UPagination,
-  inheritAttrs: false,
-})
-</script>
-
 <template>
   <div :class="wrapperClass" v-bind="attrsOmitted">
     <UButtonGroup>
diff --git a/packages/nuxt-ui-vue/src/components/navigation/Tabs/UTabs.vue b/packages/nuxt-ui-vue/src/components/navigation/Tabs/UTabs.vue
index aca0449..f45513b 100755
--- a/packages/nuxt-ui-vue/src/components/navigation/Tabs/UTabs.vue
+++ b/packages/nuxt-ui-vue/src/components/navigation/Tabs/UTabs.vue
@@ -1,11 +1,11 @@
 <script setup lang='ts'>
-import { computed, defineComponent, onMounted, ref, useAttrs, watch } from 'vue'
+import { computed, onMounted, ref, useAttrs, watch } from 'vue'
 import type { PropType } from 'vue'
 import { Tab as HTab, TabGroup as HTabGroup, TabList as HTabList, TabPanel as HTabPanel, TabPanels as HTabPanels } from '@headlessui/vue'
 import { useResizeObserver } from '@vueuse/core'
-import { omit } from 'lodash-es'
 import { twMerge } from 'tailwind-merge'
 import classNames from 'classnames'
+import { omit } from '../../../utils/lodash'
 import type { VariantJSWithClassesListProps } from '@/utils/getVariantProps'
 import { getVariantPropsWithClassesList } from '@/utils/getVariantProps'
 import type { UTabs } from '@/Types/componentsTypes/components'
@@ -14,6 +14,11 @@ import { useVariants } from '@/composables/useVariants'
 import type { TabItem } from '@/Types/components/tabs'
 import nuxtLabsTheme from '@/theme/nuxtLabsTheme'
 
+defineOptions({
+  name: Components.UTabs,
+  inheritAttrs: false,
+})
+
 const props = defineProps({
   ...getVariantPropsWithClassesList<UTabs>(),
   modelValue: {
@@ -114,13 +119,6 @@ const tabGridClass = computed(() => {
 })
 </script>
 
-<script lang="ts">
-export default defineComponent({
-  name: Components.UTabs,
-  inheritAttrs: false,
-})
-</script>
-
 <template>
   <HTabGroup
     :vertical="orientation === 'vertical'" :selected-index="selectedIndex" as="div" :class="wrapperClass"
diff --git a/packages/nuxt-ui-vue/src/components/navigation/VerticalNavigation/UVerticalNavigation.vue b/packages/nuxt-ui-vue/src/components/navigation/VerticalNavigation/UVerticalNavigation.vue
index e7a87d6..7fd5438 100755
--- a/packages/nuxt-ui-vue/src/components/navigation/VerticalNavigation/UVerticalNavigation.vue
+++ b/packages/nuxt-ui-vue/src/components/navigation/VerticalNavigation/UVerticalNavigation.vue
@@ -1,8 +1,8 @@
 <script setup lang='ts'>
-import { computed, defineComponent, useAttrs } from 'vue'
+import { computed, useAttrs } from 'vue'
 import type { PropType } from 'vue'
-import { omit } from 'lodash-es'
 import { twMerge } from 'tailwind-merge'
+import { omit } from '../../../utils/lodash'
 import type { VariantJSWithClassesListProps } from '@/utils/getVariantProps'
 import { getVariantPropsWithClassesList } from '@/utils/getVariantProps'
 import type { UVerticalNavigation } from '@/Types/componentsTypes/components'
@@ -13,6 +13,11 @@ import ULink from '@/components/elements/Link/ULink.vue'
 import UIcon from '@/components/elements/Icon/UIcon.vue'
 import type { VerticalNavigationLink } from '@/Types/components/vertical-navigation'
 
+defineOptions({
+  name: Components.UVerticalNavigation,
+  inheritAttrs: false,
+})
+
 const props = defineProps({
   ...getVariantPropsWithClassesList<UVerticalNavigation>(),
   links: {
@@ -36,13 +41,6 @@ const variant = computed(() => {
 const wrapperClass = computed(() => twMerge(variant.value.root, attrs.class as string))
 </script>
 
-<script lang="ts">
-export default defineComponent({
-  name: Components.UVerticalNavigation,
-  inheritAttrs: false,
-})
-</script>
-
 <template>
   <nav :class="wrapperClass" v-bind="omit(attrs, ['class'])">
     <ULink
diff --git a/packages/nuxt-ui-vue/src/components/overlays/ContextMenu/UContextMenu.vue b/packages/nuxt-ui-vue/src/components/overlays/ContextMenu/UContextMenu.vue
index 3561a4f..84f13e2 100755
--- a/packages/nuxt-ui-vue/src/components/overlays/ContextMenu/UContextMenu.vue
+++ b/packages/nuxt-ui-vue/src/components/overlays/ContextMenu/UContextMenu.vue
@@ -1,11 +1,11 @@
 <script setup lang='ts'>
-import { computed, defineComponent, toRef, useAttrs } from 'vue'
+import { computed, toRef, useAttrs } from 'vue'
 import type { PropType, Ref } from 'vue'
 import { twJoin, twMerge } from 'tailwind-merge'
 import defu from 'defu'
 import { onClickOutside } from '@vueuse/core'
 import type { VirtualElement } from '@popperjs/core'
-import { omit } from 'lodash-es'
+import { omit } from '../../../utils/lodash'
 import type { VariantJSWithClassesListProps } from '@/utils/getVariantProps'
 import { getVariantPropsWithClassesList } from '@/utils/getVariantProps'
 import type { UContextMenu } from '@/Types/componentsTypes/components'
@@ -15,6 +15,11 @@ import { usePopper } from '@/composables/usePopper'
 import nuxtLabsTheme from '@/theme/nuxtLabsTheme'
 import type { PopperOptions } from '@/Types/components/popper'
 
+defineOptions({
+  name: Components.UContextMenu,
+  inheritAttrs: false,
+})
+
 const props = defineProps({
   ...getVariantPropsWithClassesList<UContextMenu>(),
   modelValue: {
@@ -84,13 +89,6 @@ const contextMenuTransitions = {
 }
 </script>
 
-<script lang="ts">
-export default defineComponent({
-  name: Components.UContextMenu,
-  inheritAttrs: false,
-})
-</script>
-
 <template>
   <div v-if="isOpen" ref="container" :class="wrapperClass" v-bind="attrsOmitted">
     <Transition appear v-bind="contextMenuTransitions">
diff --git a/packages/nuxt-ui-vue/src/components/overlays/Modal/UModal.vue b/packages/nuxt-ui-vue/src/components/overlays/Modal/UModal.vue
index 4b5c5ff..12cefd2 100755
--- a/packages/nuxt-ui-vue/src/components/overlays/Modal/UModal.vue
+++ b/packages/nuxt-ui-vue/src/components/overlays/Modal/UModal.vue
@@ -1,14 +1,19 @@
 <script setup lang='ts'>
-import { computed, defineComponent, useAttrs } from 'vue'
-import { omit } from 'lodash-es'
+import { computed, useAttrs } from 'vue'
 import { twMerge } from 'tailwind-merge'
 import { Dialog as HDialog, DialogPanel as HDialogPanel, TransitionChild, TransitionRoot } from '@headlessui/vue'
+import { omit } from '../../../utils/lodash'
 import type { VariantJSWithClassesListProps } from '@/utils/getVariantProps'
 import { getVariantPropsWithClassesList } from '@/utils/getVariantProps'
 import type { UModal } from '@/Types/componentsTypes/components'
 import { Components } from '@/Types/enums/Components'
 import { useVariants } from '@/composables/useVariants'
 
+defineOptions({
+  name: Components.UModal,
+  inheritAttrs: false,
+})
+
 const props = defineProps({
   ...getVariantPropsWithClassesList<UModal>(),
   modelValue: {
@@ -99,13 +104,6 @@ const transitionClass = computed(() => {
 })
 </script>
 
-<script lang="ts">
-export default defineComponent({
-  name: Components.UModal,
-  inheritAttrs: false,
-})
-</script>
-
 <template>
   <TransitionRoot :appear="appear" :show="isOpen" as="template">
     <HDialog :class="wrapperClass" v-bind="attrsOmitted" @close="(e) => !preventClose && close(e)">
diff --git a/packages/nuxt-ui-vue/src/components/overlays/Notification/UNotification.vue b/packages/nuxt-ui-vue/src/components/overlays/Notification/UNotification.vue
index 88c780c..c35cab9 100755
--- a/packages/nuxt-ui-vue/src/components/overlays/Notification/UNotification.vue
+++ b/packages/nuxt-ui-vue/src/components/overlays/Notification/UNotification.vue
@@ -1,8 +1,8 @@
 <script setup lang='ts'>
-import { computed, defineComponent, onMounted, onUnmounted, ref, useAttrs, watchEffect } from 'vue'
+import { computed, onMounted, onUnmounted, ref, useAttrs, watchEffect } from 'vue'
 import type { PropType } from 'vue'
-import { omit } from 'lodash-es'
 import { twJoin, twMerge } from 'tailwind-merge'
+import { omit } from '../../../utils/lodash'
 import UButton from '../../elements/Button/UButton.vue'
 import UAvatar from '../../elements/Avatar/UAvatar.vue'
 import UIcon from '../../elements/Icon/UIcon.vue'
@@ -17,6 +17,11 @@ import type { UNotification } from '@/Types/componentsTypes/components'
 import { useVariants } from '@/composables/useVariants'
 import nuxtLabsTheme from '@/theme/nuxtLabsTheme'
 
+defineOptions({
+  name: Components.UNotification,
+  inheritAttrs: false,
+})
+
 const props = defineProps({
   ...getVariantPropsWithClassesList<UNotification>(),
   id: {
@@ -168,13 +173,6 @@ const notificationTransitions = {
 }
 </script>
 
-<script lang="ts">
-export default defineComponent({
-  name: Components.UNotification,
-  inheritAttrs: false,
-})
-</script>
-
 <template>
   <!-- @vue-ignore -->
   <Transition appear v-bind="notificationTransitions">
diff --git a/packages/nuxt-ui-vue/src/components/overlays/Notification/UNotifications.vue b/packages/nuxt-ui-vue/src/components/overlays/Notification/UNotifications.vue
index eed5328..a68746a 100644
--- a/packages/nuxt-ui-vue/src/components/overlays/Notification/UNotifications.vue
+++ b/packages/nuxt-ui-vue/src/components/overlays/Notification/UNotifications.vue
@@ -1,9 +1,9 @@
 <!-- eslint-disable @typescript-eslint/ban-types -->
 <script setup lang="ts">
 import type { PropType } from 'vue'
-import { computed, defineComponent, useAttrs } from 'vue'
-import { omit } from 'lodash-es'
+import { computed, useAttrs } from 'vue'
 import classNames from 'classnames'
+import { omit } from '../../../utils/lodash'
 import UNotification from './UNotification.vue'
 import type { VariantJSWithClassesListProps } from '@/utils/getVariantProps'
 import { getVariantPropsWithClassesList } from '@/utils/getVariantProps'
@@ -16,6 +16,11 @@ import nuxtLabsTheme from '@/theme/nuxtLabsTheme'
 
 export type Position = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'
 
+defineOptions({
+  name: Components.UNotifications,
+  inheritAttrs: false,
+})
+
 const props = defineProps({
   ...getVariantPropsWithClassesList<UNotifications>(),
   position: {
@@ -50,13 +55,6 @@ const attrs = useAttrs()
 const attrsOmitted = omit(attrs, ['class'])
 </script>
 
-<script lang="ts">
-export default defineComponent({
-  name: Components.UNotifications,
-  inheritAttrs: false,
-})
-</script>
-
 <template>
   <div :class="wrapperClass" v-bind="attrsOmitted">
     <div v-if="notifications.length" :class="variant.container">
diff --git a/packages/nuxt-ui-vue/src/components/overlays/Popover/UPopover.vue b/packages/nuxt-ui-vue/src/components/overlays/Popover/UPopover.vue
index adccbbd..27fe3de 100755
--- a/packages/nuxt-ui-vue/src/components/overlays/Popover/UPopover.vue
+++ b/packages/nuxt-ui-vue/src/components/overlays/Popover/UPopover.vue
@@ -1,10 +1,10 @@
 <script setup lang='ts'>
-import { computed, defineComponent, onMounted, ref, useAttrs } from 'vue'
+import { computed, onMounted, ref, useAttrs } from 'vue'
 import type { PropType } from 'vue'
 import { twMerge } from 'tailwind-merge'
 import { Popover as HPopover, PopoverButton as HPopoverButton, PopoverPanel as HPopoverPanel } from '@headlessui/vue'
-import { omit } from 'lodash-es'
 import defu from 'defu'
+import { omit } from '../../../utils/lodash'
 import { getVariantPropsWithClassesList } from '@/utils/getVariantProps'
 import type { VariantJSWithClassesListProps } from '@/utils/getVariantProps'
 import type { UPopover } from '@/Types/componentsTypes/components'
@@ -14,6 +14,11 @@ import { useVariants } from '@/composables/useVariants'
 import { usePopper } from '@/composables/usePopper'
 import nuxtLabsTheme from '@/theme/nuxtLabsTheme'
 
+defineOptions({
+  name: Components.UPopover,
+  inheritAttrs: false,
+})
+
 const props = defineProps({
   ...getVariantPropsWithClassesList<UPopover>(),
   mode: {
@@ -131,13 +136,6 @@ const popoverTransitions = {
 }
 </script>
 
-<script lang="ts">
-export default defineComponent({
-  name: Components.UPopover,
-  inheritAttrs: false,
-})
-</script>
-
 <template>
   <HPopover ref="popover" v-slot="{ open, close }" :class="wrapperClass" v-bind="attrsOmitted" @mouseleave="onMouseLeave">
     <HPopoverButton
diff --git a/packages/nuxt-ui-vue/src/components/overlays/Slideover/USlideover.vue b/packages/nuxt-ui-vue/src/components/overlays/Slideover/USlideover.vue
index 2338d57..970bbc0 100755
--- a/packages/nuxt-ui-vue/src/components/overlays/Slideover/USlideover.vue
+++ b/packages/nuxt-ui-vue/src/components/overlays/Slideover/USlideover.vue
@@ -1,5 +1,5 @@
 <script setup lang='ts'>
-import { computed, defineComponent, useAttrs } from 'vue'
+import { computed, useAttrs } from 'vue'
 import type { PropType, WritableComputedRef } from 'vue'
 import { Dialog as HDialog, DialogPanel as HDialogPanel, TransitionChild, TransitionRoot } from '@headlessui/vue'
 import { twMerge } from 'tailwind-merge'
@@ -10,6 +10,11 @@ import type { USlideover } from '@/Types/componentsTypes/components'
 import { Components } from '@/Types/enums/Components'
 import { useVariants } from '@/composables/useVariants'
 
+defineOptions({
+  name: Components.USlideover,
+  inheritAttrs: false,
+})
+
 const props = defineProps({
   ...getVariantPropsWithClassesList<USlideover>(),
   modelValue: {
@@ -107,13 +112,6 @@ const dialogWrapperClass = computed(() => {
 })
 </script>
 
-<script lang="ts">
-export default defineComponent({
-  name: Components.USlideover,
-  inheritAttrs: false,
-})
-</script>
-
 <template>
   <TransitionRoot as="template" :appear="appear" :show="isOpen">
     <HDialog
diff --git a/packages/nuxt-ui-vue/src/components/overlays/Tooltip/UTooltip.vue b/packages/nuxt-ui-vue/src/components/overlays/Tooltip/UTooltip.vue
index 879b96b..0c30ba0 100755
--- a/packages/nuxt-ui-vue/src/components/overlays/Tooltip/UTooltip.vue
+++ b/packages/nuxt-ui-vue/src/components/overlays/Tooltip/UTooltip.vue
@@ -1,9 +1,9 @@
 <script setup lang='ts'>
-import { computed, defineComponent, ref, useAttrs } from 'vue'
+import { computed, ref, useAttrs } from 'vue'
 import type { PropType } from 'vue'
 import { twMerge } from 'tailwind-merge'
 import defu from 'defu'
-import { omit } from 'lodash-es'
+import { omit } from '../../../utils/lodash'
 import UKbd from '../../elements/Kbd/UKbd.vue'
 import type { VariantJSWithClassesListProps } from '@/utils/getVariantProps'
 import { getVariantPropsWithClassesList } from '@/utils/getVariantProps'
@@ -13,6 +13,11 @@ import { useVariants } from '@/composables/useVariants'
 import { usePopper } from '@/composables/usePopper'
 import type { PopperOptions } from '@/Types/components/popper'
 
+defineOptions({
+  name: Components.UTooltip,
+  inheritAttrs: false,
+})
+
 const props = defineProps({
   ...getVariantPropsWithClassesList<UTooltip>(),
   text: {
@@ -111,13 +116,6 @@ const toolTipTransitions = {
 }
 </script>
 
-<script lang="ts">
-export default defineComponent({
-  name: Components.UTooltip,
-  inheritAttrs: false,
-})
-</script>
-
 <template>
   <div ref="trigger" :class="wrapperClass" v-bind="attrsOmitted" @mouseover="onMouseOver" @mouseleave="onMouseLeave">
     <slot :open="open">
diff --git a/packages/nuxt-ui-vue/src/composables/usePopper.ts b/packages/nuxt-ui-vue/src/composables/usePopper.ts
index 60839e0..1672403 100755
--- a/packages/nuxt-ui-vue/src/composables/usePopper.ts
+++ b/packages/nuxt-ui-vue/src/composables/usePopper.ts
@@ -3,7 +3,6 @@ import type { Ref } from 'vue'
 import type { VirtualElement } from '@popperjs/core/lib/popper-lite'
 import { defaultModifiers, popperGenerator } from '@popperjs/core/lib/popper-lite'
 import type { Instance } from '@popperjs/core'
-import { isUndefined, omitBy } from 'lodash-es'
 import flip from '@popperjs/core/lib/modifiers/flip'
 import offset from '@popperjs/core/lib/modifiers/offset'
 import preventOverflow from '@popperjs/core/lib/modifiers/preventOverflow'
@@ -49,36 +48,48 @@ export function usePopper({
       if (!referenceEl)
         return
 
-      instance.value = createPopper(referenceEl, popperEl, omitBy({
-        placement,
-        strategy,
-        modifiers: [{
-          name: 'flip',
-          enabled: !locked,
-        }, {
-          name: 'preventOverflow',
-          options: {
-            padding: overflowPadding,
+      const config: Record<string, any> = {
+        modifiers: [
+          {
+            name: 'flip',
+            enabled: !locked,
           },
-        }, {
-          name: 'offset',
-          options: {
-            offset: [offsetSkid, offsetDistance],
+          {
+            name: 'preventOverflow',
+            options: {
+              padding: overflowPadding,
+            },
           },
-        }, {
-          name: 'computeStyles',
-          options: {
-            adaptive,
-            gpuAcceleration,
+          {
+            name: 'offset',
+            options: {
+              offset: [offsetSkid, offsetDistance],
+            },
           },
-        }, {
-          name: 'eventListeners',
-          options: {
-            scroll,
-            resize,
+          {
+            name: 'computeStyles',
+            options: {
+              adaptive,
+              gpuAcceleration,
+            },
           },
-        }],
-      }, isUndefined))
+          {
+            name: 'eventListeners',
+            options: {
+              scroll,
+              resize,
+            },
+          },
+        ],
+      }
+
+      if (placement)
+        config.placement = placement
+
+      if (strategy)
+        config.strategy = strategy
+
+      instance.value = createPopper(referenceEl, popperEl, config)
 
       onInvalidate(instance.value.destroy)
     })
diff --git a/packages/nuxt-ui-vue/src/lodash-es.d.ts b/packages/nuxt-ui-vue/src/lodash-es.d.ts
deleted file mode 100755
index cb17e81..0000000
--- a/packages/nuxt-ui-vue/src/lodash-es.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-declare module "lodash-es"
\ No newline at end of file
diff --git a/packages/nuxt-ui-vue/src/plugin.ts b/packages/nuxt-ui-vue/src/plugin.ts
index 3b25b1b..caa9dd0 100755
--- a/packages/nuxt-ui-vue/src/plugin.ts
+++ b/packages/nuxt-ui-vue/src/plugin.ts
@@ -24,8 +24,7 @@ function create(createOptions: NuxtLabsUIOptions = {}) {
     if (options.registerComponents) {
       if (options.components) {
         options.components.forEach((component: any) => {
-          const name = component.name?.startsWith('U') ? component.name.slice(1) : component.name
-
+          const name = component._name?.startsWith('U') ? component.name.slice(1) : component.name
           app.component(`${options.prefix}${name}`, component)
         })
       }
diff --git a/packages/nuxt-ui-vue/src/utils/lodash.ts b/packages/nuxt-ui-vue/src/utils/lodash.ts
new file mode 100644
index 0000000..d0a0a2a
--- /dev/null
+++ b/packages/nuxt-ui-vue/src/utils/lodash.ts
@@ -0,0 +1,31 @@
+export function omit<T extends Record<string, any>, K extends keyof T>(
+  object: T,
+  keysToOmit: K[] | any[],
+): Pick<T, Exclude<keyof T, K>> {
+  const result = { ...object }
+
+  for (const key of keysToOmit)
+    delete result[key]
+
+  return result
+}
+
+export function get(object: Record<string, any>, path: (string | number)[] | string, defaultValue?: any): any {
+  if (typeof path === 'string') {
+    path = path.split('.').map((key) => {
+      const numKey = Number(key)
+      return Number.isNaN(numKey) ? key : numKey
+    })
+  }
+
+  let result: any = object
+
+  for (const key of path) {
+    if (result === undefined || result === null)
+      return defaultValue
+
+    result = result[key]
+  }
+
+  return result !== undefined ? result : defaultValue
+}