CODEWITHSUNDEEP
vue.jsvuejs2vue-component
Sebi
Sebi

Reputation: 4522

vue single file components naming; is it important?

What's the point of the name of a single file vue component?

In this example:

<template>
  <div class="inventory-section">    
    <draggable v-model="itemSectionProps.itemSectionCategory">
      <transition-group>
        <div
          v-for="category in itemSectionProps.itemSectionCategory"
          :key="category.itemSectionCategoryId"
        >
          <!-- <p>{{ category.itemSectionCategoryName }}</p>  -->
          <inventory-section-group :itemSectionGroupProps="category">
          </inventory-section-group>
        </div>
      </transition-group>
    </draggable>
  </div>
</template>

<script>
import InventorySectionGroup from "./InventorySectionGroup";
import draggable from "vuedraggable";

export default {
  name: "Inventory",
  components: {
    InventorySectionGroup,
    draggable,
  },

inventory section group is named like:

<script>
import InventoryItem from "./InventorySectionGroupItemC";

export default {
  name: "Do I even have a point?",
  components: {
    InventoryItem,
  },
  props: {
    itemSectionGroupData: {
      type: Object,
    },
  },
};
</script>

so, does the name in the component matter?

After some testing, all components seem to work as long as they're translated from camel to kebap-case when imported (and used). Is this the case?

Upvotes: 1

Views: 794

Answers (1)

maxshuty
maxshuty

Reputation: 10662

A good justification for the name is that lets say you have a naming convention to your files and for components.

For example if all components are named with what they are but not appended with comp (ie: Inventory.vue instead of InventoryComp.vue) and when you use them you want to be more explicit about what they are (components) so you want to use this component like this: <inventory-comp />. An easy way to do this is to use the name property and set it like this in your Inventory.vue:

name: 'InventoryComp` // or inventory-comp

Upvotes: 1

Related Questions