master-page-vue

Master page layout with Header, Sidebar Menu and Footer for Vue 3, with OIDC authentication via oidc-client-ts.

Install

npm install master-page-vue oidc-client-ts

Usage

// main.ts
import { createApp } from 'vue';
import App from './App.vue';
import MasterPagePlugin from 'master-page-vue';

createApp(App)
  .use(MasterPagePlugin, {
    oidc: {
      authority: 'https://identity.example.com',
      clientId: 'mi-app',
      clientSecret: 'client_secret'
    },
    appTitle: 'SISPRO - Mi Aplicación',
  })
  .mount('#app');

<!-- App.vue -->
<template>
  <MasterPage>
    <RouterView />
  </MasterPage>
</template>

Config options

| Option | Type | Description | |--------|------|-------------| | oidc.authority | string | Identity server URL | | oidc.clientId | string | OAuth client ID | | oidc.clientSecret | string? | OAuth client secret | | oidc.redirectUri | string? | Redirect URI after login | | oidc.postLogoutRedirectUri | string? | Redirect URI after logout | | oidc.scope | string? | OAuth scopes | | appTitle | string? | Title shown in header | | enableFetchInterceptor | boolean? | Auto-inject bearer token in fetch calls | | registerUrl | string? | Registration URL |

Composable

import { useAuth } from 'master-page-vue';

const { isAuthenticated, userProfile, menuItems, login, logout } = useAuth();