How do I protect my Vue-routes with Laravel sanctum

I have a Laravel backend and a Vue frontend. I wanted to know how to protect my Vue routes with Lravael sanctum. I want that only logged in users can see the page?

I have tried this but it did not work: https://medium.com/@AshJuventino/building-a-vue-spa-protected-by-laravel-sanctum-33c9c87cc057 and https://techvblogs.com/blog/spa-authentication-laravel-sanctum-vuejs
vue-router

import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import("../views/Home")
  },
  {
    path: '/register',
    name: 'Register',
    component: () => import("../views/Register")
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import("../views/Login")
  },
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

api-route-laravel

Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
    return $request->user();
});

I have tried this but it did not work: https://medium.com/@AshJuventino/building-a-vue-spa-protected-by-laravel-sanctum-33c9c87cc057

https://techvblogs.com/blog/spa-authentication-laravel-sanctum-vuejs