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