diff --git a/packages/nuxt/src/runtime/plugin.ts b/packages/nuxt/src/runtime/plugin.ts index 6d2970e6d2..68d8a6b432 100644 --- a/packages/nuxt/src/runtime/plugin.ts +++ b/packages/nuxt/src/runtime/plugin.ts @@ -6,11 +6,13 @@ import { ColorsClassesPlugin, BreakpointConfigPlugin, } from 'vuestic-ui' -import { ref, watchEffect } from 'vue' +import { ref, watchEffect, markRaw } from 'vue' import type { VuesticOptions } from '../types' // @ts-ignore: nuxt import alias import { defineNuxtPlugin } from '#app' +// @ts-ignore: direct nuxt-link import +import NuxtLink from '#app/components/nuxt-link' // @ts-ignore: use-config-file import alias import configFromFile from '#vuestic-config' @@ -23,10 +25,11 @@ export default defineNuxtPlugin((nuxtApp) => { // It's important to use `, because TS will compile qoutes to " and JSON will not be parsed... const { config }: VuesticOptions = JSON.parse(`<%= options.value %>`) + const userConfig = configFromFile || config /** Use tree-shaking by default and do not register any component. Components will be registered by nuxt in use-components. */ app.use(createVuesticEssential({ - config: configFromFile || config, + config: { ...userConfig, routerComponent: markRaw(NuxtLink) }, // TODO: Would be nice to tree-shake plugins, but they're small so we don't cant for now. // Should be synced with create-vuestic.ts plugins: { diff --git a/packages/ui/src/composables/useRouterLink.ts b/packages/ui/src/composables/useRouterLink.ts index bc891c9036..82ce438066 100644 --- a/packages/ui/src/composables/useRouterLink.ts +++ b/packages/ui/src/composables/useRouterLink.ts @@ -1,4 +1,6 @@ -import { computed, PropType, getCurrentInstance, ExtractPropTypes } from 'vue' +import { computed, PropType, getCurrentInstance, type ExtractPropTypes } from 'vue' + +import { useGlobalConfig } from '../services/global-config' export const useRouterLinkProps = { tag: { type: String, default: 'span' }, @@ -15,24 +17,27 @@ export const useRouterLinkProps = { export const useRouterLink = (props: ExtractPropTypes) => { const globalProperties = computed(() => getCurrentInstance()?.appContext.config.globalProperties) - const isNuxt = computed(() => !!globalProperties.value?.$nuxt) const vueRouter = computed(() => globalProperties.value?.$router) const vueRoute = computed(() => globalProperties.value?.$route) + const { getGlobalConfig } = useGlobalConfig() + const routerComponent = getGlobalConfig().routerComponent + const isNuxt = !!globalProperties.value?.$nuxt + const isNuxtLink = computed(() => !!(!props.disabled && props.to && isNuxt && routerComponent)) + const tagComputed = computed(() => { if (props.disabled) { return props.tag } if (props.href && !props.to) { return 'a' } - // if (props.to) { return isNuxt.value ? 'nuxt-link' : 'router-link' } - // https://github.com/nuxt/framework/issues/6747 - // TODO: may be we will be able to register NuxtLink component via @vuestic/nuxt and use resolveComponent + if (isNuxtLink.value) { return routerComponent } + if (props.to) { return 'router-link' } return props.tag || 'div' }) - const isLinkTag = computed(() => ['a', 'router-link', 'nuxt-link'].includes(tagComputed.value)) + const isLinkTag = computed(() => isNuxtLink.value || ['a', 'router-link'].includes(tagComputed.value as string)) const linkAttributesComputed = computed(() => { if (!isLinkTag.value) { return {} } diff --git a/packages/ui/src/services/global-config/global-config.ts b/packages/ui/src/services/global-config/global-config.ts index 4756b20d67..2982688b86 100644 --- a/packages/ui/src/services/global-config/global-config.ts +++ b/packages/ui/src/services/global-config/global-config.ts @@ -21,6 +21,12 @@ export const createGlobalConfig = () => { breakpoint: getBreakpointDefaultConfig(), i18n: getI18nConfigDefaults(), colorsClasses: getColorsClassesDefaultConfig(), + /** + * global config variable to pass nuxt-link component to vuestic-ui via @vuestic/nuxt + * TODO: give a try to integrate inertia js router components via this option + * TODO: if this try won't be success, may be remake to provide/inject + */ + routerComponent: undefined, }) const getGlobalConfig = (): GlobalConfig => globalConfig.value diff --git a/packages/ui/src/services/global-config/types.ts b/packages/ui/src/services/global-config/types.ts index ab75d50c3a..ed6e974be8 100644 --- a/packages/ui/src/services/global-config/types.ts +++ b/packages/ui/src/services/global-config/types.ts @@ -3,7 +3,7 @@ import type { ColorConfig } from '../color' import type { IconConfig } from '../icon' import type { BreakpointConfig } from '../breakpoint' import type { I18nConfig } from '../i18n' -import type { Ref } from 'vue' +import type { Ref, Component } from 'vue' import type { ColorsClassesConfig } from '../colors-classes' export type GlobalConfig = { @@ -12,7 +12,8 @@ export type GlobalConfig = { components: ComponentConfig, breakpoint: BreakpointConfig, i18n: I18nConfig, - colorsClasses: ColorsClassesConfig + colorsClasses: ColorsClassesConfig, + routerComponent: Component | undefined, } type DeepPartial = T extends Record ? {