Web Developer at Premier

Member Since 5 Years Ago


Experience Points

1,815 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 18
88,185 XP
6 months ago
Activity icon

Replied to Passing User Data To Be Used Within Vuejs Code Base.

@BITCOINBOY - Thanks for the @json() reminder :-0 and @ricardo thasnk for the response too. :-)

6 months ago
Activity icon

Replied to Starting A New Application, Choices For Frontend. Laravel Itself, React, Vue And So On

I would use Laravel / Lumen to build the api first approach, so basically thats your backend/API sytem, this way then you can connect either a full SPA or a combination, and then its also set to then use on iOS and other formats. Hopes this helps

Activity icon

Started a new Conversation Passing User Data To Be Used Within Vuejs Code Base.

Whats the best practice or advice on how to access a the current logged in user so it can be accessed from various VueJs components etc.

Currently I'm looking and doing the following.

With in the top of my page and head tag i have the following:

        window.USER = {!!json_encode([
                'name' => auth()->user()->fullname,
                'email' => auth()->user()->email,
                'publication' => auth()->user()->publication,
            ]) !!};

Which is outputted as etc

        window.USER = {"name":"Simon Davies","email":"[email protected]","publication":"Freelancer"};

So then i can access the required details as

export default {
    data() {
        return {
            is_active : false,
            user : window.USER,

So just wanting other reviews and suggestions and to see if there any issue in what im doing or even if theres a better way.

This is not a SPA but uses VueJs components to perform/do things etc within the app.

10 months ago
Activity icon

Replied to Laravel - How To Generate Page Dynamically

@CRONIX - yeah! i would have done the typehinted both method as the second one would never get the page details if it was just a parent sent, so you could do it say in the controller like..


show($page, $childpage ==null) {

   $page = Page::details($childpage);
} else {
    $page = Page::details($page);

The other method using the route where clause i mentioned could reduce it though my thoughts

visit: /film/star-wars

$this->get('/{page}', '[email protected]')->where('page', '.*');


    $page = Page::where('page_identifier',$page); //// so where page_identifier = film/star-wars


Thanks for the reply, just whats best practice :-)

Activity icon

Replied to Laravel - How To Generate Page Dynamically

@CRONIX - Nice solution, but how would you then take it further regards to child pages?

So /{page}/{child-page?}

The route model binding would be on the first variable so would need to create your own ???

Old post but still relevant these days

Looking at present there is a way to use the single route param, but still get the url request.

$this->get('/{page}', '[email protected]')->where('page', '.*');

The important part is where('page', '.*') where it then allows the forward slash in the url.

So if we then do.

So the controller would then get

parent/child or parent/child/child

you could then replace the forward slash to a '-' so


then do the search on the slug named that???

Just thoughts

1 year ago
Activity icon

Started a new Conversation Safari & IE11, Edge Render/display Issue With Component (vue2-calendar)

I am using this following vue component.

All is well and got to work etc, but then when i then went to test on safari the dates do not display.

Chrome and Firefox all fine and dates show. On Safari, IE11 and Egde they are not by the look of it being rendered.

Has anyone come across this at all? I have left an issue on the github repo as well.

Using their demo i have added a date for an example.

Run on chrome i see the date on safari I do not?

1 year ago
Activity icon

Replied to Add A Class To A Newly Created Item Within A V-for Loop Via Input

hi @bobbybouwmann thanks for the help, when I was on the bus on the way home today from work, got an idea, of another solution (it's my thinking time).

And made it easier as it also adds and removes and gives me the quick flash/notification I require.

And that's was to use <transition-group>, which did the job. I have added a simple example below in case others etc might be curious :-)

Again thanks.

<transition-group  name="fade">
    <buttton v-for="tag in orderedTags" :key="" @click="deleteTag(tag)">{{}}</button>

.fade-leave-active {
  transition: opacity 0.5s;
.fade-leave-active {
  opacity: 0;
.fade-enter-active {
  background: #3490dc;
  color: #ffffff;

.fade-leave-active {
  background: white;
  color: #3490dc;
1 year ago
Activity icon

Replied to Add A Class To A Newly Created Item Within A V-for Loop Via Input

Ah! yes, understand. as mentioned just changed my class to:

:class="{added :}"

As the = true will only be applied when its added via the input, the rest or pre-list comes from the db will not have it set.


Just will work out (tomorrow :-)) how to then remove it, setTimeOut type thing.

Activity icon

Replied to Add A Class To A Newly Created Item Within A V-for Loop Via Input

so you're saying that after I have performed the push to the tags array, then loop through the tags array and detect which is the new one created and then add a class to that.?

So would you add the index value on an id of the tag, something like<div :id="'tagid-' +"... then simply do a querySelector on the list for this ID and add class accordingly?

Activity icon

Started a new Conversation Add A Class To A Newly Created Item Within A V-for Loop Via Input

For example, a have a list of tags, and new ones are added via an input form.

What I would like to happen, is to add a temporary class to only this new tag that's been added. which will give it a different colour, to show the user where it is on the list as well as like a confirmation of it being added.

I have tried the normal :class="{myClass : onTrueValue}" but that's then added to all the tags in the v-for loop.

2 years ago
Activity icon

Replied to How To Manage A Re-write Of A Current Github Project

Thanks @jlrdw for the response will have a look.

2 years ago
Activity icon

Started a new Conversation How To Manage A Re-write Of A Current Github Project

I have current Github project that, is in need of a re-write. And I would like to know what would be the best way to perform this.

  1. The easy way would be to create a new repo and point others going to the current older version to the new one, once completed.
  2. Create a new branch clean everything out that needs to be binned etc, then re-write it here.

I would like to perform the 2nd point as the GitHub name is already in use etc. BUT how would I stop prevent users that are using the current one v.0.1.2 not over writing their version and screwing up their application, when I push to master.

Would I need to give it a completely new version/tag starting etc like v.2.0.0, before merging etc


2 years ago
Activity icon

Replied to 500 Http Error - AJAX

I tend to pass the desired URL within the data attribute as somehting like:

 ... data-url="{{route('name',$}}">NAME</button>

Then us js to get the data URL, and set that to a var, with what js method you like, kQuery/VanillaJS etc similar to how @Ruffles mentioned

2 years ago
Activity icon

Started a new Conversation Running Dusk On A Local Ubuntu Server, Is Is Possible?

I work on site/projects through a local Ubuntu server I have that is accessed via ssh and samba.

The trouble when I was going to attempt to try and test Dusk is that i'm getting various errors, and I pin this down to the fact that, it cannot find chrome etc, as its trying to run on the server.

So my question is, that is it possible to set up, so I can easily run any Laravel Dusk tests through this server?

2 years ago
Activity icon

Started a new Conversation Simple Login Code/package

I am converting a simple / few page login back end, into php. And was wondering if anyone has any suggestions on what to use or tuts / links to view on how to create a simple but secure log in system.

As its conversion etc its not being re-written in laravel so cannot go this route as it would be over kill for whats required even Lumen etc would be.

The pages are mainly simple to convert but its the log in process i need to bolt on to it.

I can use some old ways (some of my older code, PDO of cause) but was just wondering if others had any simple solutions, to save me form re-inventing etc, bolting on to packages could be an option if they are soley for this and not overkilll, login only no register etc

I am using / will be using the Illuminate/Eloquent package to manipulate the DB etc side of things, if this helps a little.

Thanks in advance.

2 years ago
Activity icon

Started a new Conversation Prefixing API Routes With A Version Number - Best Approach

I am currently doing it like the following:

    $this->group(['prefix'=>'v1'], function (){... normal routes here });

So calling would be

I was wondering if there is a better approach to doing this, or it seems fine, as i can simply add version 2 when required after

    $this->group(['prefix'=>'v1'], function (){... normal routes here });

     $this->group(['prefix'=>'v2'], function (){... normal routes here });
2 years ago
Activity icon

Replied to Series Listings Page Showing Course Completed When Not

normally get a tweet about, and I know there's new content but just checking this time, but there's a tweet about too now :-)

Activity icon

Started a new Conversation Series Listings Page Showing Course Completed When Not

I have noticed today as looking for new content that when visiting, the ones I'm interested in, I look for the Completed message or percentage.

But looking today EG at the Learn Vue 2: its say Completed and 29 videos, but I know I only had 27 the other day, so checking it, sure enough, there are two new videos 28 and 29 unticked waiting for me to view.

ButI see a green tick and completed, on the listings page and at the top of the series page ( is shows as 100% Completed

Not sure if this is a caching issue or what! as not sure how you're achieving this, and the course says updated 16mins ago, so they seem recent.

2 years ago
Activity icon

Replied to Wildcard In Url Route Not Working In Laravel 5.4

First of at the bottom of the textaread to add/edit comments it the following: Use Markdown with GitHub-flavored code blocks click this and it will show how to add code etc

to test put a dd() within the following to see what's output, this should return a value

Route::get('cards/{card}', '[email protected]');

or wildcard version

Route::get('cards/{card?}', '[email protected]');

public function show($card) { 
Activity icon

Replied to Wildcard In Url Route Not Working In Laravel 5.4

what you doing to debug? which URL is causing the error? re-add your routes, also your CardsController show method?

Activity icon

Replied to How To Prevent Deletion Of Element

as mentioned above but also target the text directly

<div class="a">
   <div class="b">
       <img src="url here">
  <div contenteditable="true"> text goes here</div>
Activity icon

Replied to Save $request To Database?

if you have one of the latest mySQL DB servers you can store json within, so hence return it back

Activity icon

Replied to Laravel Post Error

is this the actual full form part?

<form method="POST">

Or have you something else like

<form method="POST" action="/submit" >...</form>

How is the form submitted, if you dont have an action then it will not go the route submit but will just submit to the same page and that means

it does not have a post route for Route::post('/'.....) which its looking for

So add the action to the form so it can submit to your requested route

Activity icon

Replied to Laravel 5.4 Upgrade Error On Password Field Method Illuminate\View\View::__toString()

are you able to elaborate more with more error code, and or and example of what you did to resolve it temporary etc, so we can be able to assist further

2 years ago
Activity icon

Replied to Middleware Request Has No Data, ...sometimes

could you post a bit more code as in what are your middlewares etc

Activity icon

Replied to Can't Get Laravel Mix To Work - Frustration LIMIT Reached

not really, but if you're trying to combine a mix of es6 and normal files then yes.

You could always create to js files one as a bootstrap / libraries file and the other with the components etc, i do this as file size can be large.

Unfortunately, @JefferyWay cannot catch or interoperate all eventualities and as it's a new way, its going to have its bugs, and issues, nothings perfect and not all things can be caught until tested in the public domain.

Without these issues or hurdle's we cannot learn, unfortunately we all go through this frustrating thing with things in life as well as programming etc

We learn by others keep it up :-), im off to bed so other might be able t assist you know sorry.

Activity icon

Replied to Can't Get Laravel Mix To Work - Frustration LIMIT Reached

The grid.js error might because its looking for a global variable window.UIkit, so you would need to load in the UIkit and assign it to the global variable something like this might work, in a bootstrap file loaded first??

window.UIkit = require('uIkit');
Activity icon

Replied to Validating Image URL?

you might need to do a custom validation set up, so you can do the check and then use php to try and get the file to do that check, don't think getFilecontents etc is part of a check etc??

or you might have to do it a bit later on after the normal validation passes?

Activity icon

Replied to Can't Get Laravel Mix To Work - Frustration LIMIT Reached

ok, the last bit is that you will need to edit your public folder settings, but then you cannot compile it then all in to there after wards.

use mix.copy() to move files into there to use later

Activity icon

Replied to Can't Get Laravel Mix To Work - Frustration LIMIT Reached

what does your grid.js look like and how are you calling the uikit.js??

Activity icon

Replied to How To Get Response Ajax On The Vue.js 2?

just a little question on this.

If your getting the store ID and passing this to the component as a prop. So surely you could also pass in another prop that tells if the store has already been liked? So getting this data via the db call to the view, thus saving having to do a check after its loaded, so something like:

<favorite-button :storeid="23" :favorited="true"></favorite-button>

So using the favorited property to change the button accordingly?, so need for the checkFavoriteStore call and saving time on additional http request etc

Don't know your code or what's its doing etc but just a thought??

Activity icon

Replied to How To Get Response Ajax On The Vue.js 2?

if your returning a result then assign the call to a variable so tyr:

var res = this.$store.dispatch('checkFavoriteStore', payload);

then you can get access to the response via the var res. I beleive the events will return it back to you

Activity icon

Replied to How To Get Response Ajax On The Vue.js 2?

surely with the location.reload method whether your returning a response within 1500 milliseconds the browser is reloaded and any response is lost, why you reloading it? So no time to do anything?? Why you relaoding anyway

Activity icon

Replied to Submit A Vue Form With A Submit Button Outside The Form

you could remove the click event and add it to the button, something like:

<form method="POST" action="" id="myForm">
    <input name="name" type="text" >

 <button type="submit" class="btn btn-success" @click="submitItem($event)">Submit</button>

Then as mentioned by @theUnforgiven

methods: {

not tested and might need a little more work?

Activity icon

Replied to Multiple Image Upload [suggestions]

as also mentioned i have just a lot and it's really customizable and user-friendly.

2 years ago
Activity icon

Replied to Errors When Trying To Update Via HTTP Route.

whats your route like for say api/profiles/ what class is it calling and does it have the method requested?

Also are you using Route::put(... as your send through using a PUT request via axios, and have you put the

<input name="_method" type="hidden" value="PUT"> 

or use 

{{ method_field('PUT') }}

within your form or sending that across with your ajax call.

This error is normally yo do with the PUT, DELETE, POST, GET etc request your setting within your form/ajax call and your actual route??? Make sure they all match with your request

Activity icon

Replied to Error Pages Based On Routes

you can create a folder called errors within your root views folder.

Then within there create several files with the error code as the name:

views -
    errors -

Then Laravel will automatically look for these when catching the error.

As catching whether it's an admin section or public not sure how you could do this, but within the blade page you could check for a logged in user etc and return our put a different content etc?

You could edit the Exceptions/Handler.php render method to catch and return these exceptions?

Activity icon

Replied to Error When Running "npm Run Dev" Command Laravel 5.4

have you tried to update your node and npm current stable version is node 6.9, a few people have had issues fixed simply by updating.

once done remove your node_modules folder and re run npm install, just to make sure you get it fresh

Activity icon

Replied to Laravel Mix Webpack Error

we had the same issue on one of our machines (running valet) and so updated the MAC to node v6.9 first of all but still an issue.

So we then figured out that the package.json file had :

 "dev": "node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js”,

so the fix was to then npm install cross-env first of all, then amend the package.json file to:

 "dev": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js”,

Notice the change was node_modules/cross-env/bin/cross-env.js to cross-env

This seemed to fix it for us.

2 years ago
Activity icon

Replied to Compiling Bourbon/Neat?

Anyways it was the following that got it working for me:

var elixir = require('laravel-elixir');
var bourbon = require('bourbon').includePaths;
var neat = require('bourbon-neat').includePaths;

elixir(function(mix) {
     mix.sass('main.scss',  'public/main.min.css', null, { includePaths: bourbon.concat(neat) } )

As I was setting the file path I missed the third setting null.

if you don't set the path then it would be:

     mix.sass('main.scss',  null, null, { includePaths: bourbon.concat(neat) } )
Activity icon

Replied to Compiling Bourbon/Neat In Elixir

@christopher have you tried:

     mix.sass('app.scss', null, null, { includePaths: bourbon.concat(neat) } )


notice the double null?

2 years ago
Activity icon

Replied to Passport And Consuming Your Own Api - 401 Unauthorized

Ignore me, the answer was Stupidity...

I need to be logged in on my backend for it to work. Each time I was reloading the front end browser tab with clear cache as well so logging me out at the same time hence the unauthorised call.

Thanks for the assistance and help.

Activity icon

Replied to Passport And Consuming Your Own Api - 401 Unauthorized

through postman is ok, using the three header values, and also within the axios call.

But according to the video he mentions and his code he does not add the headers to the VueJS file saying that Laravel handles its.

But then reading further within the docs I noticed, the X-CSRF-TOKEN code part, which was not mentioned within the video

So I have added this as follows:


    window.axios.defaults.headers.common = {
        'X-Requested-With': 'XMLHttpRequest',
            'X-CSRF-TOKEN': Laravel.csrfToken

But running, It still fails

Perhaps its an axios issue??

Below is the header i get, might help

    Request Method:GET
    Status Code:401 Unauthorized


    Accept-Encoding:gzip, deflate, sdch
    User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.95 Safari/537.36
Activity icon

Replied to Passport And Consuming Your Own Api - 401 Unauthorized

Thanks for the reply, in the demo around 11:43 in theres not mention of adding headers, it just works?

Could it be because i'm using axios rather than vue-resource as vue-resource is discontinued i went straight for axios?

Also adding the Auth code here is this not bad as its viewable within your source code?

Activity icon

Started a new Conversation Passport And Consuming Your Own Api - 401 Unauthorized

I have seen the Passport video and completed all but the only one issue I am having is with the end part, about consuming your own API within itself/site.

I have still receiving the same [401 Unauthorized] message.

I am using VueJS for a simple example below.

    methods : {


                .then((res) => {
                    (res) => {

But if I add the header as below with the Auth code etc all works fine?

            headers : {
                'Content-Type' : 'application/json',
                'Accept' : 'application/json',
                'Authorization' : 'Bearer ...PERSONAL ACCESS TOKEN HERE...'
        .then((res) => {

Is there anything thats changed since that video especially using Laravel version 5.3?

2 years ago
Activity icon

Started a new Conversation Doing A Application-only Authentication With Social API's

Can i use Laravel Socialite to perform Application-only authentication, or does it need the user interaction.

Basically i would like for the application to connect to a single twitter account and read-only, and then display the top number of tweets on to the app, so its needs to do all the auth behind the scenes etc no pop up etc, or is there another way to do this?

If either can you point in the right direction as all socialite EG's i'm seeing/searching all using it to log users in, but thats not want i'm after, i'm looking to do our own version of the timeline preview plugin, so we have control over more things etc, this would also include a Facebook iteration as well.

Activity icon

Replied to Dynamic Class Added After Output Is Removed On Re-render Filter

Well further to this please see the link here for how i fixed this at the same time as another related question.

Activity icon

Replied to Is There A Vue JS (v2) Example/version Of Waypoints - InView

Not to worry, with a little spit and saw dust, I have managed to implement Waypoints into the VueJS components.

I added it as a methods within the parent component, as :

    initInView() {
        let wrappers = document.querySelectorAll('.CONTAINER_WRAPPER');
        _.forEach(wrappers, function(value) {
            new Waypoint.Inview({
                element: value,
                enter: function(direction) {
                    if(direction==='down') {

Then it is called in two places.

  mounted() {
  updated() {

i have this is the updated function as well as I have filtering attached to my child components and as they clear the dynamic class name I have to re-init the waypoint code, otherwise they remain hidden, hope this helps anyone else.

Activity icon

Started a new Conversation Is There A Vue JS (v2) Example/version Of Waypoints - InView

I use Waypoints & its In View shortcut (, but I would like to implement it in a VueJS project and wondering if there is a VueJS way to do this or if anyone has implemented it within VueJS that might be able to help (non jQuery if poss.) Thanks

2 years ago
Activity icon

Replied to Dynamic Class Added After Output Is Removed On Re-render Filter

while I'm looking to, there is an updated option, that is called each time the filter is activated.

So at the moment I'm thinking, that ill will convert my dynamic, class addition on scroll, via this component, and then I should be able to call the same method, when the 'updated' option is then called to re-init the visible items.

Dependant if I can transfer the scroll/in view code into the Vue Component, let me know if there are / is a better way, thanks for ready so far.