GlueX Widget is fully compatible with Nuxt applications and requires minimal configuration for smooth integration
For a complete working example, check out our full Nuxt example repository

​
Prerequisites

Before proceeding with Nuxt specific integration, ensure you have completed the general installation steps outlined in the General Installation

​
Integration

Create a Widget.vue file in your components directory to encapsulate the GlueX widget: 
<script setup>
import { onMounted, onUnmounted, ref } from 'vue';
import { createRoot } from 'react-dom/client';
import { createElement } from 'react';
import { GlueXWidget } from '@gluex/widget';

const container = ref(null)
let root = null

const config = {
  integrator: "",
  apiKey: "",

  // ... rest of the widget configuration
  // Example:
  // appearance: 'dark',
  // theme: {
  //   container: {
  //     boxShadow: '0px 8px 32px rgba(0, 0, 0, 0.08)',
  //     borderRadius: '16px',
  //   },
  // },
};

onMounted(() => {
  const mountNode = document.createElement('div')
  container.value.appendChild(mountNode)

  root = createRoot(mountNode)
  root.render(createElement(GlueXWidget, { config }))
})

onUnmounted(() => {
  if (root) root.unmount()
})
</script>

<template>
  <div class="widget-container" ref="container"></div>
</template>
Usage in Your App You can now import and use the widget component anywhere in your Nuxt application:
pages/index.vue
<script setup>
import Widget from '~/components/Widget.vue'
</script>
<template>
  <div>
    <h1>My DeFi App</h1>
    <Widget />
  </div>
</template>

​
Configuration

The widget is highly configurable through its config prop. This allows you to tailor its behavior, default settings and connected services to match your application’s requirements. For a complete list of all available configuration options and their detailed descriptions, please refer to the widget configuration section

​
Customization

Beyond basic configuration, the widget offers extensive customization capabilities to ensure it seamlessly integrates with your application’s branding and design system. You can customize nearly every visual aspect of the widget. For a complete list of all available configuration, theme options, appearance and their detailed descriptions, please refer to the widget customization section
Check out GlueX’s Widget Studio to customize and generate your custom widget configuration. It provides an interactive interface to adjust settings and see real time previews, then generates the corresponding config code snippet for you