First shot on a DAPP with Nuxtjs, tailwind and web3.js

Overview

web3

First shot on a DAPP with Nuxtjs, tailwind and web3.js
The DAPP will be able to show BNB balance on Testnet and Mainnet and connection should be stored in the app state.

Todo

  • Network select component
  • Connect component
  • Dynamic image in network select
  • Link network with state in vuex
  • Link Connect with state
  • add web3.js
  • Connect web3.js to state
  • Read BNB balance main net
  • Read BNB balance test net
  • Final styling
  • Q/A

Build Setup

# install dependencies
$ npm install

# serve with hot reload at localhost:3000
$ npm run dev

# build for production and launch server
$ npm run build
$ npm run start

# generate static project
$ npm run generate

For detailed explanation on how things work, check out the documentation.

Special Directories

You can create the following extra directories, some of which have special behaviors. Only pages is required; you can delete them if you don't want to use their functionality.

assets

The assets directory contains your uncompiled assets such as Stylus or Sass files, images, or fonts.

More information about the usage of this directory in the documentation.

components

The components directory contains your Vue.js components. Components make up the different parts of your page and can be reused and imported into your pages, layouts and even other components.

More information about the usage of this directory in the documentation.

layouts

Layouts are a great help when you want to change the look and feel of your Nuxt app, whether you want to include a sidebar or have distinct layouts for mobile and desktop.

More information about the usage of this directory in the documentation.

pages

This directory contains your application views and routes. Nuxt will read all the *.vue files inside this directory and setup Vue Router automatically.

More information about the usage of this directory in the documentation.

plugins

The plugins directory contains JavaScript plugins that you want to run before instantiating the root Vue.js Application. This is the place to add Vue plugins and to inject functions or constants. Every time you need to use Vue.use(), you should create a file in plugins/ and add its path to plugins in nuxt.config.js.

More information about the usage of this directory in the documentation.

static

This directory contains your static files. Each file inside this directory is mapped to /.

Example: /static/robots.txt is mapped as /robots.txt.

More information about the usage of this directory in the documentation.

store

This directory contains your Vuex store files. Creating a file in this directory automatically activates Vuex.

More information about the usage of this directory in the documentation.

You might also like...
A single Web3 / Ethereum provider solution for all Wallets

Web3ModalVue A single Web3 / Ethereum provider solution for all Wallets Introduction Web3Modal is an easy-to-use library to help developers add suppor

Vue, JavaScript, blockchain, Web3

Web DEXTF Ðapp Project structure dapp-web + docs + jsdoc + node_modules + public + src ... Project setup yarn install See the Troublesho

Bridge from web2 to web3 for dev.to users. code for dev.to x appwrite hackathon

bridge can get dev.to users' articles and let them deploy their articles to the permanent storage provided by Arweave so that they can make their artices be permanently hosted in blockchain and no one can change them, delete them, and let them can not be accessed.

An offline-first SPA using Vue.js, the WordPress REST API and Progressive Web Apps
An offline-first SPA using Vue.js, the WordPress REST API and Progressive Web Apps

vue-wordpress-pwa An offline-first SPA using Vue.js, the WordPress REST API and Progressive Web Apps Live version: https://www.fullstackweekly.com/ De

an api first, head optional cms with based on vuejs and apache sling
an api first, head optional cms with based on vuejs and apache sling

peregrine cms Introduction Peregrine CMS (PER:CMS) is a Head Optional, API First Content Management System based on Apache Sling. It uses VueJS for th

A visualizer for pathfinding algorithms in 3D with maze generation, first-person view and device camera input.
A visualizer for pathfinding algorithms in 3D with maze generation, first-person view and device camera input.

Pathfinding Visualizer ThreeJS 🥇 Software Engineering Project Contest winner on AlgoExpert 🥇 A Visualizer for pathfinding algorithms in 3D. Live Dem

my first vue.js app, and my personal website.

www.leoo.tech Project setup yarn install Compiles and hot-reloads for development yarn serve Compiles and minifies for production yarn build Lints

Easy developer portfolio NuxtJS and TailwindCSS and discord status lanyard.
Easy developer portfolio NuxtJS and TailwindCSS and discord status lanyard.

Demo 👋 Personal Portfolio Nuxt JS is a developer portfolio built with the vue js framework. 🔧 Getting Started First of all, you should choose git to

A mobile first, handwritten, responsive web app for music fans.
A mobile first, handwritten, responsive web app for music fans.

neteast-music-vue Deployed link: https://neteast.netlify.com/ It is a mobile first responsive web app for listening music from Neteast cloud platform

Owner
Bob
Webdeveloper and blockchain enthousiast. Bahbv#8708
Bob
✍️ A local-first Markdown note-taking app built with Vue.js, Tailwind, and Electron.

✍️ A local-first Markdown note-taking app built with Vue.js, Tailwind, and Electron.

Suboptimal Engineer 16 Apr 18, 2022
DAPP of Rosefintech

Submit Bug Rosefintech-DAPP DAPP of Rosefintech Table of Contents Install Community Contact License Install This project uses Vue. Go check them out i

Rosefintech 11 Sep 24, 2021
Auction dapp - Decentralized Auction Application on Ethereum

Decentralized Auction Application on Ethereum This project aims to implement bas

Abhishek Chauhan 16 Nov 27, 2022
SolLinked is a decentralised application (dApp) that makes it simple to submit your achievements on the Solana Blockchain

SolLinked is a decentralised application (dApp) that makes it simple to submit your achievements on the Solana Blockchain

Anam Ansari 3 Sep 22, 2022
Dstar Note, a crypto notes dapp on Internet Computer (ICP)

notes Welcome to your new notes project and to the internet computer development community. By default, creating a new project adds this README and so

Dstar Global 12 Sep 10, 2022
Web3 with Nuxt, Moralis and TailwindCSS

Web3 using Nuxt, Moralis & TailwindCSS. Display a users balance, NFT Count and check if they own an NFT in your project.

Roy Barber 4 May 24, 2022
A sleek Open-Source, Non-Custodial, and Multi-Chain Crypto/Web3 wallet.

Vulture is an open-source cryptocurrency wallet that aims to become a general interface for blockchain, primarily made for Aleph Zero, but with a strong focus on supporting multi-chain.

psycoders.club 5 Sep 6, 2022
A Web3 platform for all content creators to continue doing what we like and enjoy.

Bitcoffee is a CrowdFonding Dapp on the RSK network, in which anyone can raise funds for their personal interests, campaigns, charity funds, etc., as well as for their followers to follow their goals, this through the use of crypto assets such as RBTC or our own token (BITC).

Angel Lopez 6 Nov 3, 2022
A nuxtjs, Tailwind CSS blogging template. Its supported Markdown for blog.

NuxtJs Tailwind Blog This is a nuxtjs, Tailwind CSS blogging template. Its supported Markdown for blog Examples/Demo Demo blog - This repo Build Setup

Md Rathik 44 Dec 29, 2022
The fast web3 application toolkit ⚡️

Building modern web3 applications should be simple, elegant and fast. Origin is an attempt to solve that problem with a focus to promote best practices in a lightweight, opinionated base configuration.

Application Research Group 54 Aug 9, 2022