I'm new to Vue JS and I've read several different articles online and I can't figure out how to display my component. I'm using Laravel 5.5.
I have a login view page with the following:
<div id="app">
<div class="login-box">
<login-form></login-form>
</div><!-- /.login-box -->
</div>
I created a Login.vue
page at /components/Auth/Login.vue
:
<template>
<div class="login-box-body">
<p class="login-box-msg"> Sign in to start your session. </p>
<form action="" method="post">
<input type="hidden" name="_token" value="">
<div class="form-group has-feedback">
<input type="text" class="form-control" placeholder="Username" name="username"/>
<span class="glyphicon glyphicon-user form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
<input type="password" class="form-control" placeholder="Password" name="password"/>
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
</div>
<div class="row">
<div class="col-xs-8">
<div class="checkbox icheck">
<label>
<input type="checkbox" name="remember"> Remember Me
</label>
</div>
</div>
<div class="col-xs-4">
<button type="submit" class="btn btn-primary btn-block btn-flat">Sign In</button>
</div>
</div>
</form>
<a href=""> Forgot Password? </a><br>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
I've registered it in the app.js
file:
require('./bootstrap');
Vue.component('example', require('./components/Example.vue'));
Vue.component('login-form', require('./components/Auth/Login.vue'));
const app = new Vue({
el: '#app',
});
I'm getting the error, [Vue warn]: Unknown custom element: <login-form> - did you register the component correctly? For recursive components, make sure to provide the "name" option. (found in root instance)
.
I've registered it in app.js
as seen above and if I use <example></example>
it appears correctly. How can I get this to appear?
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire