FlowFuse / FlowFuse/flowfuse

Standardize Vue Router route names to kebab-case

Open
#8,084 0 comments 0 reactions 1 assignee Claimed by @cstns View on GitHub
area:frontend epic type:enhancement
Dominant language
JavaScript
Stars
400
Forks
89
Avg merge
1d 21h
Merged PRs (30d)
146

Description

## What

All our Vue Router route names should follow kebab-case (`team-members`, `application-overview`, etc.). Right now about 43 of ~133 route names use PascalCase (`ApplicationInstances`), title case with spaces (`Admin Settings`, `Sign up`), or bare words (`Home`, `Billing`). We want to clean this up before rolling out routes as MCP resources.

## Why

We're planning to expose Vue routes as MCP resources. Having consistent, predictable naming is a prerequisite for that. Beyond MCP, it just makes the codebase easier to work with when every route name follows the same pattern.

## How

The work is broken down into sub-issues, ordered by blast radius (smallest changes first, biggest last). Each sub-issue is a self-contained PR that renames a batch of routes and updates all references.

After each PR, grep for the old route name strings to confirm nothing was missed.

The final sub-issue adds a lint rule to prevent regressions.

**Out of scope:** Vue component `defineOptions({ name })` and component `name:` properties are left as-is. We're only changing the route `name` values and their references.

## Sub-issues

- [x] #8085 — Rename account route names to kebab-case
- [x] #8086 — Rename help, admin parent, and user settings route names to kebab-case
- [x] #8087 — Rename team library route names to kebab-case
- [x] #8088 — Rename low-ref team route names to kebab-case
- [x] #8089 — Rename team action route names to kebab-case
- [x] #8090 — Rename Home and team navigation route names to kebab-case
- [x] #8091 — Rename Team and Applications route names to kebab-case
- [x] #8092 — Rename application route names to kebab-case
- [x] #8093 — Add lint rule to enforce kebab-case route names

## Naming conventions

Routes follow a `{domain}-{page}-{action}` pattern:
- Domain prefix: `team-`, `application-`, `instance-`, `device-`, `admin-`, `user-`
- Nesting with hyphens: `instance-settings-general`, `team-members-invitations`
- Actions as suffixes: `-create`, `-edit`, `-view`

Notable naming decisions:
- `Instances` becomes `team-hosted-instances` (matches the "Hosted Instances" nav label, distinct from remote instances)
- `TeamDevices` becomes `team-remote-instances` (matches the "Remote Instances" nav label)
- `Admin Settings` becomes `admin` (the child `admin-settings` already exists)
- `LibraryTeamLibrary` becomes `team-library-files`
- `ApplicationDeviceGroupIndex` becomes `application-device-group` (drop the "Index" suffix)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.