I am developing a Laravel API and I wanted to use a bearer token to safely communicate with the VueJS Frontend. A friend of mine then told me, that this would be unnecessary, because Laravel already uses the CSRF Token to shield against XSS-Attacks.
So, is my token based authentication basically useless if I already use the csrf token and why?
You are talking about two different things here. A Bearer token is for authentication to an API for example, a CSRF Token is for protecting against cross-side-request-forgery attacks.
The bearer token is your login token to an external api-service like a passport or member-card, so you are granted access to this external service. The token also tells the server who the person/machine accessing the resource is, so the server can decide if they have the correct permissions.
The CSRF token protects you from request forgery, meaning someone making a request to your server from an external server or tool. The only thing a CSRF token tells you is that the request came from someone using your site, it doesn't tell you who that person is or what permissions they have.
I hope you understand. Maybe you should study the CSRF Wikipedia entry https://en.wikipedia.org/wiki/Cross-site_request_forgery
And some info for bearer tokens: https://en.wikipedia.org/wiki/OAuth