https://github.com/renyuneyun/solid-helper-vue

SoLiD development helper for Vue projects
https://github.com/renyuneyun/solid-helper-vue

solid vue

Last synced: 5 days 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 (over 1 year ago)
• Default Branch: master
• Last Pushed: 2023-12-26T00:24:03.000Z (about 1 year ago)
• Last Synced: 2024-12-09T19:57:23.163Z (about 1 month ago)
• Topics: solid, vue
• Language: TypeScript
• Homepage: https://me.ryey.icu/solid-helper-vue/
• Size: 150 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Solid Helper for Vue (3)

This repo aims to provide helpers for developing [SoLiD (Social Linked Data)](https://solidproject.org/) Apps with Vuejs (3).

It emerged from my personal requirements, because the official Solid libraries are not natual for Vue.

# Usage example

## Pinia store

Set up Pinia as you always does. Then you can use the store as if it's in your application (or defined a helper in your custom store):

```

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

const sessionStore = useSessionStore();

sessionStore.login(idp, explorerStore.loginRedirectUrl);

...

# Then in somewhere else

sessionStore.handleRedirectAfterLogin()

```

## Provider

Use `SessionProvider` as a provider, and put your components inside it; then inject the relevant variables.

E.g. in your application, specify this as a component:

```

  

    

  

import { SessionProvider } from 'solid-helper-vue'

```

Then in a sub-component loaded by router (or directly use your own component), you can use the following:

```

import { inject } from 'vue';

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

const session = inject(KEYS.SESSION);  // The `Session` object, from `@inrupt/solid-client-authn-browser`. Note that reactivity is lost.

const sessionInfo = inject(KEYS.SESSION_INFO)  // The `ISessionInfo` object with equivalent value as `session.info`.

const login = inject(KEYS.LOGIN);  // A function to log-in, same as that in session store (of this library).

const logout = inject(KEYS.LOGOUT);  // A function to log-out, same as that in session store (of this library).

```

# Current features

- Session management through Pinia store: `useSessionStore`

   - As a Pinia store, providing:

      - `login(solidIdentityProvider: string, redirectUrl: string, clientName: string)`

      - `logout()`

      - `handleRedirectAfterLogin(redirectUrl?: string, restorePreviousSession?: boolea)`

   - It handles the hooks automatically, using first-layer custom variables to keep reactivity.

      - Directly using properties in `Session` object will lose reactivity, for unknown reason.

- Session management through provider component: `SessionProvider`

   - As a Vue component, without UI; similar to React Context. See example above.

   - It handles redirect automatically, so remember to insert it early enough.