This is my first time to use Vue js and i do not have any idea why it does not work. I been trying to use the default codes in my Laravel Application.
Here is my code in app.js:
Vue.component('example-component', require('./components/ExampleComponent.vue'));
Here is my code in ExampleComponent.vue file:
<template>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Example Component</div>
<div class="panel-body">
I'm an example component!
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
Here is my code for the view:
<div id="app">
<example-component></example-component>
</div>
And when i run npm run watch it says successful. Any help would be appreciated. I really need help. Thanks.
Related
My vue js component doesnt show on my project. I don't see any errors from my part as I have seen many examples before and this is the right logic to implement it. Can anyone help me?
index.blade.php file
<div id="app">
<div class="d-flex align-items-center pb-3">
<div class="h3">{{ $user->username}}</div>
<follow-button></follow-button>
</div>
</div>
FollowButton.vue file
<template>
<div>
<button class="btn btn-primary ml-4"> Follow Me </button>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
app.js file
require('./bootstrap');
window.Vue = require('vue');
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('follow-button', require('./components/FollowButton.vue').default);
const app = new Vue({
el: '#app',
});
ExampleComponent.vue file
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Example Component</div>
<div class="card-body">
I'm an example component.
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
make sure you use <div id="app"> inside write all vuejs code
Add this in app.js
Vue.component('follow-button', require('./components/FollowButton.vue').default);
after register follow-button you can use
<div id="app">
<div class="d-flex align-items-center pb-3">
<div class="h3">{{ $user->username}}</div>
<follow-button> </follow-button>
</div>
</div>
after that run npm run dev
Note: - make sure index.blade.php here you added app.js file
For anyone who might have the same problem with me, somehow I had two divs with the same id="app" and that made sure that my vue.js file not to be implemented on my laravel project.
try to add to index.blade.php file
<script src="{{ mix('/js/app.js') }}"></script>
I am new to vuejs ...I am not able to mount the data of component to the blade file
app.js
Vue.component('example-component',
require('./components/ExampleComponent.vue').default);
const app = new Vue({
el: '#app',
});
home.blade.php
<div id="app">
<example-component></example-component>
</div>
ExampleComponent.vue
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Example Component</div>
<div class="card-body">
I'm an example component.
</div>
</div>
</div>
</div>
</div>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
There was no error but
element example-component
was displayed as it is ..I want to display Component mounted on console?
I have found the thing i have missed while coding is that,
I have not included app.js file...
After including this file i overcome my output..
i'm using Laravel 5.7 and WampServer to develop a project thats giving me a weird problem: it is taking an eternity to load up on my browser and I don't know whats going on. I have another Laravel project that works just fine but this one just crashed for one day to another. What can I do in order to fix this? I don't know where to start.
EDIT 1: I've commented the next component and my project runs fine. Either way, I can't see a problem in there. Can anybody help me with it?
<template>
<div class="card">
<div class="card-header text-center text-uppercase">{{ userEmailNotFound ? 'Ingresa tu correo electrónico' : 'Responde a la siguiente pregunta' }}</div>
<div class="card-body">
<div class="input-group mb-3" v-show="userEmailNotFound">
<div class="input-group-prepend">
<span class="input-group-text mdi mdi-email" id="email-addon"></span>
</div>
<input v-model="userEmail" name="email" type="email" class="form-control" id="email" placeholder="Correo electrónico" aria-describedby="email-addon" required>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios'
import swal2 from '../mixins/swal2'
// this.swalMixin('success', '¡Artículo creado!')
export default {
data() {
return {
userEmail: '',
userEmailNotFound: true
}
},
methods: {
//
}
}
</script>
<style lang="scss" scoped>
</style>
When I said "commented" i meant this:
#extends('layouts.app')
#section('content')
<div class="row justify-content-center">
<div class="col-md-6">
{{-- <question-password-component></question-password-component> --}}
</div>
</div>
#endsection
My view blade laravel like this :
<section class="content">
<product-list :product-data="{{json_encode($products)}}"></product-list>
</section>
In the view blade call vue component
The vue compoponent like this :
<template>
<div class="box">
...
<div class="box-body">
<div class="box-footer">
<!-- call view blade -->
</div>
</div>
</div>
</template>
<script>
export default {
...
}
</script>
In the vue component, I want to call view blade laravel
The view blade like this :
{{$products->links()}}
I want to call it because the pagination only run in view blade
How can I do it?
You'd have to use a slotted component:
Vue Components:
<template>
<div class="box">
...
<div class="box-body">
<div class="box-footer">
<slot></slot>
</div>
</div>
</div>
</template>
<script>
export default {
...
}
</script>
Blade file
<section class="content">
<product-list :product-data="{{json_encode($products)}}">
{{$products->links()}}
</product-list>
</section>
I'm stucked with this code. I can't make it work, and i don't get any errors. Which might mean that i need an aditional dependency? It's simply not showing. Please help me. Thanks.
app.js - file
Vue.component('message', require('./components/Message.vue'));
const app = new Vue({
el: '#app'
});
Message.vue - file
<template>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Message</div>
<div class="panel-body">
I'm the component!
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
ready () {
console.log('Component ready')
}
}
</script>
home.blade.php - file
#extends('templates.default')
#section('content')
<h3>Welcome to Site</h3>
<div class="container">
<div id="app">
<message></message>
</div>
</div>
#stop
You may also need to clear browser cache when working with frontend. On mac this is command + shift + R. Also make sure you did run gulp to compile your js file.
Also make sure you included compiled js file to your layout template before </body>:
<script src="/js/app.js"></script>
I think you're missing the .default from the line
Vue.component('message', require('./components/Message.vue').default);