oxc-project/oxc · warning · OxcDiagnostic

Name "{name}" is reserved in Vue.js.

Error message

Name "{name}" is reserved in Vue.js.

What it means

The Vue-2 built-ins variant of vue/no-reserved-component-names: 'Name "{name}" is reserved in Vue.js.' It fires for Vue 2 built-in component names (VUE2_BUILTIN_COMPONENT_NAMES, e.g. `Transition`, `KeepAlive`, and friends) when the `disallowVueBuiltInComponents` option is enabled. Using these names shadows Vue's own global components, so resolution depends on registration order and easily breaks.

Source

Thrown at crates/oxc_linter/src/rules/vue/no_reserved_component_names.rs:33

    rule::{DefaultRuleConfig, Rule},
    utils::{
        VUE_RESERVED_DEPRECATED_HTML_ELEMENTS, VUE_RESERVED_HTML_ELEMENTS,
        VUE_RESERVED_KEBAB_CASE_ELEMENTS, VUE_RESERVED_SVG_ELEMENTS, VUE2_BUILTIN_COMPONENT_NAMES,
        VUE3_BUILTIN_COMPONENT_NAMES_EXTRA, find_property,
        is_vue_component_options_object_excluding_instance,
    },
};

fn reserved_diagnostic(name: &str, span: Span) -> OxcDiagnostic {
    OxcDiagnostic::warn(format!("Name \"{name}\" is reserved.")).with_label(span)
}

fn reserved_in_html_diagnostic(name: &str, span: Span) -> OxcDiagnostic {
    OxcDiagnostic::warn(format!("Name \"{name}\" is reserved in HTML.")).with_label(span)
}

fn reserved_in_vue_diagnostic(name: &str, span: Span) -> OxcDiagnostic {
    OxcDiagnostic::warn(format!("Name \"{name}\" is reserved in Vue.js.")).with_label(span)
}

fn reserved_in_vue3_diagnostic(name: &str, span: Span) -> OxcDiagnostic {
    OxcDiagnostic::warn(format!("Name \"{name}\" is reserved in Vue.js 3.x.")).with_label(span)
}

#[derive(Debug, Default, Clone, JsonSchema, Deserialize)]
#[serde(rename_all = "camelCase", default, deny_unknown_fields)]
pub struct NoReservedComponentNames {
    /// Disallow Vue 2 built-in component names (e.g. `Transition`, `KeepAlive`).
    disallow_vue_built_in_components: bool,
    /// Disallow Vue 3 built-in component names (e.g. `Teleport`, `Suspense`).
    /// Note: this also catches Vue 2 built-ins because Vue 3's set includes them.
    disallow_vue3_built_in_components: bool,
    /// Match HTML / SVG element names case-sensitively. When `false` (default),
    /// the capitalized form of an HTML element (e.g. `Div`) is also reported.
    html_element_case_sensitive: bool,
}

View on GitHub (pinned to e1e7af627c)

Solutions

  1. Rename the component (e.g. `FadeTransition`, `AppKeepAlive`).
  2. If you meant to wrap the built-in, keep the built-in name in the template and rename only your wrapper component.
  3. If the collision is intentional and versioned, document it — but renaming is the durable fix.
  4. Re-run oxlint with the option still enabled to confirm.

Example fix

// before
export default {
  name: 'Transition' // reserved in Vue.js
}

// after
export default {
  name: 'FadeTransition'
}
Defensive patterns

Strategy: validation

Prevention

When it happens

Trigger: Enabling the rule's `disallowVueBuiltInComponents` option and naming a component `Transition`, `KeepAlive`, or another Vue 2 built-in from the util list.

Common situations: Design systems that ship their own `Transition` wrapper; migrating a Vue 2 app where a local component was named after a built-in; enabling the stricter option during a lint-config upgrade and surfacing old names.

Related errors


AI-assisted analysis of oxc-project/oxc@e1e7af627c (2026-08-20). Data as JSON: /api/errors/681914f0b8f879ce. Report an issue: GitHub.