Uniswap Widgets components for Vue.js/Nuxt.js

[wukongproject]

A Vue.js/Nuxt.js version of the Widgets is much needed and requested by devs. We can support.

[ottman]

Same for Angular

[TrayHard]

Please do, really need it

[Philword]

Much need

[flexid]

Would be great.

[viper-00]

Anyone know where the implement for vue.js?

[valecss]

There is any link or guide to implement Uniswap Widgets (swap widget) for nuxt 3 webapp?

[ssmmll880]

When will the Vue version of the widget be released!!

[ghost]

Bump

[itzaks]

You can get it running in vue using veaury.

There are some steps involved.

Install necessary packages: yarn add -D veaury @uniswap/widgets @fontsource-variable/inter vite-plugin-node-polyfills@^0.9.0

<script lang="ts" setup>
import '@fontsource-variable/inter';
//@ts-ignore
import { SwapWidget } from '@uniswap/widgets'
//@ts-ignore
import { applyReactInVue } from 'veaury';
const UniswapWidget = applyReactInVue(SwapWidget)
</script>

Then use it.

<UniswapWidget :defaultOutputTokenAddress="TOKEN_OUTPUT"></UniswapWidget>

Just make sure to note that there are errors running it on Vite, but the polyfills from here fixed it on our end.

import { nodePolyfills } from 'vite-plugin-node-polyfills' // ^0.9.0 worked for me

export default defineNuxtConfig({
  vite: {
    resolve: {
      alias: {
        jsbi: path.resolve(__dirname, "./node_modules/jsbi/dist/jsbi-cjs.js"),
      }
    },
    build: {
      commonjsOptions: {
        transformMixedEsModules: true,
      },
    },
    plugins: [
      nodePolyfills()
   ]
 }
});