vue-nl2br

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

• Vue.js ^2.0.0

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

Changelog

1.1.0 (2022-06-11)

Features

• Allow null text (#63) (0065659)