I am working on converting landing page templates from Angular.js to Vue.js (v. 3) and am encountering an issue with the script being applied to the entire body versus just a specific element.
When I apply id="awApp" to the body, my logo image does not render. It is there in dev tools, but is not visible in the browser. If I move id="awApp" down to , the script then excludes the header and the logo is visible. I am needing the script to be able to work across the entire page, but am not sure where I am going wrong. My script as of now is a super simple function to determine the current year for copyrights.
**Please note: Vue.js v.3 and Vue.js in general is new to me. I'm a react.js gal that has found herself in a position requiring Vue.js. Any help is truly appreciated!
Please see the code snippet below:
<!DOCTYPE html>
<html lang="en" class="h-100">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="MindFire Agency" />
<link rel="icon" href="##URL_FAV_ICON##" />
<title>Mindfire Agency</title>
<!-- Bootstrap core CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6"
crossorigin="anonymous"
/>
<style>
main > .container {
padding: 60px 15px 0;
}
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
</head>
<body id="awApp" class="d-flex flex-column h-100">
<header>
<!-- FIXED NAVBAR AND/OR HEADER -->
<nav class="navbar navbar-expand-md navbar-light fixed-top bg-light">
<div class="container">
<a class="navbar-brand"><img
src="http://www.mindfire.agency/static/images/mindfire-agency-logo.png"
alt="logo"
width="120px;"
/></a>
</div>
</div>
</nav>
</header>
<!-- / HEADER/NAVBAR -->
<!-- MAIN CONTENT -->
<main role="main" class="flex-shrink-0">
<div class="container">
<div class="row mt-5 gx-5">
<div class="col-md-7">
<img
src="http://placehold.it/1200x400"
alt="hero image"
class="img-fluid"
/>
<h2 class="mt-3">Headline goes here...</h2>
<p>##firstname##,</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis
dolore eaque, facere id molestias perspiciatis sit? Accusantium
aspernatur delectus eius fuga id modi non, obcaecati perferendis
quia, quidem quos repellendus.
</p>
<ul>
<li>benefit 1</li>
<li>benefit 2</li>
<li>benefit 3</li>
</ul>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid
assumenda consectetur deleniti est ipsam nemo nobis officiis quasi,
quod! Ad illum labore laudantium nemo, nesciunt nisi porro
recusandae repellat.
</p>
<p class="lead">Call to action</p>
</div>
<div class="col-md-5">
<div class="card shadow p-3">
<!--<img class="card-img-top rz-card-img-top" src="http://placehold.it/400x100" alt="Card image cap">-->
<div class="card-body">
<h5 class="card-title">Call to action</h5>
<p class="card-text">
Some quick example text to build on the card title and make up
the bulk of the card's content.
</p>
<form method="post">
<div class="row mb-3 gx-2">
<div class="col-md-6">
<label class="form-label"
>First Name <span>*</span></label
>
<input
type="text"
name="firstname"
class="form-control"
value="##firstname##"
required
/>
<small
class="form-text"
>This field is required.</small
>
</div>
<div class="col-md-6">
<label class="form-label"
>Last Name <span>*</span></label
>
<input
type="text"
name="lastname"
class="form-control"
value="##lastname##"
required
/>
<small
class="form-text"
>This field is required.</small
>
</div>
</div>
<div class="row mb-3">
<div class="col">
<label class="form-label"
>Email Address <span>*</span></label
>
<input
type="text"
name="email"
class="form-control"
value="##email##"
required
/>
<small
class="form-text"
>This field is required.</small
>
<small
class="form-text"
>Doesn't look like a valid email address!</small
>
</div>
</div>
<div class="row mb-3">
<div class="col">
<label class="form-label">Phone </label>
<input
type="text"
name="phone"
class="form-control"
value="##phone##"
/>
</div>
</div>
<div class="row mb-3">
<div class="col">
<label class="form-label">Street Address </label>
<input
type="text"
name="address1"
class="form-control"
value="##address##"
/>
</div>
</div>
<div class="row mb-3 gx-2">
<div class="col-md-5">
<label class="form-label">City</label>
<input
type="text"
name="city"
class="form-control"
value="##city##"
/>
</div>
<div class="col-md-3">
<label class="form-label">State</label>
<select
name="state"
class="form-select"
>
<option value="##state##" selected="selected">##state##</option>
<option
value="state"
>
state
</option>
</select>
</div>
<div class="col-md-4">
<label class="form-label">Zip Code</label>
<input
type="text"
name="zip"
class="form-control"
value="##zip##"
/>
</div>
</div>
<div class="row mb-3">
<div class="col">
<div class="form-check">
<input type="checkbox" class="form-check-input" value=""/>
<label class="form-check-label">Check me out</label>
</div>
</div>
</div>
<!-- PURL specific hidden inputs here -->
<input
type="hidden"
name=""
value=""
/>
<!-- /PURL specific hidden inputs here -->
<button
type="submit"
class="btn btn-primary"
>
Submit
</button>
<div><small class="form-text text-muted">
<em
>* Denotes a required field. <br />
Answer all required fields to submit the form.</em
>
</small></div>
</form>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- /MAIN CONTENT -->
<!-- FOOTER -->
<footer class="footer mt-auto py-3 bg-light text-center">
<div class="container">
<span class="text-muted">© {{currentYear}} |
<a href="##URL_PRIVACY##">Privacy Policy</a> |
<a href="##URL_LEGAL##">Legal</span>
</div>
</footer>
<!-- /FOOTER -->
<!-- BOOTSTRAP JS -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
crossorigin="anonymous"
></script>
<!-- /BOOTSTRAP JS -->
<!-- VUE APP CODE -->
<script src="https://cdn.jsdelivr.net/npm/vue@3.0.11"></script>
<script>
const Main = {
data() {
return {
currentYear: new Date().getFullYear()
}
}
}
Vue.createApp(Main).mount('#awApp')
</script>
<!-- /VUE APP CODE-->
</body>
</html>