vue-nl2br

library1.1.1jsnpmunverified

vue-nl2br is a Vue.js component designed to automatically convert newline characters (`\n`) within a string prop into HTML `<br>` 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 `<br>` 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.

web-framework serialization

npm install vue-nl2br

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-NL2BR

vue-nl2br

web-frameworkjavascriptv1.1.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Nl2br

✓ import Nl2br from 'vue-nl2br'

✗ import { Nl2br } from 'vue-nl2br'

The component is exported as a default export.

Vue.component

✓ import Vue from 'vue'; import Nl2br from 'vue-nl2br'; Vue.component('nl2br', Nl2br)

✗ const Nl2br = require('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

✓ import Nl2br, { Nl2brProps } from 'vue-nl2br'

✗ import { Nl2br } from 'vue-nl2br'

While the component is a default export, TypeScript types might be available as named exports if the library provides them.

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.

<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>

Debug

Known issues

breakingThis 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 `<br>` tags are strictly required, a custom Vue 3 component would be necessary.

affects: >=1.0.0

gotchaWhen the `text` prop is empty or `null`, `vue-nl2br` will render an empty HTML tag (e.g., `<p></p>`). 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.

affects: >=1.0.0

gotchaConsider if `white-space: pre-wrap;` CSS property on a containing element meets your requirements before using `vue-nl2br`. This component inserts semantic `<br>` 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.

affects: >=1.0.0

Errors

Common errors & fixes

Failed to resolve component: nl2br

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'.

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).

Upgrade

Version history

1.1.1latest on npm

Audit

Dependencies

vuerequiredRuntime peer dependency for Vue 2 applications; not compatible with Vue 3.

Agent activity

7 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/inouetakuya/vue-nl2br ↗

packagehttps://www.npmjs.com/package/vue-nl2br ↗