You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: adding-profile-fields.md
+2-2
Original file line number
Diff line number
Diff line change
@@ -75,7 +75,7 @@ This `@include` directive will load a new Blade template which contains our cust
75
75
<aname="defining-the-javascript-component"></a>
76
76
## Defining The JavaScript Component
77
77
78
-
Next, we will define the new `update-profile-details` Vue component which will manage our new panel and form. We can define this component at `/resources/assets/js/components/settings/profile/update-profile-details.js`:
78
+
Next, we will define the new `update-profile-details` Vue component which will manage our new panel and form. We can define this component at `/resources/js/components/settings/profile/update-profile-details.js`:
79
79
80
80
Vue.component('update-profile-details', {
81
81
props: ['user'],
@@ -104,7 +104,7 @@ Next, we will define the new `update-profile-details` Vue component which will m
104
104
105
105
Note that this component uses the `Spark.put` helper, which adds some convenient features on top of the `axios` library. The `Spark` HTTP helpers accept a form object and will automatically set the form's `busy` attribute to `true` when the form is submitted.
106
106
107
-
When you define a new Vue component, you also need to instruct Spark to compile the component into your main `app.js` file. You can do this by adding a line to your `/resources/assets/js/components/bootstrap.js` file:
107
+
When you define a new Vue component, you also need to instruct Spark to compile the component into your main `app.js` file. You can do this by adding a line to your `/resources/js/components/bootstrap.js` file:
Copy file name to clipboardExpand all lines: adding-registration-fields.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -35,7 +35,7 @@ Remember, you're free to edit any of the views in `/resources/views/vendor/spark
35
35
<aname="extending-the-javascript"></a>
36
36
## Extending The JavaScript
37
37
38
-
Since extending the registration form is a common use case, Spark makes it easy to add a field to the JavaScript object that models the registration form. In your `/resources/assets/js/app.js` file, adding the following lines of code just before the call to `new Vue`:
38
+
Since extending the registration form is a common use case, Spark makes it easy to add a field to the JavaScript object that models the registration form. In your `/resources/js/app.js` file, adding the following lines of code just before the call to `new Vue`:
Copy file name to clipboardExpand all lines: client-customization.md
+7-7
Original file line number
Diff line number
Diff line change
@@ -21,20 +21,20 @@ When you upgrade your application using `php artisan spark:update`, any views th
21
21
<aname="adding-your-own-vue-components"></a>
22
22
## Adding Your Own Vue Components
23
23
24
-
When you install Spark, a `resources/assets/js/components` directory is created to hold all of your own Vue components. To learn more about writing Vue components, be sure to check out the [Vue documentation](http://vuejs.org/guide/components.html). A sample `home` component is included with Spark and can serve as the main "dashboard" for your application. The corresponding view for this component is located at `resources/views/home.blade.php`.
24
+
When you install Spark, a `resources/js/components` directory is created to hold all of your own Vue components. To learn more about writing Vue components, be sure to check out the [Vue documentation](http://vuejs.org/guide/components.html). A sample `home` component is included with Spark and can serve as the main "dashboard" for your application. The corresponding view for this component is located at `resources/views/home.blade.php`.
25
25
26
26
For an example of an application with custom Vue components, check out the Spark [demo application](/docs/7.0/quickstart#demo-application).
27
27
28
-
> **Note:** When you add additional components to your application, don't forget to `require` them in your `resources/assets/js/app.js` file.
28
+
> **Note:** When you add additional components to your application, don't forget to `require` them in your `resources/js/app.js` file.
29
29
30
30
<aname="customizing-existing-vue-components"></a>
31
31
## Customizing Existing Vue Components
32
32
33
-
When Spark is installed, a `resources/assets/js/spark-components` directory will be created which contains stubs for every Vue JavaScript component included with Spark. If you open one of these components, you will notice that each of them is an empty component definition except for the `base` mixin of the component which provides the Spark core functionality.
33
+
When Spark is installed, a `resources/js/spark-components` directory will be created which contains stubs for every Vue JavaScript component included with Spark. If you open one of these components, you will notice that each of them is an empty component definition except for the `base` mixin of the component which provides the Spark core functionality.
34
34
35
35
Every component in this directory leverages Vue's [mixin](http://vuejs.org/guide/mixins.html) feature, meaning you can override any of the methods defined in the base Spark component.
36
36
37
-
For example, if you wish to override the `update-contact-information` component's `update` method, you would define the following method in the `resources/assets/js/spark-components/settings/profile/update-contact-information.js` file:
37
+
For example, if you wish to override the `update-contact-information` component's `update` method, you would define the following method in the `resources/js/spark-components/settings/profile/update-contact-information.js` file:
38
38
39
39
var base = require('settings/profile/update-contact-information');
40
40
@@ -57,13 +57,13 @@ Using Vue is required for the registration and settings views; however, you may
57
57
58
58
> **Note:** Vue is required for the following features: notifications, support requests, and automatic handling of [shared API back-ends](/docs/7.0/api#sharing-your-api).
59
59
60
-
To use something other than Vue, modify your `resources/views/home.blade.php` view to extend the `spark::layouts.blade.app` template. This layout does not contain any JavaScript framework initialization and the Vue application will not be attached to the page, leaving you free to build your JavaScript client however you wish in your `resources/assets/js/app.js` file. However, a few utility libraries such as Underscore, Moment, and jQuery are still loaded even when Vue is disabled for your application.
60
+
To use something other than Vue, modify your `resources/views/home.blade.php` view to extend the `spark::layouts.blade.app` template. This layout does not contain any JavaScript framework initialization and the Vue application will not be attached to the page, leaving you free to build your JavaScript client however you wish in your `resources/js/app.js` file. However, a few utility libraries such as Underscore, Moment, and jQuery are still loaded even when Vue is disabled for your application.
61
61
62
-
Next, remove the following line from your `resources/assets/js/components/bootstrap.js` file:
62
+
Next, remove the following line from your `resources/js/components/bootstrap.js` file:
63
63
64
64
require('./../spark-components/bootstrap');
65
65
66
-
Finally, you may remove the Vue app instantiation from the `resources/assets/js/app.js` file:
66
+
Finally, you may remove the Vue app instantiation from the `resources/js/app.js` file:
0 commit comments