vue-nl2br
A vue component which turns new lines into line breaks.
Why not just use CSS?
See Why not just use CSS white-space: pre;
? · Issue #7
Requirement
Installation
npm install --save vue-nl2br
Usage
<nl2br tag="p" :text="`myLine1\nmyLine2`" class-name="foo bar" />
is rendered to
<p class="foo bar">myLine1<br>myLine2</p>
(1) Global registration
https://vuejs.org/v2/guide/components.html#Registration
import Vue from 'vue'
import Nl2br from 'vue-nl2br'
Vue.component('nl2br', Nl2br)
(2) Local registration
https://vuejs.org/v2/guide/components.html#Local-Registration
// MyComponent.vue
<template>
<nl2br tag="p" :text="`myLine1\nmyLine2`" />
</template>
<script>
import Nl2br from 'vue-nl2br'
export default {
name: 'MyComponent',
components: {
Nl2br,
},
// ...
}
</script>
Props
tag
: HTML tag name which is passed to createElement function
- Type:
String
- Required: true
text
: Text in the tag.
- Type:
String
- Default: null
className
: HTML class name(s)
- Type:
String
- Required: false
Note: when text
property is empty or null, it renders an empty tag. ex) <p></p>
.
If you prefer to render nothing at all, use v-if
directive:
<nl2br v-if="myText" tag="p" :text="myText" />
License
MIT