npm package: @raydius/vue
Description: base on `@raydius/auth`, like `@raydius/react`
Author: echo
Latest version: 0.0.2

# @raydius-vue

base on `@raydius/auth`, like `@raydius/react`


## Prerequisites
To integrate the Raydius Vue SDK, your project must be on:
- a minimum Vue version of 3.x
- a minimum TypeScript version of 5

## Quick start

### install
(Installation)
```
// npm
npm i @raydius/vue

// yarn
yarn add @raydius/vue

```

### Import the plugin and style
(Set Up Your App with Raydius)
```
// main.js
import { RaydiusVuePlugin } from "@raydius/vue";
import App from "./App.vue";
import { createApp } from "vue";
// import style
import "@raydius/vue/style.css";

const config = {
     appId: "xxx",
}
createApp(App)
  .use(RaydiusVuePlugin, {
    config,
  })
  .mount("#app");

```

### Usage
(Using the useRaydius Hook)
```
// App.vue or other vue component
<script setup>
import { useRaydius } from '@raydius/vue'

const { login, logout, userAccount } = useRaydius()
</script>

<template>
    <button @click="login">login</button>
    <button @click="logout">logout</button>
    <div>
        UserAccount : 
        <pre>{{ userAccount }}</pre>
    </div>
</template>


```


# RaydiusVuePlugin Config

| attr            | required | description                                                     | default                                                                                                                                                               |
| --------------- | -------- | --------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| appId           |  true    | get from                                                        | \-                                                                                                                                                                    |
| theme           | false    | theme for Raydius component, the value can be 'light' or 'dark' | dark                                                                                                                                                                  |
| defaultChain    | false    | defaultChain                                                    |                                                                                                                                                                       |
| supportedChains | false    | Array of chain, chain must be imported from '@wagmi/vue/chains' | [ mainnet, goerli, sepolia, optimism, optimismSepolia, polygon, polygonMumbai, arbitrum, arbitrumSepolia, base, baseSepolia, bsc, bscTestnet, scroll, scrollSepolia ] |
| allowMethods    | false    | Array of social login method                                    | ["farcaster", "twitter", "google"]                                                                                                                                    |
| allowWallets    | false    | Array of wallet login method                                    | ["metaMask", "walletConnect", "tomo"]                                                                                                                                 |

## API

#### login
####  logout
####  linkGoogle
####  unlinkGoogle