[#3024] nuxt-link is now available in vuestic

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: {

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<typeof useRouterLinkProps>) => {
   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 {} }

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

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> = T extends Record<string, any> ? {