{"id":12536,"library":"vue-nl2br","title":"Vue Newline to Line Break Component","description":"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.","status":"maintenance","version":"1.1.1","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/inouetakuya/vue-nl2br","tags":["javascript","vue","nl2br","typescript"],"install":[{"cmd":"npm install vue-nl2br","lang":"bash","label":"npm"},{"cmd":"yarn add vue-nl2br","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-nl2br","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Runtime peer dependency for Vue 2 applications; not compatible with Vue 3.","package":"vue","optional":false}],"imports":[{"note":"The component is exported as a default export.","wrong":"import { Nl2br } from 'vue-nl2br'","symbol":"Nl2br","correct":"import Nl2br from 'vue-nl2br'"},{"note":"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.","wrong":"const Nl2br = require('vue-nl2br'); Vue.component('nl2br', Nl2br)","symbol":"Vue.component","correct":"import Vue from 'vue'; import Nl2br from 'vue-nl2br'; Vue.component('nl2br', Nl2br)"},{"note":"While the component is a default export, TypeScript types might be available as named exports if the library provides them.","wrong":"import { Nl2br } from 'vue-nl2br'","symbol":"Component Type","correct":"import Nl2br, { Nl2brProps } from 'vue-nl2br'"}],"quickstart":{"code":"<!-- MyComponent.vue -->\n<template>\n  <div>\n    <h1>User Generated Content</h1>\n    <nl2br \n      v-if=\"longText\" \n      tag=\"p\" \n      :text=\"longText\"\n      class-name=\"content-paragraph\"\n    />\n    <p v-else>No content to display.</p>\n    \n    <h2>Example with multiple lines:</h2>\n    <nl2br tag=\"div\" :text=\"`This is the first line.\\nThis is the second line.\\nAnd a final line.`\" />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport Nl2br from 'vue-nl2br';\n\nexport default Vue.extend({\n  name: 'MyComponent',\n  components: {\n    Nl2br,\n  },\n  data() {\n    return {\n      longText: 'Hello world!\\nThis is some text that should\\nbreak into multiple lines.',\n    };\n  },\n  mounted() {\n    // Simulate dynamic text loading\n    setTimeout(() => {\n      this.longText = 'Updated text after a delay.\\nIt still respects newlines.\\nEnjoy!';\n    }, 2000);\n  }\n});\n</script>\n\n<style scoped>\n.content-paragraph {\n  font-family: sans-serif;\n  color: #333;\n  line-height: 1.5;\n}\n</style>","lang":"typescript","description":"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."},"warnings":[{"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.","message":"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.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Use `<nl2br v-if=\"myText\" tag=\"p\" :text=\"myText\" />` where `myText` is the variable holding your content.","message":"When 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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"Consider 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.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","cause":"The `nl2br` component has not been correctly registered globally or locally within the Vue application.","error":"Failed to resolve component: nl2br"},{"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).","cause":"The `text` prop is defined as required in the component's TypeScript types but was omitted in the template usage.","error":"Property 'text' is missing in type '{ tag: string; }' but required in type 'Nl2brProps'."}],"ecosystem":"npm"}