https://github.com/apillon/apillon-app

Dashboard frontend
https://github.com/apillon/apillon-app

Last synced: about 1 month ago
JSON representation

Dashboard frontend

• Host: GitHub
• URL: https://github.com/apillon/apillon-app
• Owner: Apillon
• License: gpl-3.0
• Created: 2023-03-27T13:51:52.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2024-11-05T13:54:42.000Z (about 2 months ago)
• Last Synced: 2024-11-05T14:49:25.919Z (about 2 months ago)
• Language: Vue
• Size: 7.55 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# Apillon - A Web3 development platform

This repository contains source code for the Dashboard frontend.

## Stack

- node 20.8.1

- Nuxt 3

- Vue 3 w/ TypeScript

- Pinia Store

- NaiveUI

- TailwindCSS

- Wagmi & viem

## Info

### API

API interaction should be done with `fetch` api wrapper. Globally imported as `$api`.

```js

await $api.get('/login', formData);

```

### Blockchain

Blockchain connection is realized with [viem](https://viem.sh/) and [wagmi](https://github.com/wagmi-dev/wagmi). For easier integration, a vue wrapper is used: [use-wagmi](https://github.com/unicape/use-wagmi). Docs for react hooks work with use-wagmi: [https://wagmi.sh/react/hooks/useAccount](https://wagmi.sh/react/hooks/useAccount).

Wagmi config is in `~/plugins/use-wagmi.ts`. Connectors, available chains and RPC urls can be defined here.

### Error handling

Errors are handled with the global function `userFriendlyMsg` and displayed as toast message with Naive UI. Error messages need to be translated, so error messages are written to `~/locales/en.json`

```js

  } catch (error) {

    message.error(userFriendlyMsg(error));

  }

```

### Vueuse

Many common tasks can be solved with using helper functions from [vueuse](https://vueuse.org/functions.html). Use those instead of reinventing the wheel.

eg.

```js

useIntersectionObserver();

useInfiniteScroll();

useScroll();

useScrollLock();

```

### Images

Use `` component to lazy load images. Implements [v-lazy-image](https://github.com/alexjoverm/v-lazy-image). `:src` can be link to (eg. public assets `./images/test.png`), or image imported as module.

For images that dont need lazy load, use html ``. The `:src` can then also be provided with resolve token (eg. `~/assets/images/test.png`).

```html

  import imgTest from '~/assets/images/test.png';



```

### Icons

Add icon svg to `/assets/icons`, then use `` component to use the icon - set name prop to filename. Implements [nuxt-icons](https://github.com/gitFoxCode/nuxt-icons).

Control size with font-size.

```html

```

### Icons (Icomoon)

To open and edit icons from font Apillon, open (https://icomoon.io/app/#/select) and import file 'assets\css\fonts\apillon\selection.json'.

Control size with font-size and color.

```html



```

### Breakpoints

For basic styles, use tailwind breakpoint system. For js usage, use `useScreen` composable.

```js

const screens = reactive(useScreen());

// or

const { isXl } = useScreen();

```

```html





```