Member Since 10 Months Ago

Experience Points

2,180 experience to go until the next level!

In case you were wondering, you earn Laracasts experience when you:

  • Complete a lesson — 100pts
  • Create a forum thread — 50pts
  • Reply to a thread — 10pts
  • Leave a reply that is liked — 50pts
  • Receive a "Best Reply" award — 500pts
Lessons Completed
Best Reply Awards
Best Reply
  • start-engines Created with Sketch.

    Start Your Engines

    Earned once you have completed your first Laracasts lesson.

  • first-thousand Created with Sketch.

    First Thousand

    Earned once you have earned your first 1000 experience points.

  • 1-year Created with Sketch.

    One Year Member

    Earned when you have been with Laracasts for 1 year.

  • 2-years Created with Sketch.

    Two Year Member

    Earned when you have been with Laracasts for 2 years.

  • 3-years Created with Sketch.

    Three Year Member

    Earned when you have been with Laracasts for 3 years.

  • 4-years Created with Sketch.

    Four Year Member

    Earned when you have been with Laracasts for 4 years.

  • 5-years Created with Sketch.

    Five Year Member

    Earned when you have been with Laracasts for 5 years.

  • school-session Created with Sketch.

    School In Session

    Earned when at least one Laracasts series has been fully completed.

  • welcome-newcomer Created with Sketch.

    Welcome To The Community

    Earned after your first post on the Laracasts forum.

  • full-time-student Created with Sketch.

    Full Time Learner

    Earned once 100 Laracasts lessons have been completed.

  • pay-it-forward Created with Sketch.

    Pay It Forward

    Earned once you receive your first "Best Reply" award on the Laracasts forum.

  • subscriber-token Created with Sketch.


    Earned if you are a paying Laracasts subscriber.

  • lifer-token Created with Sketch.


    Earned if you have a lifetime subscription to Laracasts.

  • lara-evanghelist Created with Sketch.

    Laracasts Evangelist

    Earned if you share a link to Laracasts on social media. Please email [email protected] with your username and post URL to be awarded this badge.

  • chatty-cathy Created with Sketch.

    Chatty Cathy

    Earned once you have achieved 500 forum replies.

  • lara-veteran Created with Sketch.

    Laracasts Veteran

    Earned once your experience points passes 100,000.

  • 10k-strong Created with Sketch.

    Ten Thousand Strong

    Earned once your experience points hits 10,000.

  • lara-master Created with Sketch.

    Laracasts Master

    Earned once 1000 Laracasts lessons have been completed.

  • laracasts-tutor Created with Sketch.

    Laracasts Tutor

    Earned once your "Best Reply" award count is 100 or more.

  • laracasts-sensei Created with Sketch.

    Laracasts Sensei

    Earned once your experience points passes 1 million.

  • top-50 Created with Sketch.

    Top 50

    Earned once your experience points ranks in the top 50 of all Laracasts users.

Level 2
7,820 XP
2 months ago
Activity icon

Replied to Unknown Custom Element: <side-bar> - Did You Register The Component Correctly? Laravel

Yeah that was the problem @nakov , Thank you very much for your help!

Activity icon

Replied to Unknown Custom Element: <side-bar> - Did You Register The Component Correctly? Laravel

Nope I will try. Didnt come to mind that maybe run dev would solve the problem because npm run watch is actually npm run development -- --watch

Activity icon

Replied to Unknown Custom Element: <side-bar> - Did You Register The Component Correctly? Laravel

Thanks @nakov for the quick awnser. Unfortunatly, i just tried your solution and i still get the same error. Just tried on IE and Firefox and i Still get the error. I Usually use Chrome

Activity icon

Started a new Conversation Unknown Custom Element: <side-bar> - Did You Register The Component Correctly? Laravel

Hi everyone, i'm stuck with a really weird problem. I have develop an Application with vue, everything is working fine when i use Vue Router but when I try to register a component globally, nothing seems to works. All the application renders correctly but not the sidebar.

I've tried Vue.component('side-bar', require('./components/SideBar.vue')); I've tried Vue.use(SideBar) and new Vue({ el: '#app', router: new VueRouter(routes), components: {SideBar} });

Nothing seems to work. Im using npm run watch and my browser cache is disabled. What i'm I doing wrong here ?


import Vue from 'vue';
import VueRouter from 'vue-router';
import routes from './routes';
import VCalendar from 'v-calendar';
import BootstrapVue from 'bootstrap-vue';
import VueSweetalert2 from 'vue-sweetalert2';
import axios from 'axios';
import SideBar from './components/SideBar'
import VueLodash from 'vue-lodash'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

window.axios = axios;
window.Event = new Vue({});
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

Vue.use(VueLodash, {name: 'loadash'});
Vue.component('side-bar', SideBar);

new Vue({
    el: '#app',
    router: new VueRouter(routes)


<div id="app">
        <div id="wrapper" class="position-relative">
            <div id="content-wrapper" class="pt-0">
                <div class="container-fluid text-center pl-0 pr-0" style="height: 100%;">

<script type="text/javascript" src="{{ asset('js/app.js') }}"></script>



    <ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
            <img class="img-fluid p-4"  alt="FMT Stratégie et performance"/>
        <div class="sidebar-heading">
        <li class="nav-item active">
            <a class="nav-link" href="#" >
                <i class="fas fa-fw fa-tachometer-alt"></i>
                <router-link style="color: white" :to="{ name: 'home'}">Home</router-link>
        <hr class="sidebar-divider">
            <div class="sidebar-heading">
        <li class="nav-item">
            <a class="nav-link" href="#" >
                <i class="fas fa-fw fa-folder"></i>
                <router-link  :to="{ name: 'documents'}" style="color: white">Rapports</router-link>
        <hr class="sidebar-divider d-none d-md-block">
        <div class="text-center d-none d-md-inline">
            <button class="rounded-circle border-0" id="sidebarToggle"></button>

    export default {
        name: "side-bar"
4 months ago
Activity icon

Started a new Conversation Specific Children Update Triggers Parent Method For All Children Instead

I am making an application in vue.js that do some heavy duty calculation of an excel document given by a user.I need to check the validity of a client based on some filter provided by the user. The problem that i have right now is that for some reason, when a children component is updated, the parent method calculateModel(modele) is recalled when it shouldn't . This freezes The UI due to the heavy calculation and is unecessary. This is mainly due to the fact that the data of those component are binded to that method. So when a children is updated it recalls the method for every children

I tried to do this with computed property but it doesn't seem to work either. My first guess would be to bind the data to a variable but the problem is that those variable should be created dynamically because every file has a different number of vehicule and model

Here is my parent calculatedModel Method

     calculateModel(modele) {
                console.log('in calculateModel'); // called 20 time on children update when it shoudn't
                let dataModele = [];
                let distance = [];
                let colonneModele = this.documentHeader['12'];

                for (let i = 0; i <; i++) {
                    if ([i][colonneModele] === modele) {
                return [dataModele, distance];

Here is the template of my parent component creating the problem

<div v-for="modele in valueModele" class="row mt-4 w-100 fmt-card">
 <option-personnalise-form v-if="checkifInFilter(modele)" 
   :options-modele="optionsModele" :year="optionYear"
   :title="" :data="calculateModel("
   :filter-marque="valueMarque" :documentHeader="documentHeader"

Here how the application should work. The parent component read the document. After it dispatches the data to every children component base on the model of a car. So if we have 3 Civic, and 5 Accord, it will give only the civic data to one chidlren and the Accord data to the other one. When the Accord Children is updated. The data of those children should be static from there

4 months ago
Activity icon

Started a new Conversation Vue Custom Event Update Freezes The UI With Simple Number Update

Hi everyone, I have a pretty weird bug I Have a component that find all the possible client and emit the update (only a number ) to the parent . If i don't emit, the children component update instantly. but if emit the value to the Parent, It freezes the UI for about 3 second.

My children component method

 CalculerRecetteGlobale() {
 let recetteService = new RecetteService(
                    this.form.recetteService, this.form.dateEvenement

                let recetteFinancement = new RecetteFinancement(
                    this.form.recetteFinancement, this.form.dateEvenement

                let recetteLocation = new RecetteLocation(
                    this.form.recetteLocation, this.form.dateEvenement

                this.form.dataRecetteGlobale = [];

                for (let i = 0; i <; i++) {

            // Does the filtering of client


                const nb = this.form.dataRecetteGlobale.length;

                this.$emit('onCalculatedRG', nb)

At that point, the children component update perfectly. If I don't emit, everything works fluently

My Parent component template

  <div class='mr-4 ml-4 row'>
 <div class="row mt-4 w-100 fmt-card">

And my method onCalculatedRG is basically only

  onCalculatedRG(number) {
                this.numberRecetteGlobale = number;

If I console.log(number) instead of putting this.numberRecetteGlobale,

  onCalculatedRG(number) {

everything works fluently so it's the update that is taking much time and i dont know why. I really doubt that the processing to determinate the number is the cause of the UI freeze because everything update perfectly if i don't emit to the parent

5 months ago
Activity icon

Replied to Vue Component Not Updating

Thank you very much I found the solution and your awnser helped me. You were right when you said that the this was in fact the FileReader. I just didnt notice at first because there was another problem. The method was receiving async awnser for some reason so I found in the vue Documentation that we need to use this code in order to update

5 months ago
Activity icon

Replied to Vue Component Not Updating

Hi, Thanks for the quick reply!

I tried the fix you propose and it still doesn't work. I logged my this and it seem to be my vue component. I will have a check your video to learn a little bit about those context.

Btw i noticed something in my log that might be the problem. On my get_row_function i get a notice that says This value as evaluated just now

Activity icon

Replied to Vue Component Not Updating

this.header = get_header_rows seems to be the error but i dont know why. The get_header_rows give me the output that is in my post so why is this.headers not setting ?

Activity icon

Started a new Conversation Vue Component Not Updating

Hi everyone, I'm currently trying to update my table with an excel sheet that the user will upload via an input file button.

Im a using the SheetJS tool. The file is read correctly as the headers results give (the one on my excel file)

20) ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "101", "105", "11", "12", "13", "14", "15", "17", "201", "302"]

but for some reason the headers variable doesn't update when it receive the new data even when it's hardcoded . Here is my component

        <h1>Ajouter un fichier</h1>
        <input type="file" @change="processFile($event)">
        <table class="table-striped table-hover table-responsive">
                <th v-for="item in headers">{{item}}</th>
            <tr v-for="item in tickets">
                <td v-for="key in item">


    import * as XLSX from "xlsx";

    export default {
        data() {
           return {
               tickets: [{name:"test"}],
               headers: 'Allo'
        mounted() {
            console.log('Component mounted.')

        methods: {
            processFile(event) {
                var files =, i, f;
                for (i = 0, f = files[i]; i != 1; ++i) {
                    var reader = new FileReader(),
                        name =;
                    reader.onload = function(e) {
                        var results,
                            data =,
                            fixedData = fixdata(data),
                  , {type: 'base64'}),
                            firstSheetName = workbook.SheetNames[0],
                            worksheet = workbook.Sheets[firstSheetName];

    function get_header_row(sheet) {
        var headers = [], range = XLSX.utils.decode_range(sheet['!ref']);
        var C, R = range.s.r; /* start in the first row */
        for(C = range.s.c; C <= range.e.c; ++C) { /* walk every column in the range */
            var cell = sheet[XLSX.utils.encode_cell({c:C, r:R})] /* find the cell in the first row */
            var hdr = "UNKNOWN " + C; // <-- replace with your desired default
            if(cell && cell.t) hdr = XLSX.utils.format_cell(cell);
        return headers;


I didnt put the fixdata in the code because it is not the problem.

Activity icon

Replied to Npm Start Script Missing

Im calling npm run start but i don't have any start script . Is the project supose to have any default start script because i don't have any ? Should i use the server.php of the php artisan serve ?

here what's my package.json look like

  "scripts": {
        "start": "node ./resources/js/app.js",
        "build": "node build/build.js",
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"

The node .resources/js/app.js is technically just

import Vue from 'vue';
import VueRouter from 'vue-router';
import routes from './routes';


let app = new Vue({
    el: '#app',

    router: new VueRouter(routes)

Activity icon

Started a new Conversation Npm Start Script Missing

I know this is a pretty newbie question but I am currently learning Vue and doing the SPA tutorial. When i try to lunch my application by doing the npm run watch, everything builds fine but i dont know how to view my SPA. I tried php artisan serve and it worked but each time i Have to build my application again. I tried to do npm start so it would automaticly find the change on my SPA and reload the page but the start script is missing.

ive added this to my package.json "start": "node ./resources/js/app.js" but i still get the error

npm ERR! errno 1
npm ERR! @ start: `node ./resources/js/app.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\abeliveau\AppData\Roaming\npm-cache\_logs19-08-19T12_33_42_159Z-debug.log

Is there any default script when creating a new application that should be there or am I missing something. On witch port should the npm run watch launch my application ?

Could someone point me to a specific tutorial for this ?

Thank you very much

5 months ago
Activity icon

Replied to FirstOrCreate Not Able To Find The Data. Duplicate Entry For Key SQL Exception

Nop the primary key is actually an autoincrement. The whole database is already structured like this so we would have to lose every record we have so far in order to make that change.

Activity icon

Replied to FirstOrCreate Not Able To Find The Data. Duplicate Entry For Key SQL Exception

Hi, does it change something to your awnser if it's firstOrCreate Instead ? I did a little typo. The code is

$newLead = self::firstOrCreate([
            'fb_lead_id' => $leadJson['id'],
            'facebook_form_fk' => $formId,
            'facebook_campaign_fk' => (isset($newCampaignId)) ? $newCampaignId : null,
            'facebook_ad_fk' => (isset($newAdId))? $newAdId : null,
            'platform' => $campaignPlatform,
            'created_at' => $leadJson['created_time']
Activity icon

Started a new Conversation FirstOrCreate Not Able To Find The Data. Duplicate Entry For Key SQL Exception

Hi everyone

I have made an application that retrieve the lead from a Facebook Page by doing some API calls. In my database, I have a field 'fb_lead_id' that is a unique key because every facebook lead has his own id. That way when i download lead again, The Eloquent model were able to only download the new lead and avoid duplicate. Every thing was working fine when doing some manual download only (clicking a button).

Our boss asked us to implement the facebook webhook of the lead so that they would go automatically in the database. Since then, the leads received from the webhook are going in the database but it is now impossible to do some manual download because the firstOrCreate method doesn't seem to reconize that it's the same lead as the one already in the database via the webhook.

I always get this error

SQLSTATE[23000]: Integrity constraint violation: 1062 Duplicate entry '454473502074158' for key 'facebook_leads_fb_lead_id_unique' (SQL: insert into `facebook_leads` (`fb_lead_id`, `facebook_form_fk`, `facebook_campaign_fk`, `facebook_ad_fk`, `platform`, `created_at`, `updated_at`) values (454473502074158, 155, 258, 1072, Facebook, 2019-08-13 13:25:15, 2019-08-13 13:28:36))

Is there a way to do some kind of insert or ignore ? Here is my FacebookLead Model where the createFacebookLeadInDb method is used to create the lead

protected $table = "facebook_leads";
    protected $fillable = [

    public static function createFacebookLeadInDb($leadJson,$formId,$newCampaignId, $newAdId,$campaignPlatform){
        $campaignPlatform = ($campaignPlatform == 'fb') ? 'Facebook' : 'Instagram';
        $newLead = self::updateOrCreate([
            'fb_lead_id' => $leadJson['id'],
            'facebook_form_fk' => $formId,
            'facebook_campaign_fk' => (isset($newCampaignId)) ? $newCampaignId : null,
            'facebook_ad_fk' => (isset($newAdId))? $newAdId : null,
            'platform' => $campaignPlatform,
            'created_at' => $leadJson['created_time']
        return $newLead->id;
    public function form() {
        return $this->belongsTo('App\FacebookForm',"facebook_form_fk","id");

    public function leadsMapping() {
        return $this->hasMany('App\FacebookLeadMapping','facebook_lead_fk', "id");
    public function ad() {
        return $this->belongsTo('App\FacebookAd', "facebook_ad_fk", 'id');

    public function getAdId() {
        try {
            return $this->ad->facebook_ad_id;
        } catch(\Exception $e){
            //The lead  as no campaign and thus no ad
            return null;