Solid Helper for Vue

A Vue 3 helper library for developing SoLiD (Social Linked Data) applications with seamless Pinia integration.

Features

• Session Management via Pinia Store (useSessionStore)

  • Reactive session state and authentication status
  • Login/logout functionality with customizable identity providers
  • Automatic redirect handling and session restoration
  • Maintains reactivity using custom store state (unlike direct Session object usage)

• SessionProvider Component

  • Vue provider component for dependency injection (similar to React Context)
  • Automatically handles authentication redirects
  • Injects KEYS.SESSION, KEYS.SESSION_INFO, KEYS.LOGIN, and KEYS.LOGOUT

Quick Start

Using Pinia Store

import { useSessionStore } from 'solid-helper-vue';

const sessionStore = useSessionStore();

// Login
await sessionStore.login(identityProvider, redirectUrl, clientName);

// Handle redirect after login
await sessionStore.handleRedirectAfterLogin();

// Access session info
if (sessionStore.isLoggedIn) {
  console.log(sessionStore.webid); // Current user's WebID
}

// Logout
await sessionStore.logout();

Using Provider Component

<template>
  <session-provider>
    <your-app />
  </session-provider>
</template>

<script setup lang="ts">
import { SessionProvider } from 'solid-helper-vue';
</script>

Inject session data in child components:

import { inject } from 'vue';
import { KEYS } from 'solid-helper-vue';

const session = inject(KEYS.SESSION);          // Session object from @inrupt/solid-client-authn-browser
const sessionInfo = inject(KEYS.SESSION_INFO); // Reactive session info
const login = inject(KEYS.LOGIN);              // Login function
const logout = inject(KEYS.LOGOUT);            // Logout function

Testing

Comprehensive test coverage includes:

• Unit Tests (src/__tests__)

  • Store actions and state management
  • Provider component functionality
  • Utility functions and types
  • Vue injection keys

• Integration Tests (through complete apps) (integration-projects/vite-vue-spa)

  • Full application integration using Playwright
  • Real-world usage scenarios
  • Component rendering and key injection verification

Run tests:

npm run test              # Watch mode
npm run test:run         # Single run
npm run test:coverage    # Coverage report
npm run test:integration # Playwright integration tests
npm run test:all         # All tests

Installation

npm install solid-helper-vue

Peer dependencies: Vue 3 and Pinia

License

Apache-2.0