fix(vue): support more complex types for routerLink

Author: christian-bromann

example-project/vue-app-broken/src/App.vue

@@ -7,5 +7,23 @@ import { MyComponent, MyButton } from 'component-library-vue'
     kidsNames="John"
   />
   <my-button fill="ups">Button</my-button>
+  <my-button :router-link="{name: 'user', para__ms: {username: 'cindy'}}"></my-button>
+
+  <!-- passing types -->
   <my-button router-link="/">Button</my-button>
+  <my-button router-link="/about">
+    About
+  </my-button>
+  <my-button :router-link="{name: 'user', params: {username: 'cindy'}}">
+    Cindy
+  </my-button>
+  <my-button :router-link="{name: 'about'}">
+    About
+  </my-button>
+  <my-button :router-link="{path: '/search', query: {id: 42}}">
+    Search for 42
+  </my-button>
+  <my-button expand="full" :router-link="{name: 'about', hash: '#history'}">
+    Our History
+  </my-button>
 </template>

example-project/vue-app-broken/tests/type.test.ts

@@ -31,6 +31,7 @@ describe('type check', () => {
       [
         "src/App.vue(7,5): error TS2322: Type 'string' is not assignable to type 'string[]'.",
         "src/App.vue(9,14): error TS2322: Type '"ups"' is not assignable to type '"clear" | "outline" | "solid" | "default" | undefined'.",
+        "src/App.vue(10,43): error TS2353: Object literal may only specify known properties, and 'para__ms' does not exist in type 'Symbol | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric'.",
       ]
     `)
   })

packages/vue/package.json

@@ -48,12 +48,16 @@
   },
   "peerDependencies": {
     "vue": "^3.4.38",
+    "vue-router": "^4.5.0",
     "@stencil/core": ">=2.0.0 || >=3 || >= 4.0.0-beta.0 || >= 4.0.0"
   },
   "peerDependenciesMeta": {
     "vue": {
       "optional": false
     },
+    "vue-router": {
+      "optional": true
+    },
     "@stencil/core": {
       "optional": true
     }
@@ -65,6 +69,7 @@
     "rimraf": "^5.0.0",
     "rollup": "^4.14.3",
     "typescript": "~5.7.0",
-    "vitest": "^3.0.8"
+    "vitest": "^3.0.8",
+    "vue-router": "^4.5.0"
   }
 }

packages/vue/src/types.ts

@@ -1,4 +1,5 @@
-import type { DefineSetupFnComponent } from 'vue';
+import type { DefineSetupFnComponent, VNodeProps, AllowedComponentProps, ComponentCustomProps } from 'vue';
+import type { RouteLocationAsRelativeGeneric, RouteLocationAsPathGeneric } from 'vue-router';
 
 /**
  * Options for the Vue Output Target
@@ -83,11 +84,11 @@ declare global {
 }
 
 export type StencilVueComponent<Props, VModelType = string | number | boolean> = DefineSetupFnComponent<
-  Props & InputProps<VModelType>,
+  Props & InputProps<VModelType> & VNodeProps & AllowedComponentProps & ComponentCustomProps,
   {},
   {},
-  Props & InputProps<VModelType>
->;
+  Props & InputProps<VModelType> & VNodeProps & AllowedComponentProps & ComponentCustomProps
+>
 export interface InputProps<T> {
   modelValue?: T;
   /**
@@ -99,5 +100,5 @@ export interface InputProps<T> {
    * For more information
    * @see https://ionicframework.com/docs/vue/navigation#navigating-using-router-link
    */
-  routerLink?: string | Symbol;
+  routerLink?: Symbol | string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric;
 }