Laravel Spark: Creating a new Settings Tab and Vue Component

In Laravel Spark, most settings panels have a corresponding Vue JS component, invoked via a custom tab

<spark-create-tests :user="user" inline-template>
    <div>
    </div>
</spark-create-tests>

I'm creating a new settings panel. I'd like to follow the patterns used by core laravel code -- but I'm unsure how/where to create my vue component. From what I've been able to gather, the public facing web application instantiates its components in this file

#File: public/js/app.js
Vue.component('spark-create-team', {
    mixins: [base]
});

This looks like its not human editable -- i.e. it's a file created by some sort of compilation process. I assume that's webpack, but as a frozen caveman developer, I'm not sure.

Which brings me to my questions -- how do I

1. Add a new component definition to my laravel spark project
2. Recompile my project so that my component is included

Or, alternately, what about the above is incredibly wrongheaded, and I actually need to do this other thing?

Think I tracked this one down myself. The short version is you can build all your assets with either

npm run dev
npm run production

or, use an npm watch mode with either of the following (the later is a polling version with the usual polling tradeoffs for perf/sure-to-work)

npm run watch
npm run watch-poll    

Higher level -- Laravel brands its npm based integrations. In Laravel 5.3, these integrations where known as Laravel Elixer. In Laravel 5.4, these integrations are known as Laravel Mix.

The source entry point for Laravel Spark's integration (at least in the 4.0 version) is

#File: resources/assets/js/app.js
require('spark-bootstrap');

require('./components/bootstrap');

var app = new Vue({
    mixins: [require('spark')]
});

The require statements pull in other javascript files (all this is resolved/compiled by web-pack when you use npm run). For example, the two require statements above pull in

spark/resources/assets/js/spark-bootstrap.js
./resources/assets/js/components/bootstrap.js

each of which, in turn, pulls in a lot of other files. PHP include/require o-rama -- reinvented for javascript!

Eventually, the require-graph will load the following file

#File: resources/assets/js/spark-components/settings/teams/create-team.js
var base = require('settings/teams/create-team');

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

This is what defines the spark-create-team component. The base methods get defined in the require('settings/teams/create-team') file.

#File: spark/resources/assets/js/settings/teams/create-team.js
module.exports = {
    /*...*/
}

Given all that, there's no great place to drop your own components without interfering with core laravel spark code. Unless someone convinces me otherwise in the comments, I'll be dropping mine in the resources/assets/js/app.js file -- if only to have them all in a central place.