Developing a Fresh Settings Tab and Vue Module in Laravel Spark

When working with Laravel Spark, you'll find that most settings panels come with a corresponding Vue JS component that is called upon using a custom tab.

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

Now, if I'm looking to create my own settings panel following the same patterns as the core Laravel code, I may be a bit lost on where and how to begin creating my Vue component. Based on my research, it seems that the web application's components are instantiated in the following file:

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

This file appears to be auto-generated by some compilation process like webpack. However, being somewhat inexperienced in this area, I could be mistaken.

So, my main concerns are:

  1. How do I incorporate a new component definition into my Laravel Spark project?
  2. What steps should I take to recompile the project and have my component included?

Alternatively, is there a different approach I should consider rather than what I outlined above?

javascriptlaravelwebpackvue.jslaravel-spark

Answer №1

If you want to customize your components, you can do so by creating them in the directory /resources/assets/js/components/ (or if it's more convenient for you, in /spark-components). You have the option to use JS files for defining components (like home.js) or utilize single file components with HTML, CSS, and JS all combined, as seen in Example.vue. Remember to register each file in your bootstrap.js like this:

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

Alternatively, you can also register components directly using Vue, such as:

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

If you place your components in a subdirectory within /components, make sure to adjust the path accordingly. During the execution of npm run dev, all JS assets under /resources are typically compiled into a single file called app.js. However, you can modify this behavior through your webpack.min.js file. For further assistance, consult the Laravel Docs.

Answer №2

I believe I have identified the solution to this issue on my own. To summarize, you can compile all your assets using either:

npm run dev
npm run production

Alternatively, you can utilize an npm watch mode with either of the following options (the latter is a polling version which comes with the usual tradeoffs in terms of performance and reliability):

npm run watch
npm run watch-poll

On a broader scale, Laravel has its own branded integrations for npm. In Laravel 5.3, these integrations were referred to as Laravel Elixer. In Laravel 5.4, they are known as Laravel Mix.

For Laravel Spark's integration (at least in version 4.0), the entry point in the source code 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 resolved and compiled by webpack when running npm run). For instance, the two require statements above import:

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

each of these files then pulls in additional files, resembling PHP's include/require methods reinvented for JavaScript!

Ultimately, 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 defines the spark-create-team component, where the base methods are specified in the 

require('settings/teams/create-team')
file.

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

Considering all this, there isn't an ideal location to place custom components without causing conflicts with core Laravel Spark code. Unless persuaded otherwise in the comments, I plan to include mine in the resources/assets/js/app.js file – if only to keep them centralized.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

There was a DOMException in Angular because the transaction is not active when trying to execute 'getAll' on 'IDBObjectStore'

private get ctxMessage() { const messageTransaction = this.db.transaction('messages', 'readwrite'); const messageStore = messageTransaction.objectStore('messages'); return { messageTransaction, messageStore }; } ...

javascriptangulartypescriptindexeddb

Adding local JavaScript to a Vue component is a great way to enhance its functionality

I am currently working on integrating a homepage concept (Home.vue) into my project. The design is based on a template that I purchased, which includes CSS, HTML files, and custom JavaScript. While most of the CSS has been successfully imported, I am havin ...

javascriptvue.js

Ways to determine the total amount of days in a given month

As I create a countdown timer, the process involves determining the remaining days in a given month by subtracting the current date from the total number of days in that month. For instance, if there are 30 days in September and 8 days have already passe ...

javascriptvue.jsvuejs2

Steps for generating an observable that mirrors the structure of an observable array

I am in the process of creating an observable array using JSON data retrieved from the server. var ViewModel = function (data) { var self = this; self.list = ko.observableArray(data); self.selected = ko.observable(); } ...

javascriptjqueryknockout.js

NodeJS is constantly refreshing the data in the database table

Every day, I use a cron job to scrape data and insert it into a database. However, I'm facing an issue where the database results on the server do not refresh themselves after new data is inserted. I've come across 2 solutions here, but one was ...

javascriptmysqlnode.jsexpresscron

Customizing the step function of HTML5 input number with jQuery: A guide

Is there a way to modify the step value in HTML5 number inputs for my web application? I would like it to increment and decrement by 100 instead of 1. I attempted the following approach: $("#mynumberinput").keydown(function(e){ if (e.keyCode == 38) / ...

javascriptjqueryhtmlkeydownkeycode

The background image's fadeInOut transitions create a strange phenomenon where all the text appears in white

So, here's a strange issue I'm facing. On my website, the background image changes with a smooth fadeIn/Out transition. Video: Website in action: Here is the HTML markup: <div class="fondo" onclick="descargar(2,500);descargar(1,500);"> ...

javascriptjquerycssopacity

Tips on getting the most out of your watch

Within my parent component, I am passing the month_id props to a child component by clicking on a specific <li>. The code for my child component looks like this: <script> export default { props: ['mosque_id', 'month_i ...

vue.jsvue-component

Efficient initialization process in Vue.js components

Upon initialization of a component, the data callback is executed as follows: data(){ return { name: myNameGetter(), age: myAgeGetter(), // etc... } }, Following that, a notification is sent to a parent component regarding ...

javascriptvue.js

Vue-incredible swiper, a pair of components swipe using buttons adjacent to one another

I am currently using vue-awesome-swiper and encountering an issue. The swipers on my page have buttons (prev slide, next slide) for navigating through slides. However, when I include two swipers on the same page, the buttons of one swiper end up affecting ...

javascriptvue.jsvue-componentswiper.js

The point in the vector data is incorrectly positioned on the map in OpenLayers

I am looking to display a world map using the default OpenLayers WMS, along with a single point on it that will have interactive events like onhover. Below is my code snippet: var options = { projection: ...

javascriptvectoropenlayerspoint

What steps should be taken to ensure that my nodeJS server can maintain the identity of a specific user?

Currently, I am in the process of building a mobile application that utilizes Flutter for the front-end and NodeJS for the back-end. Progress has been steady, but I have hit a roadblock while trying to incorporate a lottery feature. The idea is for the se ...

javascriptnode.jsflutterjwtbackend

Is it possible to disable a function by clicking on it?

I currently have a website that is utilizing the following plugin: This plugin enables an image to be zoomed in and out through CSS transforms, with default controls for zooming in and out. My goal is to incorporate a reset button that returns the image ...

javascriptjquerycss

Activate the submit button using jQuery

I have tested the code snippet that I shared on fiddle. I am looking to activate the save button by hitting the enter key, which will submit the form using ajax. The activation should occur when there is text content greater than 0 in the span. $(docum ...

javascriptjquery

The anchor tag seems to be malfunctioning within the div container

<style type="text/css> .xyz { position: absolute; top: 120px; left: 160px; z-index: -1; } #container { position: relative; overflow: visible; opacity: .3; } </style> <body> <div> <video i ...

javascriptjqueryhtmlcss

Thumbnail Option in the WordPress Media Uploader

Is it possible to add support for selecting image size (thumbnails) in the Media Library popup created using the wp.media() function in WordPress? I am currently using WordPress 4.5.2 and my code sample is as follows: wp.media.frames.selectFile=wp.media( ...

javascriptjquerywordpress

What is the best way to transfer a JavaScript object with string values containing quotes from node.js to the browser?

I have a node/express application and need to send a JavaScript object to the browser. Currently, I achieve this by using JSON.stringify on the object and then embedding it into the HTML: In my Node.js/Express code: var myObject = /* fetched from databas ...

javascriptjsonnode.js

Storing Images in MySQL Database with JavaScript and Node.js: A Step-by-Step Guide

I am using Javascript to capture an image and store it in a MySQL Database. Below is the code I have written for this: <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device- ...

javascripthtmlmysqlnode.js

Activate Bootstrap button functionality with JavaScript

Hey team, I've got a Bootstrap button on my HTML page: ..... <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> ... <div class="accept-btn"> <button type="button" class="bt ...

javascripthtmlcsstwitter-bootstrap

Suggestions for preventing the highlighting of the space between buttons on a webpage

html: <button id='automoney' onclick='minusTen()'></button> <button id='automoney2' onclick='minusHundred()'></button> <button id='automoney3' onclick='minusFiveHundred()& ...

javascripthtmlcss