justinhartman

justinhartman

Member Since 1 Month Ago

Experience Points 30
Experience Level 1

4,970 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
Lessons
Completed
Best Reply Awards 0
Best Reply
Awards
  • Start Your Engines Achievement

    Start Your Engines

    Earned once you have completed your first Laracasts lesson.

  • First Thousand Achievement

    First Thousand

    Earned once you have earned your first 1000 experience points.

  • One Year Member Achievement

    One Year Member

    Earned when you have been with Laracasts for 1 year.

  • Two Year Member Achievement

    Two Year Member

    Earned when you have been with Laracasts for 2 years.

  • Three Year Member Achievement

    Three Year Member

    Earned when you have been with Laracasts for 3 years.

  • Four Year Member Achievement

    Four Year Member

    Earned when you have been with Laracasts for 4 years.

  • Five Year Member Achievement

    Five Year Member

    Earned when you have been with Laracasts for 5 years.

  • School In Session Achievement

    School In Session

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

  • Welcome To The Community Achievement

    Welcome To The Community

    Earned after your first post on the Laracasts forum.

  • Full Time Learner Achievement

    Full Time Learner

    Earned once 100 Laracasts lessons have been completed.

  • Pay It Forward Achievement

    Pay It Forward

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

  • Subscriber Achievement

    Subscriber

    Earned if you are a paying Laracasts subscriber.

  • Lifer Achievement

    Lifer

    Earned if you have a lifetime subscription to Laracasts.

  • Laracasts Evangelist Achievement

    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 Achievement

    Chatty Cathy

    Earned once you have achieved 500 forum replies.

  • Laracasts Veteran Achievement

    Laracasts Veteran

    Earned once your experience points passes 100,000.

  • Ten Thousand Strong Achievement

    Ten Thousand Strong

    Earned once your experience points hits 10,000.

  • Laracasts Master Achievement

    Laracasts Master

    Earned once 1000 Laracasts lessons have been completed.

  • Laracasts Tutor Achievement

    Laracasts Tutor

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

  • Laracasts Sensei Achievement

    Laracasts Sensei

    Earned once your experience points passes 1 million.

  • Top 50 Achievement

    Top 50

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

05 Apr
1 month 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() {
        this.usePushStateForTabs('.spark-settings-tabs');
    }
});

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') {
                self.getAllcustom();
            }
        });
    },

    methods: {
        /**
         * Get all the custom information for the application using
         * the index route to your Custom Controller.
         */
        getAllcustom() {
            axios.get('/yourcontroller')
                .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>
        <div class="card card-default" v-for="item in custom">
            <div class="card-header">@{{ item.name }}</div>
            <div class="card-body">@{{ item.description }}</div>
        </div>
    </div>
</custom-index>

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:

@extends('spark::layouts.app')

@section('content')
<home :user="user" inline-template>
    <div class="container">
        <div class="row">
            <div class="col-md-3 spark-settings-tabs">
                <aside>
                    <h3 class="nav-heading ">
                        {{__('Navigation')}}
                    </h3>
                    <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>
                                </svg>
                                {{__('Custom Items')}}
                            </a>
                        </li>
                    </ul>
                </aside>
            </div>

            <div class="col-md-9">
                <div class="tab-content">
                    <!-- Custom Items Listing Tab Page. -->
                    <div role="tabcard" class="tab-pane active" id="custom">
                        @include('components.custom')
                    </div>
                </div>
            </div>
        </div>
    </div>
</home>
@endsection

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!