Vue.js - How to name components if I have many that could be called a User component?

Posted 2 months ago by MartinZeltin

I am at loss how to name my components so that it would look good on the page and not have super long names. For example, I have an app where I have a UsersSidebar component and inside there are User components. But I also have a UserList and inside there is also User components but different components. And then I may have another different User component on the page. So they are 3 different User components but they are all called User. How could I solve this problem?

Should I call it users-sidebar-user and user-list-user because that looks very long and clunky. What if I have 2 different user-sidebar components? Should I call it general-user-sidebar and forum-user-sidebar and then forum-user-sidebar-user?

// Here the <user> is a sidebar item <li>username</li>
<users-sidebar>
    <user>
    <user>
    <user>
</users-sidebar>

// Here the <user> is a different component <div><h1>username</h1></div
<user-list>
    <user>
    <user>
    <user>
</user-list>


// And here <user> is <div class="card">username</user>
<user>

Please sign in or create an account to participate in this conversation.

Reply to

Use Markdown with GitHub-flavored code blocks.