A vue component which turns new lines into line breaks. Fixed version.

Original library doesn't work with Webpack 5. Errors: WARNING in ./node_modules/vue-nl2br/dist/Nl2br.js 3:24-31 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted WARNING in ./node_modules/vue-nl2br/dist/index.js 6:24-31 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

The problem in UMD module compilation. This issue is fixed in this fork.

See Why not just use CSS white-space: pre;? · Issue #7

• Vue.js ^2.0.0

npm install --save vue-nl2br

<nl2br tag="p" :text="`myLine1\nmyLine2`" class-name="foo bar" />

is rendered to

<p class="foo bar">myLine1<br>myLine2</p>

https://vuejs.org/v2/guide/components.html#Registration

import Vue from 'vue'
import Nl2br from 'vue-nl2br'

Vue.component('nl2br', Nl2br)

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>

• 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" />

MIT