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>
Related
I'm confused why it didn't work on my vue file when Im trying to auto import components in my view, the documentation says link you just need to set the components into true inside nuxt.config.js file, I tried but it doesn't work, do I properly import the custom vue?
this is my directory
Components
>Timeline.vue
>TimelineItem.vue
This will works fine but I want to automate and remove the importfrom script
<template id="timeline-template">
<ul class="timeline">
<li
is="TimelineItem"
v-for="(item, index) in items"
:key="index"
:item="item"
></li>
</ul>
</template>
<script>
import TimelineItem from './TimelineItem.vue'
export default {
components: { TimelineItem },
props: ['items'],
}
</script>
So I just updated my script like this I just removed the import file since I want to automate it
<script>
export default {}
</script>
Then in my nuxt.config.js I set the component into true
components: true,
This is my TimelineItem.vue
<template id="timeline-item-template">
<li class="timeline-item">
<div class="timeline-badge" :class="item.icon_status">
<i :class="item.icon_class"></i>
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">{{ item.title }}</h4>
<div class="timeline-panel-controls">
<div class="controls">
<a
v-for="(control, index) in item.controls"
:key="index"
:control="control"
>
</a>
</div>
<div class="timestamp">
<small class="text-muted">{{ item.created }}</small>
</div>
</div>
</div>
<div class="timeline-body">{{ item.body }}</div>
</div>
</li>
</template>
<script>
export default {
props: ['item'],
}
</script>
Updated
I tried using <TimelineItem/> instead using is="TimelineItem but it doesn't work
<template id="timeline-template">
<ul class="timeline">
<TimelineItem v-for="(item, index) in items" :key="index" :item="item" />
</ul>
</template>
<script>
export default {
props: ['items'],
}
</script>
OP's issue was fixed by importing TimelineItem inside of components.js!
Everything is working fine, as expected.
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..
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>
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.
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);