How do I use Vue in the admin?

When in an admin Blade view file you can use any Vue directive (such as v-for, v-if, v-on:click etc).

It is recommended to use the v-on:click syntax instead of @click syntax to minimise any potential conflicts between Blade & Vue.

Dev Mode

Putting Vue into dev mode allows you to use the Vue dev tools. You can put the Admin Vue into dev mode by putting this code snippet in your Blade view:

@push('scripts')
   <script>
       window.AeroAdmin.vue.use({
           install(Vue) {
               Vue.config.devtools = true;
           },
       });
   </script>
@endpush

Extending Vue without a Custom Component

You can extend Vue without using a custom Vue component by using window.AeroAdmin.

Adding Data

@push('scripts')
   <script>
       window.AeroAdmin.addData('myVariable', '{{ old('myVariable', 'value') }}');
       window.AeroAdmin.addData('myOtherVariable', 'Example');
       window.AeroAdmin.addData('myArrayVariable', {!! json_encode(['one', 'two', 'three', 'four']) !!});
   </script>
@endpush

Adding Computeds

@push('scripts')
   <script>
       window.AeroAdmin.addComputed('computedMethod', function () {
           return ['one', 'two', 'three', 'four'];
       });
   </script>
@endpush

Adding Methods

@push('scripts')
   <script>
       window.AeroAdmin.addMethod('test', function (value) {
           console.log(value);
       });

       window.AeroAdmin.addMethod('testing', function (value) {
           this.test(value);
       })
   </script>
@endpush

Adding Watchers

@push('scripts')
   <script>
       window.AeroAdmin.addData('foo', 'bar');

       // Normal watcher - fires on change
       window.AeroAdmin.addWatch('foo', function (value) {
           console.log(value);
       });

       // Immediate watcher - fires immediately (and on change)
       window.AeroAdmin.addWatch('foo', {
           handler: function (value) {
               console.log(value);
           },
           immediate: true
       })
   </script>
@endpush

You can only have one watcher for a given key, if multiple are registered the last one takes priority.

Adding Listeners

@push('scripts')
   <script>
       window.AeroAdmin.addListener('loaded', function () {
           console.log('Vue has been loaded');
       });
   </script>
@endpush