Laravel Spark: Creating a new Settings Tab and Vue Component

Question

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

Add a new component definition to my laravel spark project
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?

score 3 · Answer 1 · edited Jul 15 '22 at 21:43

You can create your own components in /resources/assets/js/components/ (or even in /spark-components if it's easier). It could either be JS files with component definitions (such as home.js) or .vue single file components with HTML, CSS, and JS meshed together (like Example.vue). Either way, you need to register each file in bootstrap.js like so:

require('./home'); // home.js -> <home>

or

Vue.component('example', require('./Example.vue')); // Example.vue -> <example>

Of course, if you include the file in a subdirectory under /components, you'd need to adjust the path. When you execute npm run dev, all JS assets under /resources are typically compiled into just one file -- app.js, but you can control this behavior from within your webpack.min.js file. Laravel Docs should help you with that if needed.

score 1 · Accepted Answer · answered Apr 25 '17 at 19:16

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.

Laravel Spark: Creating a new Settings Tab and Vue Component

2 Answers2