@nuxt/ui 3.1.1 → 3.1.2

package/dist/runtime/components/Tree.vue

@@ -61,7 +61,7 @@ const defaultExpanded = computed(
     <li
       v-for="(item, index) in items"
       :key="`${level}-${index}`"
-      :class="level > 0 ? ui.itemWithChildren({ class: props.ui?.itemWithChildren }) : ui.item({ class: props.ui?.item })"
+      :class="level > 0 ? ui.itemWithChildren({ class: [props.ui?.itemWithChildren, item.ui?.itemWithChildren] }) : ui.item({ class: [props.ui?.item, item.ui?.item] })"
     >
       <TreeItem
         v-slot="{ isExpanded, isSelected }"
@@ -71,37 +71,37 @@ const defaultExpanded = computed(
         @toggle="item.onToggle"
         @select="item.onSelect"
       >
-        <button :disabled="item.disabled || disabled" :class="ui.link({ class: props.ui?.link, selected: isSelected, disabled: item.disabled || disabled })">
+        <button :disabled="item.disabled || disabled" :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], selected: isSelected, disabled: item.disabled || disabled })">
           <slot :name="item.slot || 'item'" v-bind="{ index, level, expanded: isExpanded, selected: isSelected }" :item="item">
             <slot :name="item.slot ? `${item.slot}-leading` : 'item-leading'" v-bind="{ index, level, expanded: isExpanded, selected: isSelected }" :item="item">
               <UIcon
                 v-if="item.icon"
                 :name="item.icon"
-                :class="ui.linkLeadingIcon({ class: props.ui?.linkLeadingIcon })"
+                :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, item.ui?.linkLeadingIcon] })"
               />
               <UIcon
                 v-else-if="item.children?.length"
                 :name="isExpanded ? expandedIcon ?? appConfig.ui.icons.folderOpen : collapsedIcon ?? appConfig.ui.icons.folder"
-                :class="ui.linkLeadingIcon({ class: props.ui?.linkLeadingIcon })"
+                :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, item.ui?.linkLeadingIcon] })"
               />
             </slot>
 
-            <span v-if="getItemLabel(item) || !!slots[item.slot ? `${item.slot}-label` : 'item-label']" :class="ui.linkLabel({ class: props.ui?.linkLabel })">
+            <span v-if="getItemLabel(item) || !!slots[item.slot ? `${item.slot}-label` : 'item-label']" :class="ui.linkLabel({ class: [props.ui?.linkLabel, item.ui?.linkLabel] })">
               <slot :name="item.slot ? `${item.slot}-label` : 'item-label'" v-bind="{ item, index, level, expanded: isExpanded, selected: isSelected }" :item="item">
                 {{ getItemLabel(item) }}
               </slot>
             </span>
 
-            <span v-if="item.trailingIcon || item.children?.length || !!slots[item.slot ? `${item.slot}-trailing` : 'item-trailing']" :class="ui.linkTrailing({ class: props.ui?.linkTrailing })">
+            <span v-if="item.trailingIcon || item.children?.length || !!slots[item.slot ? `${item.slot}-trailing` : 'item-trailing']" :class="ui.linkTrailing({ class: [props.ui?.linkTrailing, item.ui?.linkTrailing] })">
               <slot :name="item.slot ? `${item.slot}-trailing` : 'item-trailing'" v-bind="{ item, index, level, expanded: isExpanded, selected: isSelected }" :item="item">
-                <UIcon v-if="item.trailingIcon" :name="item.trailingIcon" :class="ui.linkTrailingIcon({ class: props.ui?.linkTrailingIcon })" />
-                <UIcon v-else-if="item.children?.length" :name="trailingIcon ?? appConfig.ui.icons.chevronDown" :class="ui.linkTrailingIcon({ class: props.ui?.linkTrailingIcon })" />
+                <UIcon v-if="item.trailingIcon" :name="item.trailingIcon" :class="ui.linkTrailingIcon({ class: [props.ui?.linkTrailingIcon, item.ui?.linkTrailingIcon] })" />
+                <UIcon v-else-if="item.children?.length" :name="trailingIcon ?? appConfig.ui.icons.chevronDown" :class="ui.linkTrailingIcon({ class: [props.ui?.linkTrailingIcon, item.ui?.linkTrailingIcon] })" />
               </slot>
             </span>
           </slot>
         </button>
 
-        <ul v-if="item.children?.length && isExpanded" :class="ui.listWithChildren({ class: props.ui?.listWithChildren })">
+        <ul v-if="item.children?.length && isExpanded" :class="ui.listWithChildren({ class: [props.ui?.listWithChildren, item.ui?.listWithChildren] })">
           <ReuseTreeTemplate :items="item.children" :level="level + 1" />
         </ul>
       </TreeItem>
@@ -110,7 +110,7 @@ const defaultExpanded = computed(
 
   <TreeRoot
     v-bind="rootProps"
-    :class="ui.root({ class: [props.class, props.ui?.root] })"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
     :get-key="getItemValue"
     :default-expanded="defaultExpanded"
     :selection-behavior="selectionBehavior"

package/dist/runtime/components/Tree.vue.d.ts

@@ -20,6 +20,8 @@ export type TreeItem = {
     children?: TreeItem[];
     onToggle?(e: Event): void;
     onSelect?(e?: Event): void;
+    class?: any;
+    ui?: Pick<Tree['slots'], 'item' | 'itemWithChildren' | 'link' | 'linkLeadingIcon' | 'linkLabel' | 'linkTrailing' | 'linkTrailingIcon' | 'listWithChildren'>;
     [key: string]: any;
 };
 export interface TreeProps<T extends TreeItem[] = TreeItem[], VK extends GetItemKeys<T> = 'value', M extends boolean = false> extends Pick<TreeRootProps<T>, 'expanded' | 'defaultExpanded' | 'selectionBehavior' | 'propagateSelect' | 'disabled'> {

package/dist/runtime/composables/useFormField.d.ts

@@ -13,7 +13,7 @@ type Props<T> = {
 };
 export declare const formOptionsInjectionKey: InjectionKey<ComputedRef<FormInjectedOptions>>;
 export declare const formBusInjectionKey: InjectionKey<UseEventBusReturn<FormEvent<any>, string>>;
-export declare const formFieldInjectionKey: InjectionKey<ComputedRef<FormFieldInjectedOptions<FormFieldProps>>>;
+export declare const formFieldInjectionKey: InjectionKey<ComputedRef<FormFieldInjectedOptions<FormFieldProps>> | undefined>;
 export declare const inputIdInjectionKey: InjectionKey<Ref<string | undefined>>;
 export declare const formInputsInjectionKey: InjectionKey<Ref<Record<string, {
     id?: string;

package/dist/runtime/composables/useFormField.js

@@ -1,4 +1,4 @@
-import { inject, computed } from "vue";
+import { inject, computed, provide } from "vue";
 import { useDebounceFn } from "@vueuse/core";
 export const formOptionsInjectionKey = Symbol("nuxt-ui.form-options");
 export const formBusInjectionKey = Symbol("nuxt-ui.form-events");
@@ -12,6 +12,7 @@ export function useFormField(props, opts) {
   const formField = inject(formFieldInjectionKey, void 0);
   const formInputs = inject(formInputsInjectionKey, void 0);
   const inputId = inject(inputIdInjectionKey, void 0);
+  provide(formFieldInjectionKey, void 0);
   if (formField && inputId) {
     if (opts?.bind === false) {
       inputId.value = void 0;

package/dist/runtime/inertia/components/Link.vue

@@ -7,10 +7,11 @@ import { computed } from "vue";
 import { defu } from "defu";
 import { useForwardProps } from "reka-ui";
 import { reactiveOmit } from "@vueuse/core";
-import { usePage, Link as InertiaLink } from "@inertiajs/vue3";
+import { usePage } from "@inertiajs/vue3";
 import { hasProtocol } from "ufo";
 import { useAppConfig } from "#imports";
 import { tv } from "../../utils/tv";
+import ULinkBase from "../../components/LinkBase.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
   as: { type: null, required: false, default: "button" },
@@ -31,7 +32,6 @@ const props = defineProps({
   data: { type: Object, required: false },
   method: { type: String, required: false },
   headers: { type: Object, required: false },
-  onClick: { type: Function, required: false },
   preserveScroll: { type: [Boolean, String, Function], required: false },
   preserveState: { type: [Boolean, String, Function], required: false },
   replace: { type: Boolean, required: false },
@@ -51,8 +51,9 @@ const props = defineProps({
   cacheFor: { type: [Number, String, Array], required: false }
 });
 defineSlots();
+const page = usePage();
 const appConfig = useAppConfig();
-const routerLinkProps = useForwardProps(reactiveOmit(props, "as", "type", "disabled", "active", "exact", "activeClass", "inactiveClass", "to", "raw", "class"));
+const routerLinkProps = useForwardProps(reactiveOmit(props, "as", "type", "disabled", "active", "exact", "activeClass", "inactiveClass", "to", "href", "raw", "custom", "class"));
 const ui = computed(() => tv({
   extend: tv(theme),
   ...defu({
@@ -64,83 +65,68 @@ const ui = computed(() => tv({
     }
   }, appConfig.ui?.link || {})
 }));
+const href = computed(() => props.to ?? props.href);
 const isExternal = computed(() => {
-  if (!props.to) return false;
-  return typeof props.to === "string" && hasProtocol(props.to, { acceptRelative: true });
+  if (props.external) {
+    return true;
+  }
+  if (!href.value) {
+    return false;
+  }
+  return typeof href.value === "string" && hasProtocol(href.value, { acceptRelative: true });
+});
+const isLinkActive = computed(() => {
+  if (props.active !== void 0) {
+    return props.active;
+  }
+  if (!href.value) {
+    return false;
+  }
+  if (props.exact && page.url === href.value) {
+    return true;
+  }
+  if (!props.exact && page.url.startsWith(href.value)) {
+    return true;
+  }
+  return false;
 });
 const linkClass = computed(() => {
-  const active = isActive.value;
+  const active = isLinkActive.value;
   if (props.raw) {
     return [props.class, active ? props.activeClass : props.inactiveClass];
   }
   return ui.value({ class: props.class, active, disabled: props.disabled });
 });
-const page = usePage();
-const url = computed(() => props.to ?? props.href ?? "#");
-const isActive = computed(() => props.active || (props.exact ? url.value === props.href : page?.url.startsWith(url.value)));
 </script>
 
 <template>
-  <template v-if="!isExternal">
-    <InertiaLink v-bind="routerLinkProps" :href="url" custom>
-      <template v-if="custom">
-        <slot
-          v-bind="{
-  ...$attrs,
-  as,
-  type,
-  disabled,
-  href: url,
-  active: isActive
-}"
-        />
-      </template>
-      <ULinkBase
-        v-else
-        v-bind="{
+  <template v-if="custom">
+    <slot
+      v-bind="{
   ...$attrs,
+  ...routerLinkProps,
   as,
   type,
   disabled,
-  href: url,
-  active: isActive
+  href,
+  active: isLinkActive,
+  isExternal
 }"
-        :class="linkClass"
-      >
-        <slot :active="isActive" />
-      </ULinkBase>
-    </InertiaLink>
+    />
   </template>
-
-  <template v-else>
-    <template v-if="custom">
-      <slot
-        v-bind="{
+  <ULinkBase
+    v-else
+    v-bind="{
   ...$attrs,
+  ...routerLinkProps,
   as,
   type,
   disabled,
-  href: to,
-  target: isExternal ? '_blank' : void 0,
-  active: isActive
+  href,
+  isExternal
 }"
-      />
-    </template>
-    <ULinkBase
-      v-else
-      v-bind="{
-  ...$attrs,
-  as,
-  type,
-  disabled,
-  href: url,
-  target: isExternal ? '_blank' : void 0,
-  active: isActive
-}"
-      :is-external="isExternal"
-      :class="linkClass"
-    >
-      <slot :active="isActive" />
-    </ULinkBase>
-  </template>
+    :class="linkClass"
+  >
+    <slot :active="isLinkActive" />
+  </ULinkBase>
 </template>

package/dist/runtime/inertia/components/Link.vue.d.ts

@@ -1,6 +1,6 @@
 import type { ButtonHTMLAttributes } from 'vue';
 import type { InertiaLinkProps } from '@inertiajs/vue3';
-interface NuxtLinkProps extends Omit<InertiaLinkProps, 'href'> {
+interface NuxtLinkProps extends Omit<InertiaLinkProps, 'href' | 'onClick'> {
     activeClass?: string;
     /**
      * Route Location the link should navigate to when clicked on.

package/dist/runtime/inertia/components/LinkBase.vue

@@ -0,0 +1,68 @@
+<script>
+
+</script>
+
+<script setup>
+import { Primitive } from "reka-ui";
+import { Link as InertiaLink } from "@inertiajs/vue3";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  as: { type: String, required: false, default: "button" },
+  type: { type: String, required: false, default: "button" },
+  disabled: { type: Boolean, required: false },
+  onClick: { type: [Function, Array], required: false },
+  href: { type: String, required: false },
+  target: { type: [String, Object, null], required: false },
+  active: { type: Boolean, required: false },
+  isExternal: { type: Boolean, required: false }
+});
+function onClickWrapper(e) {
+  if (props.disabled) {
+    e.stopPropagation();
+    e.preventDefault();
+    return;
+  }
+  if (props.onClick) {
+    for (const onClick of Array.isArray(props.onClick) ? props.onClick : [props.onClick]) {
+      onClick(e);
+    }
+  }
+}
+</script>
+
+<template>
+  <InertiaLink
+    v-if="!!href && !isExternal && !disabled"
+    :href="href"
+    v-bind="{
+  target: target || (isExternal ? '_blank' : void 0),
+  ...$attrs
+}"
+    @click="onClickWrapper"
+  >
+    <slot />
+  </InertiaLink>
+  <Primitive
+    v-else
+    v-bind="href ? {
+  'as': 'a',
+  'href': disabled ? void 0 : href,
+  'aria-disabled': disabled ? 'true' : void 0,
+  'role': disabled ? 'link' : void 0,
+  'tabindex': disabled ? -1 : void 0,
+  'target': target || (isExternal ? '_blank' : void 0),
+  ...$attrs
+} : as === 'button' ? {
+  as,
+  type,
+  disabled,
+  ...$attrs
+} : {
+  as,
+  ...$attrs
+}"
+    @click="onClickWrapper"
+  >
+    <slot />
+  </Primitive>
+</template>

package/dist/runtime/inertia/components/LinkBase.vue.d.ts

@@ -0,0 +1,25 @@
+import type { LinkProps } from '../../types';
+export interface LinkBaseProps {
+    as?: string;
+    type?: string;
+    disabled?: boolean;
+    onClick?: ((e: MouseEvent) => void | Promise<void>) | Array<((e: MouseEvent) => void | Promise<void>)>;
+    href?: string;
+    target?: LinkProps['target'];
+    active?: boolean;
+    isExternal?: boolean;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<LinkBaseProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LinkBaseProps> & Readonly<{}>, {
+    type: string;
+    as: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+} & {
+    default?: (props: {}) => any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/inertia/stubs.d.ts

@@ -1,6 +1,7 @@
 import type { Ref } from 'vue';
 import type { NuxtApp } from '#app';
 export { useHead } from '@unhead/vue';
+export { useAppConfig } from '../vue/composables/useAppConfig';
 export { defineShortcuts } from '../composables/defineShortcuts';
 export { defineLocale } from '../composables/defineLocale';
 export { useLocale } from '../composables/useLocale';
@@ -17,7 +18,6 @@ export declare const useColorMode: () => {
     readonly value: import("@vueuse/core").BasicColorMode;
     forced: boolean;
 };
-export declare const useAppConfig: () => any;
 export declare const useCookie: <T = string>(_name: string, _options?: Record<string, any>) => {
     value: Ref<T, T>;
     get: () => T;

package/dist/runtime/inertia/stubs.js

@@ -4,6 +4,7 @@ import appConfig from "#build/app.config";
 import { useColorMode as useColorModeVueUse } from "@vueuse/core";
 import { usePage } from "@inertiajs/vue3";
 export { useHead } from "@unhead/vue";
+export { useAppConfig } from "../vue/composables/useAppConfig.js";
 export { defineShortcuts } from "../composables/defineShortcuts.js";
 export { defineLocale } from "../composables/defineLocale.js";
 export { useLocale } from "../composables/useLocale.js";
@@ -35,7 +36,6 @@ export const useColorMode = () => {
     forced: false
   };
 };
-export const useAppConfig = () => appConfig;
 export const useCookie = (_name, _options = {}) => {
   const value = ref(null);
   return {

package/dist/runtime/locale/index.d.ts

@@ -32,6 +32,7 @@ export { default as pt_br } from './pt_br';
 export { default as ro } from './ro';
 export { default as ru } from './ru';
 export { default as sk } from './sk';
+export { default as sl } from './sl';
 export { default as sv } from './sv';
 export { default as th } from './th';
 export { default as tj } from './tj';

package/dist/runtime/locale/index.js

@@ -32,6 +32,7 @@ export { default as pt_br } from "./pt_br.js";
 export { default as ro } from "./ro.js";
 export { default as ru } from "./ru.js";
 export { default as sk } from "./sk.js";
+export { default as sl } from "./sl.js";
 export { default as sv } from "./sv.js";
 export { default as th } from "./th.js";
 export { default as tj } from "./tj.js";

package/dist/runtime/locale/sl.d.ts

@@ -0,0 +1,3 @@
+import type { Messages } from '../types';
+declare const _default: import("../types").Locale<Messages>;
+export default _default;

package/dist/runtime/locale/sl.js

@@ -0,0 +1,54 @@
+import { defineLocale } from "../composables/defineLocale.js";
+export default defineLocale({
+  name: "Sloven\u0161\u010Dina",
+  code: "sl",
+  messages: {
+    inputMenu: {
+      noMatch: "Ni ujemanj",
+      noData: "Ni podatkov",
+      create: 'Ustvari "{label}"'
+    },
+    calendar: {
+      prevYear: "Prej\u0161nje leto",
+      nextYear: "Naslednje leto",
+      prevMonth: "Prej\u0161nji mesec",
+      nextMonth: "Naslednji mesec"
+    },
+    inputNumber: {
+      increment: "Povi\u0161aj",
+      decrement: "Zmanj\u0161aj"
+    },
+    commandPalette: {
+      placeholder: "Vpi\u0161i ukaz ali i\u0161\u010Di...",
+      noMatch: "Ni ujemanj",
+      noData: "Ni podatkov",
+      close: "Zapri"
+    },
+    selectMenu: {
+      noMatch: "Ni ujemanj",
+      noData: "Ni podatkov",
+      create: 'Ustvari "{label}"',
+      search: "I\u0161\u010Di..."
+    },
+    toast: {
+      close: "Zapri"
+    },
+    carousel: {
+      prev: "Nazaj",
+      next: "Naprej",
+      goto: "Pojdi na {slide}"
+    },
+    modal: {
+      close: "Zapri"
+    },
+    slideover: {
+      close: "Zapri"
+    },
+    alert: {
+      close: "Zapri"
+    },
+    table: {
+      noData: "Ni podatkov"
+    }
+  }
+});

package/dist/runtime/utils/link.d.ts

@@ -4,3 +4,4 @@ export declare function pickLinkProps(link: LinkProps & {
 }): import("@vueuse/shared").ReactivePickReturn<LinkProps & {
     [key: string]: any;
 }, string>;
+export declare function isPartiallyEqual(item1: any, item2: any): boolean;

package/dist/runtime/utils/link.js

@@ -1,4 +1,5 @@
 import { reactivePick } from "@vueuse/core";
+import { isEqual, diff } from "ohash/utils";
 export function pickLinkProps(link) {
   const keys = Object.keys(link);
   const ariaKeys = keys.filter((key) => key.startsWith("aria-"));
@@ -33,3 +34,14 @@ export function pickLinkProps(link) {
   ];
   return reactivePick(link, ...propsToInclude);
 }
+export function isPartiallyEqual(item1, item2) {
+  const diffedKeys = diff(item1, item2).reduce((filtered, q) => {
+    if (q.type === "added") {
+      filtered.add(q.key);
+    }
+    return filtered;
+  }, /* @__PURE__ */ new Set());
+  const item1Filtered = Object.fromEntries(Object.entries(item1).filter(([key]) => !diffedKeys.has(key)));
+  const item2Filtered = Object.fromEntries(Object.entries(item2).filter(([key]) => !diffedKeys.has(key)));
+  return isEqual(item1Filtered, item2Filtered);
+}

package/dist/runtime/vue/components/Link.vue

@@ -3,15 +3,17 @@ import theme from "#build/ui/link";
 </script>
 
 <script setup>
-import { computed, getCurrentInstance } from "vue";
+import { computed } from "vue";
 import { defu } from "defu";
-import { isEqual, diff } from "ohash/utils";
+import { isEqual } from "ohash/utils";
 import { useForwardProps } from "reka-ui";
 import { reactiveOmit } from "@vueuse/core";
 import { hasProtocol } from "ufo";
 import { useRoute, RouterLink } from "vue-router";
 import { useAppConfig } from "#imports";
 import { tv } from "../../utils/tv";
+import { isPartiallyEqual } from "../../utils/link";
+import ULinkBase from "../../components/LinkBase.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
   as: { type: null, required: false, default: "button" },
@@ -42,20 +44,9 @@ const props = defineProps({
   replace: { type: Boolean, required: false }
 });
 defineSlots();
-const hasRouter = computed(() => {
-  const app = getCurrentInstance()?.appContext.app;
-  return !!app?.config?.globalProperties?.$router;
-});
-const route = computed(() => {
-  if (!hasRouter.value) return null;
-  try {
-    return useRoute();
-  } catch {
-    return null;
-  }
-});
+const route = useRoute();
 const appConfig = useAppConfig();
-const routerLinkProps = useForwardProps(reactiveOmit(props, "as", "type", "disabled", "active", "exact", "exactQuery", "exactHash", "activeClass", "inactiveClass", "to", "raw", "class"));
+const routerLinkProps = useForwardProps(reactiveOmit(props, "as", "type", "disabled", "active", "exact", "exactQuery", "exactHash", "activeClass", "inactiveClass", "to", "href", "raw", "custom", "class"));
 const ui = computed(() => tv({
   extend: tv(theme),
   ...defu({
@@ -67,34 +58,29 @@ const ui = computed(() => tv({
     }
   }, appConfig.ui?.link || {})
 }));
-function isPartiallyEqual(item1, item2) {
-  const diffedKeys = diff(item1, item2).reduce((filtered, q) => {
-    if (q.type === "added") {
-      filtered.add(q.key);
-    }
-    return filtered;
-  }, /* @__PURE__ */ new Set());
-  const item1Filtered = Object.fromEntries(Object.entries(item1).filter(([key]) => !diffedKeys.has(key)));
-  const item2Filtered = Object.fromEntries(Object.entries(item2).filter(([key]) => !diffedKeys.has(key)));
-  return isEqual(item1Filtered, item2Filtered);
-}
+const to = computed(() => props.to ?? props.href);
 const isExternal = computed(() => {
-  if (!props.to) return false;
-  return typeof props.to === "string" && hasProtocol(props.to, { acceptRelative: true });
+  if (props.external) {
+    return true;
+  }
+  if (!to.value) {
+    return false;
+  }
+  return typeof to.value === "string" && hasProtocol(to.value, { acceptRelative: true });
 });
 function isLinkActive({ route: linkRoute, isActive, isExactActive }) {
   if (props.active !== void 0) {
     return props.active;
   }
-  if (!props.to || !route.value) {
+  if (!to.value) {
     return false;
   }
   if (props.exactQuery === "partial") {
-    if (!isPartiallyEqual(linkRoute.query, route.value.query)) return false;
+    if (!isPartiallyEqual(linkRoute.query, route.query)) return false;
   } else if (props.exactQuery === true) {
-    if (!isEqual(linkRoute.query, route.value.query)) return false;
+    if (!isEqual(linkRoute.query, route.query)) return false;
   }
-  if (props.exactHash && linkRoute.hash !== route.value.hash) {
+  if (props.exactHash && linkRoute.hash !== route.hash) {
     return false;
   }
   if (props.exact && isExactActive) {
@@ -115,8 +101,8 @@ function resolveLinkClass({ route: route2, isActive, isExactActive } = {}) {
 </script>
 
 <template>
-  <template v-if="hasRouter && !isExternal">
-    <RouterLink v-slot="{ href, navigate, route: linkRoute, isActive, isExactActive }" v-bind="routerLinkProps" :to="to || '#'" custom>
+  <template v-if="!isExternal && !!to">
+    <RouterLink v-slot="{ href, navigate, route: linkRoute, isActive, isExactActive }" v-bind="routerLinkProps" :to="to" custom>
       <template v-if="custom">
         <slot
           v-bind="{
@@ -125,7 +111,7 @@ function resolveLinkClass({ route: route2, isActive, isExactActive } = {}) {
   as,
   type,
   disabled,
-  href: to ? href : void 0,
+  href,
   navigate,
   active: isLinkActive({ route: linkRoute, isActive, isExactActive })
 }"
@@ -139,7 +125,7 @@ function resolveLinkClass({ route: route2, isActive, isExactActive } = {}) {
   as,
   type,
   disabled,
-  href: to ? href : void 0,
+  href,
   navigate
 }"
         :class="resolveLinkClass({ route: linkRoute, isActive, isExactActive })"
@@ -159,7 +145,8 @@ function resolveLinkClass({ route: route2, isActive, isExactActive } = {}) {
   disabled,
   href: to,
   target: isExternal ? '_blank' : void 0,
-  active: false
+  active,
+  isExternal
 }"
       />
     </template>
@@ -171,12 +158,12 @@ function resolveLinkClass({ route: route2, isActive, isExactActive } = {}) {
   type,
   disabled,
   href: to,
-  target: isExternal ? '_blank' : void 0
+  target: isExternal ? '_blank' : void 0,
+  isExternal
 }"
-      :is-external="isExternal"
       :class="resolveLinkClass()"
     >
-      <slot :active="false" />
+      <slot :active="active" />
     </ULinkBase>
   </template>
 </template>

package/dist/runtime/vue/composables/useAppConfig.js

@@ -1,2 +1,4 @@
+import { reactive } from "vue";
 import appConfig from "#build/app.config";
-export const useAppConfig = () => appConfig;
+const _appConfig = reactive(appConfig);
+export const useAppConfig = () => _appConfig;

package/dist/runtime/vue/stubs.d.ts

@@ -2,6 +2,7 @@ import type { Ref } from 'vue';
 import type { NuxtApp } from '#app';
 export { useHead } from '@unhead/vue';
 export { useRoute, useRouter } from 'vue-router';
+export { useAppConfig } from './composables/useAppConfig';
 export { defineShortcuts } from '../composables/defineShortcuts';
 export { defineLocale } from '../composables/defineLocale';
 export { useLocale } from '../composables/useLocale';
@@ -14,7 +15,6 @@ export declare const useColorMode: () => {
     readonly value: import("@vueuse/core").BasicColorMode;
     forced: boolean;
 };
-export declare const useAppConfig: () => any;
 export declare const useCookie: <T = string>(_name: string, _options?: Record<string, any>) => {
     value: Ref<T, T>;
     get: () => T;