<component> in vue always rendering newline - html

Question

Everytime I insert tag in my main app it always rendering a new line, couldn't it be inline? I want to achieve something like this :
<p>This is a component :<component></component></p>
<!--worked with other html tags-->
Result instead :
This is a component :
component content
Of course I can insert prefix This is a component : as props in the component so it can be inline, at least for displaying, but that's not always I intended to be..
I wonder also where Vue store css template for component.
Thanks community.

Answer 1

Your component isn't rendering on a new line. It is rendering based on the rendering rules for HTML. If your component's root tag is a block element, then it will be rendered on the next line. If it is an inline element, then it will be rendered 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/vue#2.2.6/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 above example, the Inline component's root tag is a span. Spans are inline elements. The Newline component's root tag is a div. Divs are block level elements and the text is on the next line.
You could also use display: inline on a div and cause the component to be rendered 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/vue#2.2.6/dist/vue.js"></script>
<div id="app">
<p>This is a block component that displays inline:
<component is="Newline"></component>
</p>
</div>
The HTML rendered by Vue follows all the layout rules of HTML you hand write. There's no magic involved.