Fixed vue issue with api

gulpfile.js

@@ -1,6 +1,8 @@
 var elixir = require('laravel-elixir');
 require('laravel-elixir-codeception-standalone');
 require('laravel-elixir-phpcs');
+require('laravel-elixir-vue-2');
+
 /*
  |--------------------------------------------------------------------------
  | Elixir Asset Management
@@ -13,16 +15,21 @@ require('laravel-elixir-phpcs');
  */
 
 elixir(function(mix) {
-    mix.less(['AdminLTE.less','skins/skin-blue.less','ekko-lightbox.less','overrides.less','fontawesome-animated.css'],'public/assets/css');
-
 
+    mix.less(['AdminLTE.less',
+            'skins/skin-blue.less',
+            'ekko-lightbox.less',
+            'overrides.less',
+            'fontawesome-animated.css'],
+            'public/assets/css')
+       .webpack('app.js');
     mix.scripts([
         'plugins/jQuery/jQuery-2.1.4.min.js',
         'plugins/jQueryUI/jquery-ui.js',
         'plugins/jQueryUI/jquery.ui.widget.js',
         'plugins/iframe-transport/jquery.iframe-transport.js',
         'plugins/fileupload/jquery.fileupload.js',
-        'bootstrap.js',
+        'bootstrap-js.js',
         'plugins/fastclick/fastclick.js',
         'plugins/slimScroll/jquery.slimscroll.js',
         'plugins/select2/select2.full.min.js',
@@ -32,14 +39,14 @@ elixir(function(mix) {
         'plugins/select2/select2.js',
         'plugins/iCheck/icheck.js',
         'ekko-lightbox.js',
-        'snipeit.js',
-        'app.js'
+        'snipeit.js'
 
-    ],'public/assets/js');
+    ],'public/assets/js')
+        ;
     mix.version(['assets/css/app.css','assets/js/all.js']);
 
 
-    mix.codeception(null, { flags: '--report' });
+    // mix.codeception(null, { flags: '--report' });
 
 
     // mix.phpcs([

resources/assets/js/app.js

@@ -746,7 +746,39 @@ function _init() {
   };
 }(jQuery));
 
-//-------------
-//- PIE CHART -
-//-------------
-// Get context with jQuery - using jQuery's .get() method.
+
+/**
+ * First we will load all of this project's JavaScript dependencies which
+ * include Vue and Vue Resource. This gives a great starting point for
+ * building robust, powerful web applications using Vue and Laravel.
+ */
+
+require('./bootstrap');
+
+/**
+ * Next, we will create a fresh Vue application instance and attach it to
+ * the page. Then, you may begin adding components to this application
+ * or customize the JavaScript scaffolding to fit your unique needs.
+ */
+
+Vue.component(
+    'passport-clients',
+    require('./components/passport/Clients.vue')
+);
+
+Vue.component(
+    'passport-authorized-clients',
+    require('./components/passport/AuthorizedClients.vue')
+);
+
+Vue.component(
+    'passport-personal-access-tokens',
+    require('./components/passport/PersonalAccessTokens.vue')
+);
+
+
+
+const app = new Vue({
+    el: '#app'
+});
+

resources/views/layouts/default.blade.php

@@ -621,6 +621,7 @@
     </div>
 
 
+    <script src="/js/app.js"></script>
     <script src="{{ asset(elixir('assets/js/all.js')) }}"></script>
 
     <script>

routes/web.php

@@ -104,6 +104,16 @@ Route::group([ 'prefix' => 'admin','middleware' => ['web','auth']], function ()
         # Settings
         Route::group([ 'prefix' => 'app' ], function () {
 
+            Route::get(
+                'api',
+                array('as' => 'api',
+                    function () {
+                        return view('settings/api');
+                    }
+                )
+            );
+
+
             Route::post('purge', ['as' => 'purge', 'uses' => 'SettingsController@postPurge']);
             Route::get('edit', [ 'as' => 'edit/settings', 'uses' => 'SettingsController@getEdit' ]);
             Route::post('edit', 'SettingsController@postEdit');