@raydius/vue

0.0.2 • Public • Published

@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

Readme

Keywords

none

Package Sidebar

Install

npm i @raydius/vue

Weekly Downloads

0

Version

0.0.2

License

MIT

Unpacked Size

4.53 MB

Total Files

6

Last publish

Collaborators

  • jacky_