I am using basic php and trying to render vue component in html. But it always show blank page. I am not getting any js error.
Am I missing anything in below code?
My Directory Structure is like below.
Directory Structure. I am sorry, unable to show image due to less rep points.
app.js is in public folder. Below is the code
Vue.component("login", ("loginComponent.vue"));
var app = new Vue({
el: "app",
data: {
},
mounted: function() {
console.log("Mounted");
},
methods: {
}
});
Component Code present in loginComponent.vue file
<template>
<div>
<form role="form" class="row">
<label for="Email Address" class="control-label">UserName</label>
<input type="text" name="Email Address" class="form-control">
<label for="Password" class="control-label">Password</label>
<input type="password" name="Password" class="form-control">
<button type="button" class="btn btn-primary" >
Login
</button>
</form>
</div>
</template>
loginView.php file code is like below.
<html>
<head>
<title>Login</title>
<link rel="stylesheet" href="https://getbootstrap.com/docs/4.0/dist/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<script src="./public/js/app.js"></script>
</head>
<body>
<div id="app">
<login></login>
</div>
</body>
</html>
On your 3rd line in app.js, "app" is not a valid selector, try "#app" instead.
Edit: There are 3 things to fix.
You are not loading loginComponent.vue loginComponent.vue is not loaded on your browser. You need to add a script tag in loginView.php.
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<script src="loginComponent.vue"></script>
<script src="app.js"></script>
You can't use .vue syntax without webpack. Your loginComponent.vue are ran as a javascript, which means <template> tag is not available and you have to set template as a string.
var loginComponent = {
template: `
<div>
<form role="form" class="row">
<label for="Email Address" class="control-label">UserName Or EmailAddress</label>
<input type="text" name="Email Address" class="form-control">
<label for="Password" class="control-label">Password</label>
<input type="password" name="Password" class="form-control">
<button type="button" class="btn btn-primary" >
Login
</button>
</form>
</div>
`,
You have to wait DOMContentLoaded before mounting the app. In app.js,
Vue.component("login", loginComponent);
document.addEventListener('DOMContentLoaded', function () {
var app = new Vue({
el: "#app",
data: {},
mounted: function () {
console.log("Mounted");
},
methods: {}
});
})