How to add a new line in string in VueJS?

Hi Friends 👋,

Welcome To SortoutCode! ❤️

Today I am going to show you How do you add a new line in string in VueJS.

Table of contains

  • Define str1,str2,msg1,msg2 for test
  • Using the pre tag
  • Using the br tag
  • Using the textarea tag
  • Using the white-space:pre; style

Let’s start today’s tutorial How do I add a new line in string in VueJS?

Define str1,str2,msg1,msg2 for test

Let’s define the number in data of the FirstComponent.vue component for testing purposes.

FirstComponent.vue

<script>
export default {
    name: 'FirstComponent',
    data() {
        return{
            str1 : "Hi Friends",
            str2 : "Welcome To SortoutCode!",
            msg1: '',
            msg2:'Hi Friends \n Welcome To SortoutCode!'
        }
    },
}
</script>

Data is used to define properties in a particular component. In a single-file component, data() is a function that returns a set of properties that have been described in the function.

we define the str1,str2,msg1,msg2 properties you can see that.

Using the pre tag

We will use the newline character, \n, which is used in javascript and many other languages. For adding the new in your string or character we have to use \n before that string or character. It will break the line and add a new line to a string.

FirstComponent.vue

<template>
    <div>
        <p>{{ msg2 }}</p>
    </div>
</template>
<script>
export default {
    name: 'FirstComponent',
    data(){
        return{
            msg2:'Hi Friends \n Welcome To SortoutCode!'
        }
    },
}
</script>

For now, let’s check the output.

Output

Using Pre Tag

Using the br tag

We can use the old method for the new line using the <br/> tag. <br/> tag will insert a single line break. we can use the two different strings and using the br tag add the new line in the string.

let’s see the example:

FirstComponent.vue

<template>
    <div>
        <h1>{{str1}}<br/>{{str2}}</h1>
    </div>
</template>
<script>
export default {
    name: 'FirstComponent',
    data(){
        return{
            str1 : "Hi Friends",
            str2 : "Welcome To SortoutCode!",
        }
    },
}
</script>

For now, let’s check the output.

Output

Using br Tag

Using the textarea tag

we can use the \n character in between the string. To print that string we are using the Textarea input tag. In the textarea long string break and add a new line in the string.

Let’s see the example:

FirstComponent.vue

<template>
    <div>
        <textarea v-model="msg2"></textarea>
    </div>
</template>
<script>
export default {
    name: 'FirstComponent',
    data(){
        return{
            msg2:'Hi Friends \nWelcome To SortoutCode!',
        }
    },
}
</script>

For now, let’s check the output.

Output

Using textarea Tag

Using the white-space:pre; style

HTML ignores newlines unless you specify white-space:pre or white-space: pre-line in CSS. Therefore,n we use the\n` character in the string and use it with another HTML tag it, will not work let’s see the example, of how they worked:

FirstComponent.vue

<template>
    <div>
        <h2 style="white-space:pre">{{msg2}}</h2>
        <h4 style="white-space:pre-line">{{msg2}}</h4>
        
    </div>
</template>
<script>
export default {
    name: 'FirstComponent',
    data(){
        return{
            msg2:'Hi Friends \nWelcome To SortoutCode!',
        }
    },
}
</script>

For now, let’s check the output.

Output

Using white-space CSS

Follow me on Twitter