I am looking for a way to reuse a component on my website that displays messages. The challenge is that in one section, the content consists of only a title and paragraph, while in another section, there are multiple titles and content pieces. I have implemented a solution that works, but I'm not sure if it's the most efficient approach. Is there a better way to achieve this? Here is the code snippet:
App.vue
<template>
<div id="app" class="raleway">
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet'>
<section>
<Message title="Just a title" messageContent="Just a message"/>
</section>
</div>
</template>
<script>
import Message from "./components/Message.vue";
export default {
name: "App",
components: {
Message,
},
};
</script>
<style>
html,
body {
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #3B3B3B;
font-family: 'Raleway';
}
</style>
Component
<template>
<div class="container">
<section>
<h2>{{title}}</h2>
<p>{{messageContent}}</p>
<h2>{{title2}}</h2>
</section>
</div>
</template>
<script>
export default {
name: 'Message',
props: {
title: String,
messageContent: String,
title2: String,
messageContent2: String,
},
}
</script>
<style scoped>
.container{
text-align: center;
margin: 0 auto;
margin-top: 15em;
color: #FFF;
width: 82%;
}
.container h2{
font-size: 2em;
margin-bottom: .5em;
}
.container p{
font-weight: 600;
font-size: 1.5em;
margin-top: 0;
}
@media only screen and (max-width: 768px) {
.container p{
font-size: 1.33em;
}
}
@media only screen and (max-width: 580px) {
.container{
margin-top: 12em;
}
.container h2{
font-size: 1.17em;
}
.container p{
font-size: 1em;
}
}
</style>