Just starting out with VueJS and I have my initial files - index.html and index.js. I want to stick with just these two files and not add any more.
Here's the content of index.html:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Password strength indicator</title>
<link rel='stylesheet' href='css/all.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="app" class="container">
<h1>Vue Password Strength Indicator</h1>
<label class="frmLabel" for="password">Password</label>
<input placeholder="Enter your password" name="password" class="frmField"
type="password" @input="" v-model="password" />
<p class="frmValidation" :class="{'frmValidation--passed' : message.length >
7}">
<i class="frmIcon fas" :class="message.length > 7 ? 'fa-check' : 'fa-times'">
</i>
Longer than 7 characters
</p>
<p class="frmValidation" :class="{'frmValidation--passed' :has_uppercase }">
<i class="frmIcon fas" :class="has_uppercase ? 'fa-check' : 'fa-times'"></i>
Has a capital letter
</p>
<p class="frmValidation" :class="{'frmValidation--passed' :has_lowercase }">
<i class="frmIcon fas" :class="has_lowercase ? 'fa-check' : 'fa-times'"></i>
Has a lowercase letter
</p>
<p class="frmValidation" :class="{'frmValidation--passed' : has_number }">
<i class="frmIcon fas" :class="has_number ? 'fa-check' : 'fa-times'"></i>
Has a number
</p>
<p class="frmValidation" :class="{'frmValidation--passed' : has_special }">
<i class="frmIcon fas" :class="has_special ? 'fa-check' : 'fa-times'"></i>
Has a special character
</p>
</div><!-- #app -->
<script type="module" src="index.js"></script>
</body>
</html>
And here's what's in index.js:
import { createApp } from 'vue'
const app = createApp({
data() {
return {
password: '',
};
},
computed: {
message() {
return this.password.length > 7;
},
has_uppercase() {
return /[A-Z]/.test(this.password);
},
has_lowercase() {
return /[a-z]/.test(this.password);
},
has_number() {
return /\d/.test(this.password);
},
has_special() {
return /[!@#$%^&*(),.?":{}|<>]/.test(this.password);
}
},
});
app.mount('#app')
The issue I'm facing is that the content of the application is not rendering, specifically the content within
<div id="app"></div>In the console, I'm seeing the following warnings:
[Vue warn]: Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias "vue" to "vue/dist/vue.esm-bundler.js". at
and
Feature flags VUE_OPTIONS_API, VUE_PROD_DEVTOOLS, VUE_PROD_HYDRATION_MISMATCH_DETAILS are not explicitly defined. You are running the esm-bundler build of Vue, which expects these compile-time feature flags to be globally injected via the bundler config in order to get better tree-shaking in the production bundle