})

```

::tip

You can provide custom navigation logic for frameworks like **Hybridly** by setting `router: false` in the Vite config and passing a function when installing the Vue plugin:

```ts [main.ts]

import ui from '@nuxt/ui/vue-plugin'

import { router } from 'hybridly'

app.use(ui, {

router: (event, { href, external }) => {

if (external) {

return

}

event.preventDefault()

router.navigate({ url: href })

}

})

```

::

::note

When set to `false` or `'inertia'`, `vue-router` is not required as a dependency.

::

export default function PluginsPlugin(options: NuxtUIOptions) {

const plugins = globSync(['**/*', '!*.d.ts'], { cwd: join(runtimeDir, 'plugins'), absolute: true })

plugins.unshift(resolvePathSync('../runtime/vue/plugins/router', { extensions: ['.ts', '.mjs', '.js'], url: import.meta.url }))

plugins.unshift(resolvePathSync('../runtime/vue/plugins/head', { extensions: ['.ts', '.mjs', '.js'], url: import.meta.url }))

if (options.colorMode) {

plugins.push(resolvePathSync('../runtime/vue/plugins/color-mode', { extensions: ['.ts', '.mjs', '.js'], url: import.meta.url }))

}

load() {

return `

${plugins.map(p => `import ${genSafeVariableName(p)} from "${p}"`).join('\n')}

export default {

install (app) {

${plugins.map(p => ` app.use(${genSafeVariableName(p)})`).join('\n')}

install (app, pluginOptions = {}) {

${plugins.map(p => ` app.use(${genSafeVariableName(p)}, pluginOptions)`).join('\n')}

}

}

`

</script>

<script setup lang="ts">

import { computed } from 'vue'

import { computed, inject } from 'vue'

import { defu } from 'defu'

import { hasProtocol } from 'ufo'

import { useAppConfig } from '#imports'

return null

})

const handleNavigation = inject<((event: MouseEvent, context: { href: string, external: boolean, target?: string | null }) => void) | undefined>('nuxtui:router', undefined)

const navigate = handleNavigation

? (e: MouseEvent) => {

handleNavigation(e, {

href: href.value || '',

external: isExternal.value,

target: props.target || (isExternal.value ? '_blank' : undefined)

})

}

: undefined

</script>

<template>

as,

type,

disabled,

href: href,

navigate: undefined,

href,

navigate,

rel: linkRel,

target: target || (isExternal ? '_blank' : undefined),

isExternal,

as,

type,

disabled,

href: href,

navigate: undefined,

href,

navigate,

rel: linkRel,

target: target || (isExternal ? '_blank' : undefined),

isExternal

import type { Plugin } from 'vue'

export default {

install(app, options) {

if (options?.router && typeof options.router === 'function') {

app.provide('nuxtui:router', options.router)

}

}

} satisfies Plugin