<script setup lang="ts"> import Form from "./components/Form.vue" import Lottie from "./components/Lottie.vue"; import { ref } from "vue"; const vorname = ref(""); const nachname = ref(""); const funktionZeileEins = ref(""); const funktionZeileZwei = ref(""); </script> <template> <div class="appGrid"> <div class="form"> <Form v-model:vorname="vorname" v-model:nachname="nachname" v-model:funktionZeileEins="funktionZeileEins" v-model:funktionZeileZwei="funktionZeileZwei"></Form> </div> <div class="form" > <Lottie :vorname="vorname" :nachname="nachname" :funktionZeileEins="funktionZeileEins" :funktionZeileZwei="funktionZeileZwei"></Lottie> </div> </div> </template> <style scoped> .logo { height: 6em; padding: 1.5em; will-change: filter; transition: filter 300ms; } .logo:hover { filter: drop-shadow(0 0 2em #646cffaa); } .logo.vue:hover { filter: drop-shadow(0 0 2em #42b883aa); } .appGrid { display: grid; grid-template-columns: auto auto auto auto; gap: 50px; } .form { /* width: 50%; max-width: 500px; */ } </style>