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);
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 am passing a json encoded data to my Vue component as a prop, when I am printing the whole prop variable then it is showing that the data has successfully received, but I am not able to parse the data.
profile.blade.php
#extends('layouts.app')
#section('content')
<my-profile user-details="{{ json_encode($userDetails) }}"></my-profile>
#endsection
MyProfile.vue
<template>
<div class="container">
<div class="row justify-content">
<div class="col-md-3" id="profile-image">
<img class="img-fluid rounded" src="https://www.w3schools.com/bootstrap4/paris.jpg" alt="Profile Image">
</div>
<div class="col-md-12">
<p>{{userDetails}}</p>
<p> Name: {{ userDetails.first_name }} </p>
</div>
</div>
</div>
</template>
<style>
#profile-image {
margin-bottom: 30px;
}
</style>
<script>
export default {
props: ["userDetails"]
}
</script>
Output
{"user_id":2,"first_name":"Shan","last_name":"Biswas","email":"shanpro.2015#gmail.com","phone":"9508168983","created_at":"2019-05-03 05:43:17","updated_at":"2019-05-03 05:43:17"}
Name:
You need to bind the value to the component as dynamic and not static.
So change your blade file to:
#extends('layouts.app')
#section('content')
<!-- see the colon in front of the props, that is a shortcut for v-bind:prop-name -->
<my-profile :user-details="{{ json_encode($userDetails) }}"></my-profile>
#endsection
Otherwise are all values passed to the component as a simple string.
Change this:
<my-profile user-details="{{ json_encode($userDetails) }}"></my-profile>
with this:
<my-profile user-details='#json($userDetails)'></my-profile>
// Pay attention to single quotes instead of double
This worked for me.
Update profile.blade.php to following!
#extends('layouts.app')
#section('content')
<my-profile user-details="{{ $userDetails }}"></my-profile>
#endsection
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.
Hi I use this package for Laravel 5.2 but it doesn't work for me. Can someone help me ?
<script src="/vendor/unisharp/laravel-ckeditor/ckeditor.js"></script>
<script src="/vendor/unisharp/laravel-ckeditor/adapters/jquery.js"></script>
<script>
$('textarea').ckeditor();
// if class is prefered.
// $('.textarea').ckeditor();
</script>
My Console Screenshot
please try to use jquery version 1.12.0, i had same issue but got it resolved using j v1.12.0
By default you may use id of the textarea in replace function.
my page code
#extends('layouts.app')
{!! Html::script('js/jquery.min.js') !!}
#section('content')
<div class="container spark-screen">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="panel panel-default">
<div class="panel-heading">Dashboard</div>
<div class="panel-body">
<script src="/vendor/unisharp/laravel-ckeditor/ckeditor.js"></script>
<script>
CKEDITOR.replace( 'article-ckeditor' );
</script>
</div>
</div>
</div>
</div>
</div>
#endsection
I got the same issue but using the cdn link <script src="//cdn.ckeditor.com/4.5.7/standard/ckeditor.js"></script> instead, solved my problem.
check this
Sometimes yo may need to point your source one level higher from the current directory.
You achieve this by adding ../ to your source directory. Check it below
<script src="../vendor/unisharp/laravel-ckeditor/ckeditor.js"></script>
<script src="../vendor/unisharp/laravel-ckeditor/adapters/jquery.js"></script>
<script>
$('textarea').ckeditor();
// if class is prefered.
// $('.textarea').ckeditor();
</script>