Effectively Using Laravel Csrf_token in a vue component

Laravel
Submitting a form in laravel always requires a {{csrf_token}} field else we get a page expired error.
Luckily for us laravel enables us to pass this into forms as a hidden input field with {{csrf}} as the value, but what about when we are using laravel and vue.

Vue.Js
When integrating vue into a laravel app, we can't just use the {{csrf}} markup as this would not be understood by vue.
so if we try to do this in our template.
Screenshot (156).png

this will return two errors.

  1. A warning by npm that it does not understand what you mean by {{csrf}}.
  2. page has expired in the frontend.

Solution:

  1. declare a data property for csrf, this will prevent an undefined error message on the console and reference the csrf data to the content attribute of the csrf_token meta tag in your "project\resources\views\layouts\app.blade.php".

  2. Bind the csrf data property as a value to your form.

Screenshot (157).png

H2
H3
H4
3 columns
2 columns
1 column
Join the conversation now
Logo
Center