# Issue a Sanctum token without breaking the SPA

> A first-party Vue SPA uses the session cookie. createToken is for a mobile client or another product.

- URL: https://laravel-vuejs.space/sanctum-api-token-beside-spa
- Author: Anass Ez-zouaine (https://laravel-vuejs.space/author/anass-ez-zouaine)
- Published: 2026-10-11
- Topics: Laravel, VueJs, Sanctum

People searching “Sanctum API token Vue” store a bearer token in the Inertia app. Sanctum’s own guidance, written up in the [Sanctum guide](https://laravel-vuejs.space/laravel-sanctum-vue-spa), is that your own SPA uses the session cookie. A token is for a client that cannot use that cookie.

> **TL;DR**
>
> -   A first-party Vue SPA uses the session cookie.
> -   createToken is for a mobile client or another product.
> -   Do not put the token in `localStorage` on the Vue starter kit, and do not send `Authorization: Bearer` from an Inertia form.
>
> **Who it's for:** Laravel + Vue developers
>
> **Applies to:** Laravel 13 · Vue 3 · Sanctum

## The fix

The user model uses Sanctum’s trait, not Passport’s. The [Passport comparison](https://laravel-vuejs.space/laravel-sanctum-vs-passport) is why those two traits do not stack.

```php
use Laravel\Sanctum\HasApiTokens;

class User extends Authenticatable
{
    use HasApiTokens;
}
```

Issue a token from a route the mobile client calls after it has authenticated. Return the plain text once:

```php
$token = $request->user()->createToken('phone')->plainTextToken;

return response()->json(['token' => $token]);
```

The Inertia pages keep using `auth` and the session. They never read this JSON.

## What to avoid

> **Gotcha**
>
> Do not put the token in `localStorage` on the Vue starter kit, and do not send `Authorization: Bearer` from an Inertia form. You would be maintaining two logins for one browser.

## FAQ

**Q: How do I issue a Sanctum token without breaking the SPA?**

A first-party Vue SPA uses the session cookie. createToken is for a mobile client or another product.

**Q: What goes wrong with Sanctum API token Vue?**

Many developers store a bearer token in the Inertia app. Do not put the token in `localStorage` on the Vue starter kit, and do not send `Authorization: Bearer` from an Inertia form.