feat: vue using common components

apps/sample-vue-app/package.json

@@ -31,6 +31,7 @@
         "root": true
     },
     "dependencies": {
+        "@vechain/vanilla-wallet-kit": "*",
         "@vechain/wallet-kit": "*",
         "core-js": "^3.8.3",
         "node-polyfill-webpack-plugin": "^2.0.1",

apps/sample-vue-app/src/App.vue

@@ -2,24 +2,21 @@
     <ConnexProvider>
         <img alt="Vue logo" src="./assets/logo.png" />
         <div id="app">
-            <button class="btn" type="button" @click="showModal">
-                Open Modal!
-            </button>
-
+            <vwk-connect-button-with-modal
+                mode="DARK"
+            ></vwk-connect-button-with-modal>
             <ConnectWalletModal v-show="isModalVisible" @close="closeModal" />
         </div>
     </ConnexProvider>
 </template>
 
 <script lang="ts">
-import ConnectWalletModal from './components/ConnectWalletModal.vue';
 import { defineComponent, ref } from 'vue';
 import ConnexProvider from '@/connex/ConnexProvider.vue';
 
 export default defineComponent({
     components: {
         ConnexProvider,
-        ConnectWalletModal,
     },
 
     setup() {

apps/sample-vue-app/src/connex/ConnexProvider.vue

@@ -13,6 +13,7 @@ import {
 } from '@/connex/keys';
 import { WalletActions, WalletState } from '@/connex/types';
 import { WalletConnectOptions } from '@vechain/wallet-connect';
+import { configureThorModal } from '@vechain/vanilla-wallet-kit';
 
 const initWallets = (hasWcOptions: boolean) => {
     const wallets: WalletSource[] = ['sync2'];
@@ -62,6 +63,8 @@ export default defineComponent({
             walletConnectOptions,
         });
 
+        configureThorModal(connex);
+
         const updateAccount = (addr: string) => {
             walletState.account = addr;
         };

apps/sample-vue-app/src/main.ts

@@ -1,4 +1,5 @@
 import { createApp } from 'vue';
 import App from './App.vue';
+import '@vechain/vanilla-wallet-kit';
 
 createApp(App).mount('#app');

apps/sample-vue-app/vue.config.js

@@ -12,4 +12,16 @@ module.exports = defineConfig({
             },
         },
     },
+    chainWebpack: (config) => {
+        config.module
+            .rule('vue')
+            .use('vue-loader')
+            .tap((options) => {
+                options.compilerOptions = {
+                    ...options.compilerOptions,
+                    isCustomElement: (tag) => tag.startsWith('vwk-'),
+                };
+                return options;
+            });
+    },
 });

package.json

@@ -8,7 +8,7 @@
         "build": "turbo run build",
         "build-react-kit": "turbo run build  --filter='@vechain/react-wallet-kit'",
         "build:deps": "turbo build --no-daemon --filter='@vechain/*'",
-        "clean": "npx turbo@latest run clean && rm -rf .turbo .parcel-cache",
+        "clean": "rm -rf .turbo .parcel-cache build && npx turbo@latest run clean",
         "dev": "turbo run dev --no-daemon",
         "format": "prettier --write \"**/*.{ts,tsx,md,json,js,jsx}\"",
         "install:all": "yarn && yarn run build:deps",

packages/vanilla-wallet-kit/package.json

@@ -16,7 +16,7 @@
     "types": "dist/index.d.ts",
     "scripts": {
         "build": "tsup",
-        "clean": "rm -rf dist",
+        "clean": "rm -rf dist .turbo",
         "dev": "parcel index.html --open",
         "format": "prettier \"**/*.{cjs,html,js,json,md,ts}\" --ignore-path ./.eslintignore --write",
         "lint": "eslint 'src/**/*.ts'",