如何将NuxtLink设置为Vuetify主题主色并全局生效

这里给你两种实用的实现方式，按需选择即可：

方法一：全局CSS样式覆盖 #

直接通过全局样式修改NuxtLink的默认颜色，利用Vuetify自动注入的主题CSS变量，无需额外逻辑：

1. 在项目的assets/css/main.css（没有就新建）里添加以下样式：

/* 覆盖所有NuxtLink的默认颜色 */
.nuxt-link,
a.nuxt-link-active,
a.nuxt-link-exact-active {
  color: var(--v-theme-primary) !important;
}

/* 可选：添加hover时的浅色变体效果 */
.nuxt-link:hover {
  color: var(--v-theme-primary-lighten2) !important;
}

2. 在nuxt.config.ts里确保这个样式文件被全局引入：

export default defineNuxtConfig({
  css: ['~/assets/css/main.css'],
  // 你的Vuetify主题配置（已设置过可忽略）
  vuetify: {
    theme: {
      defaultTheme: 'light',
      themes: {
        light: {
          colors: {
            primary: '#1976D2', // 自定义主色
          }
        }
      }
    }
  }
})

方法二：封装全局自定义NuxtLink组件 #

如果需要更灵活的控制（比如结合Vuetify工具类、适配动态主题切换），可以封装自定义组件全局使用：

1. 在components/BaseNuxtLink.vue中创建组件：

<template>
  <NuxtLink v-bind="$attrs" class="base-nuxt-link">
    <slot />
  </NuxtLink>
</template>

<script setup>
import { useTheme } from 'vuetify'
const theme = useTheme()
</script>

<style scoped>
.base-nuxt-link {
  /* 直接绑定Vuetify主题主色 */
  color: v-bind('theme.current.colors.primary');
  text-decoration: none;
}

.base-nuxt-link:hover {
  color: v-bind('theme.current.colors.primary.lighten2');
  text-decoration: underline;
}

/* 激活状态样式 */
.base-nuxt-link.nuxt-link-active,
.base-nuxt-link.nuxt-link-exact-active {
  font-weight: bold;
}
</style>

2. 在nuxt.config.ts里全局注册组件，项目内任意位置可直接使用：

export default defineNuxtConfig({
  components: {
    global: true,
    dirs: ['~/components']
  },
  // 你的Vuetify配置
  vuetify: {
    theme: {
      // 主题设置
    }
  }
})

之后在页面里用<BaseNuxtLink>替代原生<NuxtLink>，就会自动继承Vuetify主题主色，后续修改主题色时也会同步更新。

内容的提问来源于stack exchange，提问作者stackoverflowuser