Rider + ServiceStack Vue component info

ServiceStack VS Vue
1

Hi,
I am using Rider with the SS vue spa template, is there a way to configure Rider so that it recognises SS vue components e.g. DataGrid ?

Screenshot 2025-06-26 at 20.47.14
Screenshot 2025-06-26 at 20.47.141392×238 42.8 KB

There is no intellisense and the only way is to go to GitHub to see property definitions.

2

It wasn’t possible before and the default behavior of vue-tsc still doesn’t look like it’s able to export the strong typed props of a *.vue component but worked out that I can manually maintain typed properties outside the Vue component and export more typed components using those definitions.

Anyway if you upgrade to the latest @servicestack/vue:

$ npm i @servicestack/vue@latest

And add MyApp.Client/components.d.ts to your client project it should recognize the @servicestack/vue components in your library.

image
image1007×341 41.3 KB

You can now also import components individually:

import { DataGrid } from "@servicestack/vue"

Although the navigation doesn’t work that well in Rider as ctrl+clicking on DataGrid doesn’t take you directly to the component but does in VS Code where it jumps right to the definition where you can view the typed props and emits of the component, e.g:

export declare const DataGrid: DefineComponentWithEmits<DataGridProps, DataGridEmits>;

export declare interface DataGridEmits {
    (e: "headerSelected", name: string, ev: Event): void;
    (e: "rowSelected", item: any, ev: Event): void;
}

export declare interface DataGridProps {
    items: any[];
    id?: string;
    type?: string | InstanceType<any> | Function;
    tableStyle?: TableStyleOptions;
    selectedColumns?: string[] | string;
    gridClass?: string;
    grid2Class?: string;
    grid3Class?: string;
    grid4Class?: string;
    tableClass?: string;
    theadClass?: string;
    tbodyClass?: string;
    theadRowClass?: string;
    theadCellClass?: string;
    isSelected?: (row: any) => boolean;
    headerTitle?: (name: string) => string;
    headerTitles?: {
        [name: string]: string;
    };
    visibleFrom?: {
        [name: string]: Breakpoint | "never";
    };
    rowClass?: (model: any, i: number) => string;
    rowStyle?: (model: any, i: number) => StyleValue | undefined;
}

In Rider I have to click on the vue part of @servicestack/vue and search for the component.

Either way the TypeScript definitions are now hooked up to the component which is the best that can be done AFAIK.

3

Perfect, thanks for the update