1.0.11 ā¢ Published 10 months ago
@reputex/vue-widget v1.0.11
ReputeX Vue Widget
Features
ā
- Simple plug-and-play use.
- Easiest way to Display ReputeX Scores to your users.
- Fully Typescript ready out-of-the box. ā ā
š Quick start
ā If you're new to ReputeX, check the quickstart guide in the official docs on how to get started. ā
Reputex Vue Widget Installation
ā
1. Install ReputeX Vue Widget
- Open your terminal or command prompt.
- Navigate to your project directory.
- Install ReputeX React Widget:
- Install the package via npm:
npm i @reputex/vue-widget
- or yarn:yarn add @reputex/vue-widget
ā
2. Import and Use the widget
ā After your dependency is added, you simply need to import and initialize ReputeXWidget. ā
- In your Vue component file (e.g.,
main.js
ormain.ts
), import the ReputeXWidget component from the package:import { ComponentLibrary } from "@reputex/vue-widget";
- Create a Vue app instance and use the ReputeXWidget component as a plugin:
import { createApp } from "vue"; import App from "./App.vue"; createApp(App).use(ComponentLibrary).mount("#app"); ```
- To consume the ReputeX widget in your Vue.js application, you can use the following code:
<reputex-widget visibility user-address="user-address" api-access-key="your-api-acess-key" api-secret-key="your-api secret-key" mode> </reputex-widget> ``` ā
Reputex Nuxt Widget Installation
1. Install ReputeX Vue Widget
ā
- Open your terminal or command prompt.
- Navigate to your project directory.
- Install ReputeX React Widget:
- Install the package via
npm
:npm i @reputex/vue-widget
- or yarn:yarn add @reputex/vue-widget
ā
2. Import and Use the widget
ā After your dependency is added, you simply need to import and initialize ReputeXWidget. ā
- Create a new file called
reputex-plugin.js
inside theplugins
directory of your Nuxt.js project. In that file, add the following code:
ā ā``` import Vue from 'vue' import { ComponentLibrary } from "@reputex/vue-widget" Vue.use(ComponentLibrary) ```
- In your Nuxt.js application, open the
nuxt.config.js
file and add the provided code to the plugins section of the file.``` plugins: [{ src: '~/plugins/reputex-plugin.js', mode: 'client' }] ```
- To consume the ReputeX widget in your Nuxt.js application, you can use the following code:
ā<reputex-widget visibility user-address="user-address" api-access-key="your-api-acess-key" api-secret-key="your-api secret-key" mode> </reputex-widget>
Integration Instructions for ReputeX Widget
- Replace 'your-apiAcessKey', 'your-apiSecretKey', and 'user-address' with your own values.
- You can include the
mode
property to change the theme of the widget. By default, it is set to true for dark mode. - To change the visibility of the widget, you can include the
visibility
property. By default, it is set totrue
. - The widget will now be displayed on your webpage. ā That's it! You can now use the ReputeX widget in your project. If you have any queries, please reach out to us at contact@reputex.io. ā
Common Issues
ā
In some cases, when using Vite for your application, you may encounter a common issue related to the "504 (Outdated Optimize Dep)" error. To address this, you can modify the vite.config.js
file by adding the following configuration:
1. Import the defineConfig
function from "vite":
import { defineConfig } from "vite";
```
ā
2. Update the default export to use `defineConfig` and include the `optimizeDeps` property:ā
export default defineConfig({
// ...
optimizeDeps: {
exclude: ['@reputex/vue-widget']
}
});