Skip to content

Newline

The Newline component inserts one or more newline characters to control vertical spacing in terminal apps.

Basic Usage

vue
<template>
  <Col gap="1">
    <Text>Line 1</Text>
    <Newline />
    <Text>Line 2</Text>
  </Col>
</template>

<script setup>
import { Newline, Col, Text } from 'vuetty';
</script>

Props

NameTypeDefaultDescription
countnumber1Number of newline characters to insert

Customization

Multiple Newlines

vue
<template>
  <Col gap="1">
    <Text>Line 1</Text>
    <Newline :count="2" />
    <Text>Line 2</Text>
  </Col>
</template>

<script setup>
import { Newline, Col, Text } from 'vuetty';
</script>

Usage with Other Components

With Box

vue
<template>
  <Box :padding="1">
    <Text>First Line</Text>
    <Newline />
    <Text>Second Line</Text>
  </Box>
</template>

<script setup>
import { Newline, Box, Text } from 'vuetty';
</script>

With Row and Col

vue
<template>
  <Row gap="2">
    <Col flex="1">
      <Text>Column 1</Text>
      <Newline />
      <Text>Line 2</Text>
    </Col>
    <Col flex="1">
      <Text>Column 2</Text>
      <Newline />
      <Text>Line 2</Text>
    </Col>
  </Row>
</template>

<script setup>
import { Newline, Row, Col, Text } from 'vuetty';
</script>

Released under the MIT License.