VS Code: Go-to-Definition for Global Vue Components

[n-lark]

Description

VS Code: Go-to-Definition for Global Vue Components

The Problem

FlowFuse registers ~35 Vue components globally (e.g. <ff-button>, <ff-data-table>, <ff-text-input>). Because they're registered at runtime via the plugin in frontend/src/ui-components/index.js, VS Code has no way to know where they're defined. Cmd+Clicking a component tag in a template goes nowhere.

The Fix

Two files were added and one updated:

1. frontend/src/components.d.ts (new)

A TypeScript declaration file that tells the Vue language server about every globally registered component and where its source file lives:

declare module 'vue' {
    export interface GlobalComponents {
        FfButton: typeof import('./ui-components/components/Button.vue')['default']
        FfDataTable: typeof import('./ui-components/components/data-table/DataTable.vue')['default']
        // ... all other global components
    }
}

This is the standard mechanism described in the Volar docs for declaring globally registered components.

2. frontend/jsconfig.json (new)

Since the project uses JavaScript (not TypeScript), there's no tsconfig.json for the language server to use as an anchor. This minimal config tells Volar where the source lives:

{
    "compilerOptions": {
        "jsx": "preserve",
        "baseUrl": "."
    },
    "include": ["src/**/*", "src/**/*.d.ts"]
}

3. .eslintrc (updated)

ESLint was trying to parse the .d.ts file with the JS parser and throwing Parsing error: Unexpected token module. Added "**/*.d.ts" to ignorePatterns since declaration files don't need linting.

---

Required VS Code Extension

Vue - Official (publisher: Vue.volar)

This is the official Vue language support extension, formerly known as Volar. It replaced the older Vetur extension and is required for Vue 3 projects.

If you have Vetur installed, disable it for this workspace — running both causes conflicts.

---

What You Get

Once the extension is installed and VS Code has loaded:

Feature	Example
Go to Definition	Cmd+Click <ff-button> → opens Button.vue
Hover info	Hover <ff-data-table> → shows component name
Autocomplete	Type <ff- → suggests all registered components
Prop checking	Warns on unknown/incorrect props (where prop types are defined)

---

Keeping It in Sync

components.d.ts is a manual mirror of:

• frontend/src/ui-components/components.js — the bulk of global components
• frontend/src/main.js — a few extra ones (ff-page, ff-loading, ff-team-link, etc.)

If a new component is added to either file, add a corresponding line to components.d.ts following the same pattern.

---

First-time Setup

1. Install the Vue - Official extension
2. Open the repo in VS Code
3. If the extension was already installed, run: Cmd+Shift+P → Vue: Restart Language Server
4. Cmd+Click any <ff-*> tag in a template — it should jump to the source file

Epic/Story

No response

Have you provided an initial effort estimate for this issue?

I have provided an initial effort estimate

[cstns]

Awesome stuff! Next step is to do the same for the vuex store (to ease our life a bit until we switch to pinia)