https://github.com/renyuneyun/solid-helper-vue
SoLiD development helper for Vue projects
https://github.com/renyuneyun/solid-helper-vue
solid vue
Last synced: 2 months ago
JSON representation
SoLiD development helper for Vue projects
- Host: GitHub
- URL: https://github.com/renyuneyun/solid-helper-vue
- Owner: renyuneyun
- Created: 2023-07-17T22:39:58.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2023-12-26T00:24:03.000Z (over 2 years ago)
- Last Synced: 2025-10-29T23:14:53.335Z (9 months ago)
- Topics: solid, vue
- Language: TypeScript
- Homepage: https://me.ryey.icu/solid-helper-vue/
- Size: 150 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Solid Helper for Vue
A Vue 3 helper library for developing [SoLiD (Social Linked Data)](https://solidproject.org/) 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 and silent session restoration on page load
- Configurable via `restorePreviousSession` and `redirectUrl` props
- Injects `KEYS.SESSION`, `KEYS.SESSION_INFO`, `KEYS.LOGIN`, and `KEYS.LOGOUT`
## Quick Start
### Using Pinia Store
```typescript
import { useSessionStore } from 'solid-helper-vue';
const sessionStore = useSessionStore();
// Login
await sessionStore.login(identityProvider, redirectUrl, clientName);
// Handle redirect after login (call on every page load)
// Passing window.location.href lets the library detect the OAuth callback params.
// restorePreviousSession: true enables silent re-login on subsequent page loads.
await sessionStore.handleRedirectAfterLogin(window.location.href, true);
// Access session info
if (sessionStore.isLoggedIn) {
console.log(sessionStore.webid); // Current user's WebID
}
// Logout
await sessionStore.logout();
```
### Using Provider Component
```vue
import { SessionProvider } from 'solid-helper-vue';
```
To opt out of silent re-login, or to specify a fixed callback URL:
```vue
```
Inject session data in child components:
```typescript
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:
```bash
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
```bash
npm install solid-helper-vue
```
Peer dependencies: Vue 3 and Pinia
## License
Apache-2.0