vue-nl2br

vue-nl2br

A vue component that turns new lines into line breaks.

Requirement

• Vue.js ^2.0.0

Installation

npm install --save vue-nl2br

Usage

<nl2br tag="p" :text="`myLine1\nmyLine2`" />

is rendered to

<p>myLine1<br>myLine2</p>

(1) To register a global component

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: 'my-component',
  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
  • Required: true

License

MIT

Copyright (c) 2017, INOUE Takuya

Changelog

0.0.5 (2017-06-04)

Braking Changes

• Renamed property: content -> text