Merge pull request #13 from nabla-studio/DavideSegullo/fix-vue

Davide segullo/fix vue

.github/actions/test/action.yml

@@ -8,10 +8,10 @@ runs:
   steps:
     - name: Lint
       shell: bash
-      run: pnpm exec nx affected:lint --exclude nextjs,nuxtjs
+      run: pnpm exec nx affected:lint --exclude nextjs,nuxtjs,vue3
     - name: Build
       shell: bash
-      run: pnpm exec nx affected:build --exclude nextjs,nuxtjs
+      run: pnpm exec nx affected:build --exclude nextjs,nuxtjs,vue3
     - name: Test
       shell: bash
-      run: pnpm exec nx affected:test --exclude nextjs,nuxtjs
+      run: pnpm exec nx affected:test --exclude nextjs,nuxtjs,vue3

.vscode/settings.json

@@ -14,6 +14,8 @@
     "wallets",
     "react",
     "store",
-    "vue"
+    "vue",
+    "examples-vue3",
+    "nuxt"
   ]
 }

examples/nuxtjs/app.vue

@@ -1,24 +1,3 @@
-<script setup lang="ts">
-import { QuirksConfig } from '@quirks/vue';
-import {
-  bitsong,
-  bitsongAssetList,
-  osmosis,
-  osmosisAssetList,
-} from '@nabla-studio/chain-registry';
-import { type Config, ssrPersistOptions } from '@quirks/store';
-import { keplrExtension, leapExtension } from '@quirks/wallets';
-
-const config: Config = {
-  wallets: [keplrExtension, leapExtension],
-  chains: [osmosis, bitsong],
-  assetsLists: [osmosisAssetList, bitsongAssetList],
-  persistOptions: ssrPersistOptions,
-};
-</script>
-
 <template>
-  <QuirksConfig :config="config">
-    <NuxtPage />
-  </QuirksConfig>
+  <NuxtPage />
 </template>

examples/nuxtjs/nuxt.config.ts

@@ -1,6 +1,8 @@
 import { defineNuxtConfig } from 'nuxt/config';
 import { join } from 'path';
 import { workspaceRoot } from '@nx/devkit';
+import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill';
+import { NodeModulesPolyfillPlugin } from '@esbuild-plugins/node-modules-polyfill';
 
 function getMonorepoTsConfigPaths(tsConfigPath: string) {
   const tsPaths = require(tsConfigPath)?.compilerOptions?.paths as Record<
@@ -29,4 +31,32 @@ export default defineNuxtConfig({
    **/
   alias: getMonorepoTsConfigPaths('../../tsconfig.base.json'),
   devtools: { enabled: true },
+  modules: ['../../packages/nuxt/src/index'],
+  vite: {
+    resolve: {
+      alias: {
+        process: 'process/browser',
+        util: 'util',
+      },
+    },
+    optimizeDeps: {
+      esbuildOptions: {
+        target: 'esnext',
+        define: {
+          global: 'globalThis',
+        },
+        plugins: [
+          NodeGlobalsPolyfillPlugin({
+            process: true,
+            buffer: true,
+            crypto: true,
+          }),
+          NodeModulesPolyfillPlugin(),
+        ],
+        supported: {
+          bigint: true,
+        },
+      },
+    },
+  },
 });

examples/nuxtjs/package.json

@@ -9,9 +9,6 @@
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare"
   },
-  "dependencies": {
-    "osmojs": "^16.5.1"
-  },
   "devDependencies": {
     "@nuxt/devtools": "latest",
     "nuxt": "^3.8.1",
@@ -33,5 +30,13 @@
         ]
       }
     }
+  },
+  "dependencies": {
+    "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
+    "@esbuild-plugins/node-modules-polyfill": "^0.2.2",
+    "@nabla-studio/chain-registry": "^0.2.1",
+    "@quirks/store": "^0.4.1",
+    "@quirks/wallets": "^0.3.2",
+    "stargazejs": "^0.14.1"
   }
 }

examples/nuxtjs/pages/index.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { useConnect, useConfig, useChains } from '@quirks/vue';
-import { suggestChains } from '@quirks/store';
 import { bitsong, bitsongAssetList } from '@nabla-studio/chain-registry';
 
 const { wallets } = useConfig();
@@ -15,9 +13,7 @@ const open = async (chainName: string) => {
 };
 
 const send = async () => {
-  const cosmos = (await import('osmojs')).cosmos;
-  const sign = (await import('@quirks/store')).sign;
-  const getAddress = (await import('@quirks/store')).getAddress;
+  const cosmos = (await import('stargazejs')).cosmos;
   const { send } = cosmos.bank.v1beta1.MessageComposer.withTypeUrl;
 
   const address = getAddress('osmosis');

examples/nuxtjs/plugins/quirks.ts

@@ -0,0 +1,18 @@
+import {
+  bitsong,
+  bitsongAssetList,
+  osmosis,
+  osmosisAssetList,
+} from '@nabla-studio/chain-registry';
+import type { Config } from '@quirks/store';
+import { keplrExtension, leapExtension } from '@quirks/wallets';
+
+const config: Config = {
+  wallets: [keplrExtension, leapExtension],
+  chains: [osmosis, bitsong],
+  assetsLists: [osmosisAssetList, bitsongAssetList],
+};
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.use(quirksPlugin, config);
+});