Jan 16, 2017

Level 1

Adding tabs to the settings screen

Hi there,

I am very new to this Laravel stuff, so, please make any replies as basic as possible.

I am trying to add tabs to the settings screen in Laravel Spark. I have followed most of the steps found at a different discussion on the same subject found here: https://laracasts.com/discuss/channels/spark/adding-a-settings-tab?page=0 in the following fashion:

1.) I edited the resources/views/vendor/spark/settings.blade.php file and added:

<!-- New Tab -->
<div class="panel panel-default panel-flush">
    <div class="panel-heading">
        New Tab Heading
    </div>
    <div class="panel-body">
        <div class="spark-settings-tabs">
            <ul class="nav spark-settings-stacked-tabs" role="tablist">
                <!-- List Something Link -->
                <li role="presentation">
                    <a href="#something" aria-controls="something" role="tab" data-toggle="tab">
                        <i class="fa fa-fw fa-btn fa-something"></i>List Something
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>

and further down, within the tab-content div.

<!-- Add Something -->
    <div role="tabpanel" class="tab-pane" id="something">
        @include('spark::settings.addsomething')
    </div>

2.) I created a new file resources/views/vendor/spark/settings/addsomething.blade.php the contents of which are as follows:

<spark-addsomething :user="user" inline-template>
    <div>
        <!-- Add a Tool -->
        @include('spark::settings.addsomething.include-something')
        
    </div>
</spark-addsomething>

3.) I created another new file at resources/views/vendor/spark/settings/addsomething called include-something.blade.php the contents of which so far are just:

<spark-include-something :user="user" inline-template>
    <div>
        <div class="panel panel-default" v-if="user">
            <div class="panel-heading">Add Something</div>
        </div>
    </div>
</spark-include-something>

4.) Realising I needed to update some JS components, under resources/assets/js/spark-components/settings I have created new files and directories. At this level, I created a file called addsomething.js the contents of which are:

var base = require('settings/addsomething');

Vue.component('spark-addsomething', {
    mixins: [base]
});

In a new directory resources/assets/js/spark-components/settings/addsomething I created a file include-something.js which looks like this:

var base = require('settings/adsomething/include-something');

Vue.component('spark-include-something', {
    mixins: [base]
});

5.) The last file I updated was resources/assets/js/spark-components/bootstrap.js where I included the following lines:

/**
 * Add Something Components...
 */
require('./settings/addsomething');
require('./settings/addsomething/include-something');

After all that, I went to the Command Line Editor - I'm using PuTTY - and ran the gulp command. Unfortunately, this resulted in the errors:

[Error: Cannot find module 'settings/addsomething/include-something' from '/var/www/vhosts/example.co.uk/laravel/resources/assets/js/spark-components/settings/addsomething']

and

[Error: Cannot find module 'settings/addsomething' from '/var/www/vhosts/example.co.uk/laravel/resources/assets/js/spark-components/settings']

Apologies for the rather long question - I wanted to give as much info on what I had done so far - and I realise I might be missing a step or two, but, sadly, have no idea what I need to do in order to get this working.

Any help that anyone can provide would be most appreciated, but please, keep your responses basic. As A.A.Milne wrote

I am a Bear of Very Little Brain, and long words Bother Me

Also, if you require any further information before you answer, please don't hesitate to ask.

With kind regards,

Mark

SYPOMark

9 years ago

Level 1

Hi again,

As an update to the above, I've created additional files under spark/resources/assets/js/settings. One in this directory, called addsomething.jsand another in a sub-directory addsomething at the same location, called include-something.js. The contents of both these files is the same:

module.exports = {
    props: ['user']
};

which I've copied from the pre-existing, profile.js.

But, alas, when I run the gulp command, the same errors as before crop up. I'm aware that I may STILL be missing a step, but have no idea what, I'm afraid.

Any pointers would be most appreciated.

With kind regards,

Mark

qwales1

9 years ago

Level 3

I just ran into this issue too. Did you run php artisan vendor:publish?

The problem I ran into was that the webpack config is resolving modules through vendor/laravel/spark which in my project was symlinked to ./spark. (I think maybe vendor:publish does this). But the published files are in ./resources/assets/js/spark

I changed the webpack config in the gulp file to

elixir(function(mix) {
    mix.less('app.less')
        .webpack('app.js', null, null, {
            resolve: {
                modules: [
                    path.resolve(__dirname, 'resources/assets/js/spark'),
                    'node_modules'
                ]
            }
        })
        .copy('node_modules/sweetalert/dist/sweetalert.min.js','public/js/sweetalert.min.js')
.copy('node_modules/sweetalert/dist/sweetalert.css','public/css/sweetalert.css')
});

And that fixed it.

1 like

SYPOMark

9 years ago

Level 1

Thanks for your help,

Your advice did resolve the error message, and gulp now finishes without error, however the result when looking at Spark is the same as before. When the test tab is clicked the content that should be associated with it still does not display.

Looking at the JavaScript console on the settings page gives the following error from Vue on page load, as it did before:

[Vue warn]: Unknown custom element: <spark-test> - did you register the component correctly? For recursive components, make sure to provide the "name" option. 
(found in component <spark-settings>)

It appears as though the component is registered correctly as far as the files on the server are concerned, however clearly something is still preventing it from loading correctly.

Any further ideas would be gratefully received!

SYPOMark

9 years ago

Best Answer

Level 1

Hi again,

We've managed to sort this out ... finally. Thank-you to @qwales1 for pointing us in the right direction. It was your mention of symlinks that helped. I realised we didn't have a symlink between /spark and /vendor/laravel/spark Also, right at the top of the list of errors I was originally getting was mention of browser like so:

Field 'browser' doesn't contain a valid alias configuration

and package.json was being looked for in all sorts of bizarre places. I eventually realised that Laravel was trying to use browserify so, I installed that. Then, the gulp command ran without errors and my new tab appeared on the settings screen.

If anyone else experiences a similar error and would like to know the steps I followed in more detail, please feel free to post on here and I will get back to you as soon as I can.

With kind regards,

Mark

chileno

7 years ago

Level 2

Hey SYPOMark,

This is a very useful topic. I'm running into the exact same issue. I attempted creating a sys link on Windows and no luck. I get the exact same error. Do you recall the exact steps to fix this issue?

ln -sr spark vendor/laravel/spark

Thank you!

SYPOMark

7 years ago

Level 1

Hey @chileno

I'm really sorry, but it depends what version of Laravel Spark and Laravel you're working with. We were working on Spark about a year ago, using what were already technically outdated version of Laravel and Spark: versions 5.3 and 3.0, respectively.

As far as I know, Laravel Spark no longer uses browserify, so the process these days would be very different to how we did it twelve months ago.

If, however, you are using the same versions of Spark and Laravel that we used, then please come back for assistance. At present, if we use Spark again, it looks like we'll have to learn how to do it all from scratch!

With kind regards,

Mark

Please or to participate in this conversation.