Laravel logout route in Vue component - laravel-5

Question

In my Laravel 5.5 project I have a Vue component as a separate file with .vue extension.
In its template there is a vue-router link. Also, I need to place the standard Laravel logout link here.
<template>
<div>
<ul class="nav navbar-nav">
<li><router-link to="/">Home</router-link></li>
<!-- place where I want to add Laravel logout link -->
</ul>
</div>
</template>
I have tried to insert the Laravel logout link like this:
<template>
<div>
<ul class="nav navbar-nav">
<li><router-link to="/">Home</router-link></li>
<li>
<a href="{{ route('logout') }}" onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
Logout
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</li>
</ul>
</div>
</template>
But the code does not compile in this case. I see I can't use Laravel routes in Vue component. What can I do in this case?

Answer 1

You can define a method to call logout route
you can't use laravel blade syntax inside vue component
<template>
<div>
<ul class="nav navbar-nav">
<li><router-link to="/">Home</router-link></li>
<li>Logout</li>
</ul>
</div>
</template>
<script>
export default {
data: () => ({
csrf: document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
}),
methods:{
logout:function(){
axios.post('logout').then(response => {
if (response.status === 302 || 401) {
console.log('logout')
}
else {
// throw error and go to catch block
}
}).catch(error => {
});
},
},
}
</script>
note:
here i used axios for http requests, if you have no idea about that then you can also use normal ajax request
for csrf token you should include csrf data in your meta tag.

Answer 2

Well, Laravel adds csrf token automatically in axios request. So this code is working for me
<template>
<span>
Logout
</span>
</template>
<script>
export default {
name: "Logout",
methods: {
logout() {
axios.post('/logout')
.catch(error => {
window.location.href = '/login';
});
}
}
}
</script>