[Vuejs]-What is the relationship between an 'import' name and the corresponding SVG label in a template?

by

2👍

✅

When you register a component you can use it in the template with either the pascal case (MyComponent) or the kebab case (my-component) versions. Vue will automatically handle this for you.

So in the example of AxisLabel, you can use it as:
AxisLabel or axis-label.

This is documented here:

👤Daniel Rodríguez Meza

1👍

You may give a give to Vue’s style guide, there is a LOT to learn from this resource (prop casing, component naming convention, v-if and v-for etc…).

The part related to your specific question is here: https://vuejs.org/style-guide/rules-strongly-recommended.html#component-name-casing-in-templates

TLDR: Vue usually uses the kebab-case form for it’s documentation. But PascalCase is totally fine, it’s just a preference.
The convention of the framework is to transform an imported MyComponent from an import as a my-component in the template by default. It’s used quite a lot in the whole ecosystem because of the style guide.

👤kissu

Leave a comment