Vue component always renders a new line

Question

Vue component always renders a new line

Whenever I include a <component> tag in my main application, it always renders on a new line. Is there a way to make it inline? I am trying to achieve something like this:

<p>This is a component :<component></component></p>
<!--worked with other html tags-->

But instead, the result looks like this:

This is a component :
component content

I could add the prefix This is a component : as a prop in the component so that it displays inline, but that's not always what I want.

I am also curious about where Vue stores the CSS template for components. Thank you, community.

html css vue.js vuejs2 vue-component

Answer 1

Answer №1

Your component is not displaying on a new line due to the rendering rules of HTML. If the root tag of your component is a block element, it will render on the next line. However, if the root tag is an inline element, it will render inline.

console.clear()

const Inline = {
  template: `<span>This is inline</span>`
}

const Newline = {
  template: `<div>This is on a new line</div>`
}

new Vue({
  el: "#app",
  components: {
    Inline,
    Newline
  }
})

<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4b3d3e2e0b796579657d">[email protected]</a>/dist/vue.js"></script>
<div id="app">
  <p>This is an inline component:
    <component is="Inline"></component>
  </p>
  <p>This is a block component:
    <component is="Newline"></component>
  </p>
</div>

In the provided example, the Inline component's root tag is a span, which is an inline element. The Newline component's root tag is a div, a block-level element that causes it to display on the next line.

You can also use CSS styling like display: inline on a div to force the component to render inline.

console.clear()

const Newline = {
  template: `<div style="display: inline">This is on the same line</div>`
}

new Vue({
  el: "#app",
  components: {
    Newline,
  }
})

<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0b7d7e6e4b392539253d">[email protected]</a>/dist/vue.js"></script>
<div id="app">
  <p>This is a block component that displays inline:
    <component is="Newline"></component>
  </p>
</div>

The rendering of HTML by Vue adheres to standard HTML layout rules without any special tricks involved.

Answer 2

Your component is not displaying on a new line due to the rendering rules of HTML. If the root tag of your component is a block element, it will render on the next line. However, if the root tag is an inline element, it will render inline.

console.clear()

const Inline = {
  template: `<span>This is inline</span>`
}

const Newline = {
  template: `<div>This is on a new line</div>`
}

new Vue({
  el: "#app",
  components: {
    Inline,
    Newline
  }
})

<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4b3d3e2e0b796579657d">[email protected]</a>/dist/vue.js"></script>
<div id="app">
  <p>This is an inline component:
    <component is="Inline"></component>
  </p>
  <p>This is a block component:
    <component is="Newline"></component>
  </p>
</div>

In the provided example, the Inline component's root tag is a span, which is an inline element. The Newline component's root tag is a div, a block-level element that causes it to display on the next line.

You can also use CSS styling like display: inline on a div to force the component to render inline.

console.clear()

const Newline = {
  template: `<div style="display: inline">This is on the same line</div>`
}

new Vue({
  el: "#app",
  components: {
    Newline,
  }
})

<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0b7d7e6e4b392539253d">[email protected]</a>/dist/vue.js"></script>
<div id="app">
  <p>This is a block component that displays inline:
    <component is="Newline"></component>
  </p>
</div>

The rendering of HTML by Vue adheres to standard HTML layout rules without any special tricks involved.

Vue component always renders a new line

Answer №1

Similar questions

What is the best method for accessing the properties of a JavaScript object based on input from a textbox?

Can elements be eliminated from a div based on their order?

The top margin is experiencing issues and is not functioning correctly

Efficiently adjusting the height of a sticky sidebar

Designing a menu header against a specific background color resulting in misalignment

Preventing checkbox selection with CSS

Add the variable's value to the input field

Is it possible to attach a Vue component to more than one div element simultaneously?

Unable to assign to 'disabled' as it is not recognized as a valid attribute for 'app-button'

Tips for inserting a new choice into the v-select component of Vuetify

Stop the Nav bar item from collapsing

Steps to modify the CSS of a custom component in Angular 8

Align the inner container in the outer container-fluid

Using Vue.js to create multiple instances of a module

Updated: "Adjust the preserveAspectRatio attribute in the SVG element within the Lottie player"

Is it possible for me to determine when all images have finished loading in order to update the isLoaded variable to true?

Incorporate a gradient into a Vuetify v-card background image

What is the best way to eliminate the gap between inline-block elements?

Adding a 'dot' to the progress bar in Bootstrap enhances its visual appeal

Conceal any zero values from an empty numerical input