# idmesh-vue

> IDMesh sdk wrapped for Vue 3

Latest version **0.9.1** (published 2023-07-13) · ISC license · 0 weekly downloads

## Install

```sh
npm install idmesh-vue
pnpm add idmesh-vue
yarn add idmesh-vue
bun add idmesh-vue
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.9.1 |
| Published | 2023-07-13 |
| First published | 2023-07-13 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 62.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | sense-soft |
| Maintainers | 610946bafa25fa3e2417237e |

## Links

- npm: https://www.npmjs.com/package/idmesh-vue
- Repository: https://github.com/sense-soft/idmesh-vue
- Issues: https://github.com/sense-soft/idmesh-vue/issues
- npm.io page: https://npm.io/package/idmesh-vue

## Dependencies (1)

- [idmesh-spa-js](https://npm.io/package/idmesh-spa-js.md) >=0.9.1

## Recent versions

- 0.9.1 (latest) — 2023-07-13

## README

# idmesh-vue

---

*idmesh-vue* is a wrapper of idmesh-spa-js for Vue3.

## Usage

### basic usage

install

``` shell
npm i idmesh-vue --save
```

setup plugin

``` javascript
import { createIDMesh } from 'idmesh-vue';

const app = createApp(App);

app.use(
  createIDMesh({
    domain: YOUR_DOMAIN,
    clientId: YOUR_CLIENT_ID,
    authorizeTimeoutInSeconds: 5,
    authorizationParams: {
      redirect_uri: window.location.origin
    }
  })
);
```

using composition API

``` javascript
import { useIDMesh } from 'idmesh-vue';

const { loginWithRedirect, user, isAuthenticated, logout, isLoading, getAccessTokenSilently } = useIDMesh();
const accessToken = ref('');

watch(() => unref(isAuthenticated), async (v: boolean) => {
  if (v) {
    accessToken.value = await getAccessTokenSilently();
  } else {
    accessToken.value = '';
  }
}, { immediate: true });

const onLogin = () => loginWithRedirect();
const onLogout = () => {
  logout({ logoutParams: { returnTo: window.location.origin } });
};
```

``` html
<div>
  <h1>Welcome to IDMesh</h1>
  <button @click="onLogin" :disabled="isLoading || isAuthenticated" :style="{ marginRight: '6px' }">Log in</button>
  <button @click="onLogout" :disabled="isLoading || !isAuthenticated">Log out</button>
  <div v-if="isLoading">loading...</div>
  <template v-if="accessToken">
    <h2>Access Token:</h2>
    <pre>{{ accessToken }}</pre>
  </template>
  <template v-if="isAuthenticated">
    <h2>User Info:</h2>
    <pre>{{ user }}</pre>
  </template>
</div>
```

## API

TODO

## Example

TODO

## License

TODO

---
_Source: https://npm.io/package/idmesh-vue · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._