Vuejs - How to return a string with line break from database

I'm not familiar with Vue specifically, but it sounds like you're adding text to your element. Is there some Vue method to populate the target element with html? Then you can pass the nl2br'd value to that.

For example, with vanilla javascript you can set the content of a target element using either target.innerText or target.innerHTML. The former would render the string "Hello,<br />This is my first message", the latter will render the proper HTML.

Edit: It looks like you may be able to use {{{ data }}} (rather than {{ data }}?) to render the HTML in your target element using Vue.

Thank you Deringer. Following your answer, I have found the v-html attribute with vuejs.

1- I have setup a getMessageAttribute in the Message model to return the message through the nl2br() php function which insert < br /> tags to identify the line breaks

2- In the blade page, I have inserted the vuejs attribute v-html: before: < p >@{{ message }}< /p > after: < p v-html="message">< /p >

And it works!

I créate a filter nl2br then just apply to the text {{ text | nl2br }}

Beware that if you are outputting HTML and the message is user inputted, than any HTML they input will be rendered on the page.

In 2024, for those wondering how to do this from a controller to a vue file:

    $time =nl2br("test this \n line");
     'time' => $time,
     <p  v-html="time" ></p>