Laravel ist nicht definiert

Question

Nun, ich mit dem neuen Laravel 5.3 und vue.js spielte, und ich will einen GET Aufruf für einige Benutzer zu tun, die ich in meiner DB

Im mit Komponenten btw habe.

Das ist mein app.js

require('./bootstrap'); 

Vue.component('example', require('./components/UserComponents/User.vue')); 

const app = new Vue({ 

    el: 'body', 

}); 

Dies ist meine Komponente User.vue i die HTML-Vorlage für die Zeit nach Größe Grund weggelassen kann ich es abgeben neccesary

<script> 

    export default{ 

     data : function() { 
      return { 
       users : '' 
      } 
     }, 

     methods: { 


      fetchUser: function() { 

       var vm = this; 

       vm.$http.get('user/', function (data) { 
        vm.$set('users', data) 
       }) 

      } 
     }, 
     ready() { 

      this.fetchUser(); 
     }, 

    } 
</script> 

Im 2 bekommen Fehler in der Konsole

vue-resource.common.js?d39b:27 0ReferenceError: Laravel is not defined(…) 

(program):29 Uncaught (in promise) ReferenceError: Laravel is not defined(…) 

das ist mein package.json, wie Sie sehen können, ich habe alle Deps für diese zu wo rk vue und vue ressource

{ 
    "private": true, 
    "scripts": { 
    "prod": "gulp --production", 
    "dev": "gulp watch" 
    }, 
    "devDependencies": { 
    "bootstrap-sass": "^3.3.7", 
    "gulp": "^3.9.1", 
    "jquery": "^3.1.0", 
    "laravel-elixir": "^6.0.0-9", 
    "laravel-elixir-vue": "^0.1.4", 
    "laravel-elixir-webpack-official": "^1.0.2", 
    "lodash": "^4.14.0", 
    "vue": "^1.0.26", 
    "vue-resource": "^0.9.3" 
    } 
} 

Hoffe jemand könnte mir hier helfen. Danke

Answer 1

Versuchen Sie, diese auf Ihre Klinge setzen, wie Sie standardmäßig auf app.blade auf Laravel wird eingefügt sehen 5,3

<script> 
    window.Laravel = <?php echo json_encode([ 
     'csrfToken' => csrf_token(), 
    ]); ?> 
</script> 

Answer 2

Oder für eine sauberere Format:

<script> 
    window.Laravel = { csrfToken: '{{ csrf_token() }}' }; 
</script> 

Does dasselbe wie Rocco's Antwort.

Answer 3

wenn Sie axios dann Folgendes sicher ist in Ihrer bootstrap.js Datei nach axios importiert verwenden:

window.axios.defaults.headers.common = { 
    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'), 
    'X-Requested-With': 'XMLHttpRequest' 
};