feat(example-nuxtjs): ✨ add nuxtjs example

.gitignore

@@ -47,4 +47,11 @@ Thumbs.db
 .env.production.local
 
 # Next.js
-.next
+.next
+
+# Nuxt dev/build outputs
+.output
+.nuxt
+.nitro
+.cache
+dist

examples/nuxtjs/.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

examples/nuxtjs/.npmrc

@@ -0,0 +1 @@
+shamefully-hoist=true

examples/nuxtjs/README.md

@@ -0,0 +1,75 @@
+# Nuxt 3 Minimal Starter
+
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm run dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm run build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm run preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

examples/nuxtjs/app.vue

@@ -0,0 +1,24 @@
+<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>
+</template>

examples/nuxtjs/nuxt.config.ts

@@ -0,0 +1,32 @@
+import { defineNuxtConfig } from 'nuxt/config';
+import { join } from 'path';
+import { workspaceRoot } from '@nx/devkit';
+
+function getMonorepoTsConfigPaths(tsConfigPath: string) {
+  const tsPaths = require(tsConfigPath)?.compilerOptions?.paths as Record<
+    string,
+    string[]
+  >;
+
+  const alias: Record<string, string> = {};
+  if (tsPaths) {
+    for (const p in tsPaths) {
+      // '@org/something/*': ['libs/something/src/*'] => '@org/something': '{pathToWorkspaceRoot}/libs/something/src'
+      alias[p.replace(/\/\*$/, '')] = join(
+        workspaceRoot,
+        tsPaths[p][0].replace(/\/\*$/, ''),
+      );
+    }
+  }
+
+  return alias;
+}
+
+export default defineNuxtConfig({
+  /**
+   * aliases set here will be added to the auto generate tsconfig by Nuxt
+   * https://nuxt.com/docs/guide/directory-structure/tsconfig
+   **/
+  alias: getMonorepoTsConfigPaths('../../tsconfig.base.json'),
+  devtools: { enabled: true },
+});

examples/nuxtjs/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "nuxt-app",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "devDependencies": {
+    "@nuxt/devtools": "latest",
+    "nuxt": "^3.8.1",
+    "vue": "^3.3.8",
+    "vue-router": "^4.2.5"
+  },
+  "nx": {
+    "tags": [
+      "scope:nuxtjs"
+    ],
+    "implicitDependencies": [
+      "tag:scope:nuxtjs"
+    ],
+    "targets": {
+      "build": {
+        "outputs": [
+          "{projectRoot}/.output",
+          "{projectRoot}/.nuxt"
+        ]
+      }
+    }
+  }
+}

examples/nuxtjs/pages/index.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { useConnect, useConfig } from '@quirks/vue';
+import { suggestChains } from '@quirks/store';
+import { bitsong, bitsongAssetList } from '@nabla-studio/chain-registry';
+
+const { wallets } = useConfig();
+const { connect, disconnect, connected, status } = useConnect();
+
+const open = async (chainName: string) => {
+  await suggestChains(chainName, [
+    { chain: bitsong, assetList: bitsongAssetList, name: 'bitsong' },
+  ]);
+  await connect(chainName);
+};
+</script>
+
+<template>
+  <div>
+    Hello world {{ status }} {{ connected }}
+    {{ wallets.length }}
+    <button @click="disconnect" v-if="connected">DISCONNECT</button>
+    <div v-else>
+      <div v-for="wallet in wallets" :key="wallet.options.name">
+        <button
+          @click="
+            {
+              open(wallet.options.name);
+            }
+          "
+        >
+          <img
+            :src="wallet.options.logoUrls?.light?.svg"
+            :alt="wallet.options.prettyName"
+            height="48px"
+            width="48px"
+            :style="{ width: '48px', height: '48px' }"
+          />
+        </button>
+
+        <a
+          :href="
+            wallet.options.downloads && wallet.options.downloads.length > 0
+              ? wallet.options.downloads[0].link
+              : '#'
+          "
+          target="_blank"
+          v-if="!wallet.injected"
+        >
+          Install
+        </a>
+      </div>
+    </div>
+  </div>
+</template>