Member Since 3 Months Ago

Experience Points 130
Experience Level 1

4,870 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 0
Best Reply Awards 0
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.

05 Apr
3 months ago

justinhartman left a reply on Spark & Vue-Router...

If you are looking for an updated way of achieving this using Laravel 5.8 and Spark 2.0 then have a look at this example I posted in response to @garethdaine's work above.

justinhartman left a reply on Spark For A SPA? Start From Scratch Or Build On What's There?

So I think I've managed to get @garethdaine's example operational using Laravel 5.8, Spark 2.0 and Vue2. I thought I would share it with you guys.

Start off by editing your home.js Vue component. As we are using the tab-state mixin and the sparkHashChanged event like in the example above, the path and methods have changed. Note that ready() has changed to mounted().

Here's what it should look like:

Vue.component('home', {
    props: ['user'],

     * Load mixins for the component.
    mixins: [require('./../../../spark/resources/assets/js/mixins/tab-state')],

    mounted() {

You might need to play with the path location, specifically ./../../../ but the above worked for me.

Then, create your custom Vue component. For the sake of this example let's save this file as /resources/js/components/custom.js.

Vue.component('custom-index', {
    props: ['user'],

     * The component's data.
    data() {
        return {
            custom: []

     * The component has been created by Vue.
    created() {
        var self = this;

        Bus.$on('sparkHashChanged', function (hash, parameters) {
            if (hash == 'custom') {

    methods: {
         * Get all the custom information for the application using
         * the index route to your Custom Controller.
        getAllcustom() {
                .then(response => {
                    this.custom = response.data.custom;

Note that the getAllcustom() method is meant to received a JSON return object by calling the index() method from your Controller. Your Controller should end up looking something like this:

public function index()
    $data = $this->custom->all();
    return response()->json(
            'custom' => $data

Create a Blade for the Vue component. You can save this as /resources/views/components/custom.blade.php:

<custom-index :user="user" inline-template>
        <div class="card card-default" v-for="item in custom">
            <div class="card-header">@{{ item.name }}</div>
            <div class="card-body">@{{ item.description }}</div>

As the getAllcustom() returns an array of all our custom items you loop through them in Vue by using the v-for option.

Finally, you need to setup your Home Blade to use the spark-settings-tabs you defined in the home.js component and then call your tabbed content via a URL hash. Here's an example of how you implement it:


<home :user="user" inline-template>
    <div class="container">
        <div class="row">
            <div class="col-md-3 spark-settings-tabs">
                    <h3 class="nav-heading ">
                    <ul class="nav flex-column mb-4 ">
                        <li class="nav-item ">
                            <a class="nav-link" href="#custom" aria-controls="custom" role="tab" data-toggle="tab">
                                <svg class="icon-20 " viewBox="0 0 20 20 " xmlns="http://www.w3.org/2000/svg ">
                                    <path d="M3 8V6c0-3.3 2.7-6 6-6s6 2.7 6 6v2h1c1 0 2 1 2 2v8c0 1-1 2-2 2H2c-1 0-2-1-2-2v-8c0-1 1-2 2-2h1zm5
              6.7V17h2v-2.3c.6-.3 1-1 1-1.7 0-1-1-2-2-2s-2 1-2 2c0 .7.4 1.4 1 1.7zM6 6v2h6V6c0-1.7-1.3-3-3-3S6 4.3 6 6z"></path>
                                {{__('Custom Items')}}

            <div class="col-md-9">
                <div class="tab-content">
                    <!-- Custom Items Listing Tab Page. -->
                    <div role="tabcard" class="tab-pane active" id="custom">

It took me a while to figure this out but thanks to @garethdaine's example and tinkering in the Spark source code I figured out how to pull this all together.

Hope this helps someone else!