Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/lukasjhan/furo-sample-vue

Vue sample code for Furo
https://github.com/lukasjhan/furo-sample-vue

Last synced: 21 days ago
JSON representation

Vue sample code for Furo

Awesome Lists containing this project

README

        


Furo Logo

# Furo Vue Sample Project

Check Furo's [Official Documentation](https://docs.furo.one/react-sdk).

## FuroProvider

This is a component required for the Furo plugin implementation function, and all paths to use the Furo SDK must be wrapped.

```javascript

Vue logo


import FuroProvider from "./components/FuroProvider.vue";
import Board from "./components/Board.vue";

export default {
name: "App",
components: {
FuroProvider,
Board,
},
setup() {
return {
clientId: "Input Client ID in App.vue",
origin: window.location.origin,
};
},
};

```

### Parameters

| Name | Type | Description | Required |
| ----------- | ------ | -------------------------------------------------------------------------------------------------- | -------- |
| domain | string | Using loginWithRedirect The login page to redirect to, using the default of https://auth.furo.one. | Yes |
| clientId | string | This is the client identifier assigned when creating the Furo project. | Yes |
| redirectUri | string | This is the uri of the page to go to after login. | Yes |

## useFuro

This is a hook that provides the Furo SDK instance.

```javascript


login
logout

ID: {{ cid }}



User


{{ data }}


import useFuro from "../composables/use-furo";

export default {
name: "TestPage",
setup() {
const { clientId, loginWithRedirect, logout, isAuthenticated, user } =
useFuro();
return {
cid: clientId,
data: user,
loginWithRedirect,
logout,
isAuthenticated,
};
},
};

```

### Property

- loginWithRedirect

This function moves to the domain specified by FuroProvider.

```javascript
const loginWithRedirect: () => void;
```

- logOut

This is the logout function.

```javascript
const logout: () => void;
```

- isLoading

A status value that takes true if login is in progress, false otherwise.

```javascript
const isLoading: boolean;
```

- isAuthenticated

A state value that holds true if logged in and false if not logged in.

```javascript
const isAuthenticated: boolean;
```

- user

A user object containing login information.

```javascript
const isAuthenticated: User;
```

## Project setup

```
yarn install
```

### Compiles and hot-reloads for development

```
yarn serve
```

### Compiles and minifies for production

```
yarn build
```

### Lints and fixes files

```
yarn lint
```

### Customize configuration

See [Configuration Reference](https://cli.vuejs.org/config/).