Vue Newline to Line Break Component

1.1.1 · maintenance · verified Sun Apr 19

vue-nl2br is a Vue.js component designed to automatically convert newline characters (`\n`) within a string prop into HTML ` ` tags, effectively rendering multiline text with line breaks in the browser. It explicitly targets Vue 2 (`^2.0.0`) environments. The current stable version is 1.1.1, with the last known update in August 2021, indicating a very slow release cadence, if any, for future feature development. A key differentiator is its explicit discussion against simply using CSS `white-space: pre;`, suggesting it's intended for scenarios where semantic ` ` tags are preferred or required over CSS-driven formatting, or when the `white-space` property causes unwanted side effects. It provides options for both global and local component registration and supports custom HTML tags and class names for the wrapping element.

Common errors

```
Failed to resolve component: nl2br
```
cause The `nl2br` component has not been correctly registered globally or locally within the Vue application.

fix Ensure you either call `Vue.component('nl2br', Nl2br)` for global registration (typically in your main.js/ts) or include `Nl2br` in the `components` option of your parent Vue component for local registration.
```
Property 'text' is missing in type '{ tag: string; }' but required in type 'Nl2brProps'.
```
cause The `text` prop is defined as required in the component's TypeScript types but was omitted in the template usage.

fix Always provide the `text` prop to the `nl2br` component, even if it's an empty string or `null` (unless using `v-if` to conditionally render).

Warnings

breaking This package is designed for Vue 2 (`^2.0.0`) and is not directly compatible with Vue 3. Attempting to use it in a Vue 3 project will likely result in runtime errors related to component registration or rendering.
Fix: For Vue 3 projects, consider creating a simple custom component or using CSS `white-space: pre-wrap;` as an alternative. If semantic ` ` tags are strictly required, a custom Vue 3 component would be necessary.
gotcha When the `text` prop is empty or `null`, `vue-nl2br` will render an empty HTML tag (e.g., ``). If you prefer to render nothing at all in such cases, you must explicitly use a `v-if` directive on the component.
Fix: Use `<nl2br v-if="myText" tag="p" :text="myText" />` where `myText` is the variable holding your content.
gotcha Consider if `white-space: pre-wrap;` CSS property on a containing element meets your requirements before using `vue-nl2br`. This component inserts semantic ` ` tags directly into the DOM, which may have different implications for accessibility, SEO, or layout compared to purely presentational CSS.
Fix: Evaluate your use case: if the line breaks are purely for visual presentation, `white-space: pre-wrap;` might be a simpler and more performant solution. If semantic line breaks are critical, `vue-nl2br` is appropriate.

Install

npm install vue-nl2br npm
yarn add vue-nl2br yarn
pnpm add vue-nl2br pnpm

Imports

Nl2br
wrong:
```
import { Nl2br } from 'vue-nl2br'
```
correct:
```
import Nl2br from 'vue-nl2br'
```
The component is exported as a default export.
Vue.component
wrong:
```
const Nl2br = require('vue-nl2br'); Vue.component('nl2br', Nl2br)
```
correct:
```
import Vue from 'vue'; import Nl2br from 'vue-nl2br'; Vue.component('nl2br', Nl2br)
```
This is for global registration in a Vue 2 application using ES Modules. CommonJS `require` might work in some setups but ESM `import` is standard.
Component Type
wrong:
```
import { Nl2br } from 'vue-nl2br'
```
correct:
```
import Nl2br, { Nl2brProps } from 'vue-nl2br'
```
While the component is a default export, TypeScript types might be available as named exports if the library provides them.

Quickstart

Demonstrates local component registration and usage of the `nl2br` component with `tag`, `text`, and `class-name` props, including dynamic text updates and `v-if` for empty states.

<!-- MyComponent.vue -->
<template>
  <div>
    <h1>User Generated Content</h1>
    <nl2br 
      v-if="longText" 
      tag="p" 
      :text="longText"
      class-name="content-paragraph"
    />
    <p v-else>No content to display.</p>
    
    <h2>Example with multiple lines:</h2>
    <nl2br tag="div" :text="`This is the first line.\nThis is the second line.\nAnd a final line.`" />
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import Nl2br from 'vue-nl2br';

export default Vue.extend({
  name: 'MyComponent',
  components: {
    Nl2br,
  },
  data() {
    return {
      longText: 'Hello world!\nThis is some text that should\nbreak into multiple lines.',
    };
  },
  mounted() {
    // Simulate dynamic text loading
    setTimeout(() => {
      this.longText = 'Updated text after a delay.\nIt still respects newlines.\nEnjoy!';
    }, 2000);
  }
});
</script>

<style scoped>
.content-paragraph {
  font-family: sans-serif;
  color: #333;
  line-height: 1.5;
}
</style>

view raw JSON →