I'm feeling uncertain about what to name my Vue.js components and could use some guidance

Trying to keep this short and sweet, I have some pressing questions that need answers:

  1. If a view is showing 2 different child components based on the URL through a router, should those components be in the components directory or views directory?
  2. When naming components, should names be capitalized like Participant.vue or participant.vue?
  3. Is it acceptable to use single word components like Participant.vue? If not, how should a component that displays information about a participant of a match be named?
  4. For components with multiple words, what naming convention should be followed? ParticipantMatches.vue, participantMatches.vue, participant-matches.vue, or Participant-Matches.vue?
  5. Would it make sense to prefix child component names with the parent component name for hierarchy purposes so that related components are grouped together in the IDE file tree?

For instance:

Participant.vue - Parent component
ParticipantMatches.vue - Child component of Participant.vue
ParticipantMatchesStats.vue - Child component of ParticipantMatches.vue

The only downside could be potential lengthening of component names.

javascriptvue.js

Answer №1

When a view displays two different children components based on the URL through a router, should these components be stored in the components or views directory?

There isn't a strict definition for this, so it ultimately depends on personal preference. In a single-page application, since it's all one page, I usually organize "views" accessed via routes under the views directory and place everything rendered on that view in components.

Should component names be capitalized such as Participant.vue or participant.vue?

Vue recommends (as mentioned earlier) https://v2.vuejs.org/v2/style-guide/#Base-component-names-strongly-recommended

Is it acceptable to use single-word components like Participant.vue? If not, how should I name a component that displays information about a match participant?

Using Participant.vue is generally fine, but it ultimately comes down to personal choice. When dealing with multiple components handling participant data, considering adding more descriptive information in the component name could be beneficial.

What naming convention should I follow if I want the component to have multiple words? ParticipantMatches.vue, participantMatches.vue, participant-matches.vue, or Participant-Matches.vue?

When using a component directly in the DOM, Vue strongly advises following W3C rules for custom tag names (all lowercase with a hyphen). This helps avoid conflicts with existing and future HTML elements.

If my components are hierarchically connected, would it be wise to include the parent component's name at the beginning of the child component for better organization in the IDE file tree?

Organize related components together in a directory rather than incorporating the parent component's name in the child component itself. This way, if you need to reuse the component elsewhere in the future, the name remains relevant.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to handle waiting for promises within a Socket.IO environment?

I have the following setup: // Client Side socket.emit('some_event'); // Server Side socket.on('some_event', function(data){ socket.emit('another_event', fetchDataFromAPI()); }); The issue here is that my function fet ...

javascriptnode.jssocketspromise

What is the inner workings behind Facebook applications?

Let me explain my current situation: I am looking to retrieve a list of emails for the friends associated with a specific user. Here is the step-by-step process I envision: A div box will appear prompting the user to log in using their Facebook creden ...

c#.netasp.netjavascriptfacebook

Unable to process despite clicking button (no error messages)

I'm in the process of setting up an options page for my very first extension. As a beginner in coding, I might have made some rookie mistakes along the way. However, I am facing challenges with basic functionality that was previously working seamlessl ...

javascriptjquerygoogle-chrome-extension

What could be causing res.redirect to fail?

I am currently facing an issue with making an http.post request from Angular to an API on the backend. After the post request, I am trying to redirect to another page but for some reason, the redirect is not working properly. I am looking for an alternat ...

javascriptangularjsnode.js

Hover over the pop-up menu

Struggling with adding mouseover effect to a website created using basic html and css (not html5). Looking to display text with background image when user hovers over a link. Here is an example... REGULAR: ON HOVER: I'm not sure if it's achiev ...

javascripthtmlcssxhtmldhtml

Spinning html/css content using JavaScript

Greetings! I am currently working on a demo site using just HTML, CSS, and JavaScript. Typically, I would use Ruby and render partials to handle this issue, but I wanted to challenge myself with JavaScript practice. So far, I have created a code block that ...

javascripthtmlcss

What steps can I take to prevent constantly re-fetching a disabled CSS file?

I'm currently in the process of implementing a dark theme on my website, and my current method involves using 2 style sheets: <link rel="stylesheet" type="text/css" href="/flatly.css"> <link rel="stylesheet& ...

htmlcssvue.jsdarkmode

Create an array of routes specifically for private access using Private Route

In my application, I have defined different routes for admins, employees, and clients. Admins can access routes /x, /y, and /z, employees can access routes /a and /b, and everyone including clients can access 4 other routes. I am trying to implement this l ...

javascriptreactjs

PHP Autocomplete Text Box Functionality

Having trouble with my PHP autocomplete code. Can anyone assist with the error I'm encountering? INDEX.PHP Here is my HTML code snippet: <form method="POST> <input type="text" name="txtpname" id="txtpname" size="30" class="form-control ...

javascriptphpjqueryajaxautocomplete

Steps to define a JavaScript mixin in VueJS

Currently, I am working on a Vue project with TypeScript and in need of using a mixin from a third-party library written in JavaScript. How can I create a .d.ts file to help TypeScript recognize the functions defined in the mixin? I have attempted the fol ...

javascripttypescriptvue.js

What is the process by which browsers manage AJAX requests when they are made across

I have encountered an issue that is puzzling to me, and I suspect it might be due to my misunderstanding of how the browser handles AJAX requests. Just for context, I am using Codeigniter on an Apache server and triggering AJAX requests with jQuery. The b ...

javascriptphpjqueryajaxcodeigniter

Attempting to detect errors such as log failures and 404 responses using JQuery

For my final project, I am developing a web application using Spring MVC 4 that will connect both web and Android clients. To facilitate communication with the Android app via JSON, I have utilized @RestController. My goal is to handle connection failures ...

javascriptjqueryajaxspring-mvcspring-security

What is the best way to integrate Vue application server with Express?

I'm currently using a Vue app that is accessible at http://localhost:8080/ (using Vue CLI), and my backend is operating on Express at http://localhost:7070. I'm curious if there is a way to integrate both the frontend and backend under the same a ...

javascriptnode.jsexpressvue.jsvuejs2

What is the best way to align the progress bar near the element that initiated the task?

I am currently working on a dynamic website with jQuery, utilizing AJAX operations extensively. Whenever an AJAX operation is initiated, a progress bar is displayed in the center of the webpage. However, I am facing an issue where visitors find it cumbers ...

javascriptjquerycssajaxjquery-ui

How to conditionally prevent event propagation to children in VueJs

This Vue component is called ColorButtonGroup, and it serves as a group of checkbox/toggle buttons. It has a maximum limit of 4 colors that can be selected. The component utilizes another component called ToggleButton, which is a simple toggle selection w ...

javascripthtmlvue.jsvuejs2dom-events

Show and conceal columns in HTML with the help of JavaScript

I need help with a webpage where I want to display a table with 2 columns and two rows (header and body). My goal is to use JavaScript to control the visibility of these 2 columns. The decision to show or hide the columns should be based on the values ...

javascripthtml

"Alert box displaying error message is not appearing on the screen

In order to display an error message using a tooltip, I have hidden the tooltip by setting the style of a span with an id of demo to display:none. Then I use JavaScript's getElementById method to retrieve the value of the input field with an id of use ...

javascripthtmlcsstooltip

Book a spot in IndexedDB storage

Currently, I am developing a diagnostics application that updates data to IndexedDB every three seconds. The data has a fixed size and anything older than a week is automatically removed, resulting in a maximum of 201600 entries. This simplifies the proces ...

javascriptindexeddb

Identifying the position of an element as the first, nth, or last child within its parent using ReactJS

I'm currently experimenting with dynamic functionality in ReactJS and I need to determine the position of a child relative to its parent. How can I achieve this in ReactJS? I have come across this post which discusses detecting relationships between ...

javascriptcssreactjs

Angular 6: Issue TS2339 - The attribute 'value' is not recognized on the 'HTMLElement' type

I have a textarea on my website that allows users to submit comments. I want to automatically capture the date and time when the comment is submitted, and then save it in a JSON format along with the added comment: After a comment is submitted, I would li ...

javascriptangularhtmltypescriptangular6