js-tutorial-step-4

// src/components/Front.vue
 
<script setup>
import { ref } from "vue";
 
const imgSrc = ref("https://s3.us-west-2.amazonaws.com/public.lob.com/solutions/Lob_demo_postcard_conversion/Retail+psc/4x6+Retail+Postcard/Links/indoor-4148898.jpg");
const headerText = ref("Love the home you live in")
const logoText = ref("virtonis")
</script>
 
<template>
  <div class="body" :style="{ backgroundImage: `url(${imgSrc})` }">
    <div class="header">{{ headerText }}</div>
    <div class="logo">{{ logoText }}</div>
    <div id="safe-area"></div>
  </div>
</template>