types: Fix nuxi typecheck errors

playground/app.vue

@@ -36,7 +36,7 @@
 
 
 <script setup lang="ts">
-import { ThemeConfig, NavbarRoute, TabbarRoute } from "@bg-dev/nuxt-naiveui"
+import { ThemeConfig, NavbarRoute, TabbarRoute } from "../src/module"
 import { theme } from "#tailwind-config";
 
 const navbarRoutes: NavbarRoute[] = [
@@ -87,7 +87,7 @@ const tabBarRoutes: TabbarRoute[] = [
 const themeConfig: ThemeConfig = {
   shared: {
     common: {
-      fontFamily: theme.fontFamily.sans,
+      fontFamily: theme.fontFamily.sans.join(", "),
       lineHeight: theme.lineHeight.normal,
     },
   },

src/module.ts

@@ -11,15 +11,11 @@ import { fileURLToPath } from "url";
 import naive from "naive-ui";
 import { name, version } from "../package.json";
 import { defu } from "defu";
-import type { ThemeConfig, ColorModePreference } from "./runtime/types";
-export type { NavbarRoute, ThemeConfig, TabbarRoute } from "./runtime/types";
+import type { PublicConfig } from "./runtime/types";
+export type { NavbarRoute, ThemeConfig, TabbarRoute, PublicConfig } from "./runtime/types";
 
 // Module options TypeScript inteface definition
-export interface ModuleOptions {
-  themeConfig?: ThemeConfig;
-  colorModePreference: ColorModePreference;
-  iconSize: number;
-}
+export interface ModuleOptions extends PublicConfig { }
 
 export default defineNuxtModule<ModuleOptions>({
   meta: {
@@ -84,10 +80,12 @@ export default defineNuxtModule<ModuleOptions>({
     });
 
     // Pass module options to runtimeConfig object
-    nuxt.options.runtimeConfig.public.naiveui = defu(
-      nuxt.options.runtimeConfig.public.naiveui,
-      options
-    );
+    nuxt.options.runtimeConfig = defu(nuxt.options.runtimeConfig, {
+      app: {},
+      public: {
+        naiveui: options
+      }
+    })
 
     // Add imports for naive-ui components
     const naiveComponents = Object.keys(naive).filter((name) =>

src/runtime/components/NaiveConfig.vue

@@ -1,7 +1,10 @@
 <template>
-    <n-config-provider :theme-overrides="naiveTheme" :inline-theme-disabled="true">
-        <slot></slot>
-    </n-config-provider>
+  <n-config-provider
+    :theme-overrides="naiveTheme"
+    :inline-theme-disabled="true"
+  >
+    <slot />
+  </n-config-provider>
 </template>
 
 <script setup lang="ts">
@@ -11,7 +14,7 @@ import {
 } from "#imports"
 import { NConfigProvider, GlobalThemeOverrides, ConfigProviderProps } from "naive-ui"
 import { defu } from "defu"
-import type { ThemeConfig } from "../types"
+import type { ThemeConfig,PublicConfig } from "../types"
 
 const defaultDarkTheme: GlobalThemeOverrides = {
     common: {
@@ -225,7 +228,7 @@ interface NaiveConfigProps
     extends /* @vue-ignore */ Omit<ConfigProviderProps, "themeOverrides" | "theme"> {
     themeConfig?: ThemeConfig;
 }
-const config = useRuntimeConfig().public.naiveui
+const config = useRuntimeConfig().public.naiveui as PublicConfig
 
 const props = defineProps<NaiveConfigProps>()
 

src/runtime/components/NaiveIcon.vue

@@ -5,13 +5,14 @@
 </template>
 
 <script setup lang="ts">
+import type {PublicConfig} from "../types"
 //@ts-ignore
 import { computed, useRuntimeConfig } from '#imports'
 import { Icon } from '@iconify/vue/dist/offline'
 import { loadIcon } from '@iconify/vue'
 import { NIconWrapper } from "naive-ui"
 
-const config = useRuntimeConfig().public.naiveui
+const config = useRuntimeConfig().public.naiveui as PublicConfig
 
 const props = defineProps<{ name: string; size?: number, color?: string, borderRadius?: number, iconColor?: string }>()
 

src/runtime/components/NaiveNavbar.vue

@@ -58,7 +58,7 @@
 import { ref, computed, h, useRoute, useRouter, watchEffect, useNaiveTheme } from "#imports"
 import { NDrawer, NMenu, NDrawerContent, NButton } from "naive-ui"
 import { NuxtLink, NaiveIcon } from "#components"
-import type { StyleValue } from "vue"
+import type { StyleValue , Component} from "vue"
 import type { MenuOption } from "naive-ui"
 import type { NavbarRoute } from "../types"
 
@@ -113,7 +113,7 @@ const menuOptions = computed<MenuOption[]>(() => {
         const menuOption: MenuOption =
         {
             label: route.path ? () => h(NuxtLink, { to: route.path }, { default: () => route.label }) : route.label,
-            icon: route.icon ? () => h(NaiveIcon, { name: route.icon }) : undefined,
+            icon: route.icon ? () => h(NaiveIcon as Component, { name: route.icon }) : undefined,
             key: route.path || route.label,
         }
 

src/runtime/plugins/colorMode.ts

@@ -10,11 +10,11 @@ import {
 } from "#imports";
 import { setCookie, setResponseHeader } from "h3";
 import colorModeMiddleware from "../middleware/colorMode";
-import type { ColorModePreference } from "../types";
+import type { ColorModePreference , PublicConfig} from "../types";
 
 export default defineNuxtPlugin((nuxtApp) => {
   const event = useRequestEvent();
-  const config = useRuntimeConfig().public.naiveui;
+  const config = useRuntimeConfig().public.naiveui as PublicConfig
   const { colorMode, colorModePreference, colorModeForced } =
     useNaiveColorMode();
 

src/runtime/types.d.ts

@@ -27,3 +27,9 @@ export type ColorMode = "light" | "dark";
 export type ColorModePreference = "light" | "dark" | "system";
 
 export type ColorModeForce = ColorMode | false;
+
+export interface PublicConfig {
+  themeConfig?: ThemeConfig;
+  colorModePreference: ColorModePreference;
+  iconSize: number;
+}

test/fixtures/basic/nuxt.config.ts

@@ -1,7 +1,5 @@
-import MyModule from '../../../src/module'
-
-export default defineNuxtConfig({
+ export default defineNuxtConfig({
   modules: [
-    MyModule
+    "../../../src/module.ts"
   ]
 })