Vue Js Convert String in Title Case: In Vue.js, you can convert a string to title case using the toTitleCase method. This method capitalizes the first letter of each word in the string.This feature is particularly useful for displaying text in a more visually appealing way, such as in headings or titles of web pages. By capitalizing the first letter of each word, the text becomes more readable and professional-looking.

How to Convert string into title case using Vue js ?

The code example defines a component method called “toTitleCase”, which is used to convert a given string into title case. This method is invoked on the string “hello world” within the template, meaning that when the component is rendered, the transformed string “Hello World” will be displayed in an <h1> element.

Title case is a text formatting convention in which the first letter of each major word is capitalized (excluding certain minor words like “and” or “the”). The toTitleCase method uses regular expressions to identify each word in the string and capitalize its first letter. However, because regular expressions are not perfect and may not handle certain punctuation or special characters correctly, the method may not work perfectly in all cases.

 Vue Js String Convert into Title Case using Regx Example

<div id="app">
	<h1>{{ toTitleCase(title) }}</h1>
</div>
<script type="module">
		const app = Vue.createApp({
			data() {
				return {
					title: 'hello world!'
				}
			},
			methods: {
				toTitleCase(str) {
					return str.toLowerCase().replace(/(^|\s|-|\')(\w)/g, function (match) {
						return match.toUpperCase();
					});
				}
			}
		});
		app.mount('#app');
</script>

In Vue.js, you can convert a string to title case by following these steps:

1. First, create a computed property in your  Vue component that will return the title case version of the input string. For example, you could name this property titleCaseText.
2. Within the computed property, convert the input string to lowercase using the toLowerCase() method. This is necessary because title case capitalizes the first letter of each word, but leaves the rest of the word in lowercase.
3. Use the split() method to split the string into an array of words, using a space as the delimiter. This will allow you to loop through each word and apply the capitalization rule.
4. Use the map() method to loop through each word in the array and capitalize the first letter using the toUpperCase() and charAt() methods. The slice() method is then used to extract the rest of the word.
5. Use the join() method to join the array of words back into a string, using a space as the separator. This will give you the final title case version of the input string.

By following these steps, you can easily convert a string to title case in  Vue.js.

Vue Js Convert String into Title Case using Native Javascript Example

<div id="app">
	<h1>{{ titleCaseText(title) }}</h1>
</div>
<script type="module">
		const app = Vue.createApp({
			data() {
				return {
					title: 'hello world!'
				}
			},
			methods: {
				titleCaseText(str) {
					return str.toLowerCase()
						.split(' ')
						.map(word => word.charAt(0).toUpperCase() + word.slice(1))
						.join(' ');
				}
			}
		});
		app.mount('#app');
</script>

Output of above example