Is it a good idea to abstract simple html tags as components

For example, a simple `icon-link component as

<i background="icon-data"></i><a><slot></slot></a>

Would it cause performance issue?
Should I avoid these trivial components, and use something like <massive-links></massive-links> component which include bunch of tags.

Thanks.

Have you seen: https://github.com/styled-components/vue-styled-components ?

If you want to use simple small components that’s totally fine, but you will get into performance issues if they all have a full vue instance and there are a lot of them on the page.

If you’d like them to be reusable components, I’d make them functional components to prevent this issue. These have limitations but seem to fit your needs in this example.

Here is another doc that talks about them

Thanks for the info, but my component may include simple states, that plugin seems only wrap some styles.

In that case, I think css class is a choice, this is a first impression.

Yeah it depends on your goals. For me, I wanted my markup to go from:

<template>
	<div class="main-div">This is a main div i promise
		<div class="content-div-shopping">Press any key to shop</div>
		<div>Some other anonymous div</div>
	</div>
</template>

To:

<template>
	<Main>This is a main div i promise
		<Shopping>Press any key to shop</Shopping>
		<Info>Some other anonymous div</Info>
	</Main>
</template>

I took a note out of how React does it, and I liked their approach to templating a lot. This is just so much easier to read than normal HTML, and fully encapsulates your CSS. YMMV though.

Thanks, that’s exactly what I am worried about, and exactly what I need.:smiley:

1 Like

Yeah, that looks better, I may consider it. Thanks.