Using Nuxt3 plugins

// plugins/userHasAccess.ts

export default defineNuxtPlugin(() => {
  return {
    provide: {
      // params can be added here
      userHasAccess: (user: User, access: string | string[]) => {
        if (typeof access === "string") {
          return user?.roles?.includes(access);
        } else {
          return user?.roles?.some((r) => access.includes(r));
        }
      },
    },
  };
});

// pages/index.vue
<template>
  <div v-if="$userHasAccess(user, 'ROLE_NEEDED')">
      I can be seen
  </div>
</template>

<script setup lang="ts">
const { $userHasAccess } = useNuxtApp();

import { useAuthStore } from "~/store/auth";
const authStore = useAuthStore();
const { user } = storeToRefs(authStore);

</script>


{
  "email" : "yourmemail@company.com",
  "roles" : ["ROLE_NEEDED"]
}