Exploring Spark Views0:46
All right, and let's take a look at kind of how you get started customizing this app to make it your own. All right, so let's jump into Sublime Text. And now, the first thing I want to show you is some things about Spark itself. Now, within this Spark directory, of course, is all of the core Spark code. Now, when you first install Spark, it actually exports all of its HTML views into your Resources, Views, Vendor, Spark directory.
Customizing the Navbar1:05
it actually exports all of its HTML views into your resources, views, vendor, spark directory. And this is where you can customize any screen in Spark, any of the HTML in Spark. All right, so if you want to change the nav bar, let's go ahead and come into here, for example. Maybe we want to put a little link right up here in the nav bar that our users can click on. What we would do is actually come into this nav folder, and all of the Spark views are very well organized,
What we would do is actually come into this nav folder, and all of the Spark views are very well organized, so it's easy to know what you're looking for. And we want to customize the left side of this nav bar. Let's just put in a little link right here. All right, so we can make a link to just the home route. Let's just call that home. All right, and now if we update this page, you can see we've got that link right there. And we can add as many links as we want to the screen.
Updating Modified Views2:10
And now one thing I do want to point out is if you customize a Spark view and then update Spark, it will only update the view if you haven't modified it. So for example, this view we've modified, so it won't try to overwrite our changes. But any views that we haven't modified anywhere in this directory, it's just going to go ahead and update because it says, hey, they haven't changed this view. So let's go ahead and get a new copy.
Reviewing App Dashboard View2:28
because it says, hey, they haven't changed this view. So let's go ahead and get a new copy just in case there's some minor fix to a CSS class or something like that. All right, so now our own application actually is just going to be in resources/views. It's not going to be in vendor. And let's take a look at that home.blade.php. And this is that screen we were looking at, our dashboard screen.
Using Vue in Your App3:43
Now, the settings pages will always still use Vue. That's a requirement. These pages are tightly integrated with Vue to provide a great user experience. But for the bulk of your own application, you can use whatever you want. But for now, let me just go ahead and show you how we can use Vue in our own application. So if I go back to Sublime, you can see that this home screen
So if I go back to Sublime, you can see that this home screen is actually a Vue template. And it receives the current user as its property right here. And we can actually edit this component. So if I go into my resources/assets/js/components, and there's Home.js. And this is actually that screen we were looking at. This is the JavaScript component for that screen.
Compiling and Testing Changes4:58
All right, so now we've defined that computed property. And let's go ahead and jump over into our template so that we can display it. UpperName. And now we do need to compile our JavaScript since we are using Elixir and Browserify. We need to make sure that we have the freshest version of that JavaScript available. And we'll let that compile. And now we should be able to go over into our browser.
And we'll let that compile. And now we should be able to go over into our browser that that's done and show that. And we get the uppercase name for the current User. So this is just a really basic example of how you can start customizing this screen, how you can start adding to the JavaScript for this screen to make the application your own. And now, of course, you can make your own additional pages and your own additional view components.
And now, of course, you can make your own additional pages and your own additional view components to flesh out the entirety of your application. And it's really simple to get started. And you don't have to worry about any of that subscription billing code because it's all already taken care of for you by Spark.
