1  <script setup>
 2  defineProps({
 3    msg: {
 4      type: String,
 5      required: true
 6    }
 7  })
 8  </script>
 9  
10  <template>
11    <div class="greetings">
12      <h1 class="green">{{ msg }}</h1>
13      <h3>
14        You’ve successfully created a project with
15        <a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a> +
16        <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>.
17      </h3>
18    </div>
19  </template>
20  
21  <style scoped>
22  h1 {
23    font-weight: 500;
24    font-size: 2.6rem;
25    position: relative;
26    top: -10px;
27  }
28  
29  h3 {
30    font-size: 1.2rem;
31  }
32  
33  .greetings h1,
34  .greetings h3 {
35    text-align: center;
36  }
37  
38  @media (min-width: 1024px) {
39    .greetings h1,
40    .greetings h3 {
41      text-align: left;
42    }
43  }
44  </style>