Laravel Spark Customization in kiosk panel issue

[vivekpandya12]

We are New to Laravel Spark,We want to do Customization in Laravel Kiosk panel and we are trying to add one custom module called “Level Management” with very basic fields.

Below are the steps we have followed to create this module.

1. We created a new view file in \resources\views\vendor\spark\kiosk\levels.blade.php
2. Defined new component at \resources\assets\js\components\kiosk\levels.js

Vue.component('levels', {
    /*
     **Initial state of the component's data.**
     */
    data: function () {
                        return {
            form: {
                **level_name: '', level_status: '', errors: [], adding: false**
            },
        };
    },
    methods: {
       /*
         **Initialize the registration process.**
         */
                      add: function(e) {
            var self = this;
            e.preventDefault();
            this.form.errors = [];
            this.form.adding = true;
            return this.addLevels();
        },
        /*
         **After obtaining the Stripe token, send the registration to Spark.**
               */
             addLevels: function() {
            this.$http.post('/addlevels', this.form)
                        .success(function(response) {
                    window.location = '/';
                })
                .error(function(errors) {
                    this.form.adding = false;
                    Spark.setErrorsOnForm(this.form, errors);
                });
        },
    }
});

1. Loaded new component at /resources/assets/js/components/bootstrap.js

/*
|--------------------------------------------------------------------------

| Laravel Spark Components

|--------------------------------------------------------------------------
|
| Here we will load the Spark components which makes up the core client
| application. This is also a convenient spot for you to load all of
| your components that you write while building your applications.
*/
require('./../spark-components/bootstrap');
require('./home');
require('./kiosk/levels');
require('./settings/profile/update-contact-information'); 

1. Than we ran gulp command on forge server and we got Blank screen in result. So we reverted app.js file on server as it looks like something is going in wrong that with the process we are doing.

We kindly request you to please help us for adding any custom module to spark and please free to suggest if we have missed any steps or we are doing in different way.