Nuxt 3 Minimal Starter Noir

This a minimal starter to build Noir Interface with Nuxt3 Framework.

Before running the ui, you will need to build the circuits and deploy the verifier contract. nargo is required, and bun was used as javascript runtime environment for nuxt, but yarn npm and pnpm can be used.

Follow guidance from Noir documentation to install noirup and compile circuits using nargo nightly: noirup -n

Please note that this set up is circulvening some current compatibility issues with vite and has the following improvement required when vite framework has solved some issues with wasm: _ use multithread ( noirBrowser is single threaded in this example) _ build for production. bun run build meets an open vite issue: vitejs/vite#13367 . make sure to follow the issue and show your interest in it being solved if you're interested in developing noir ui with nuxt / vuejs.

Compile circuits

NoirBrowser class present in the utils requires access to the circuit bytecodes in order to work. The file, available at circuits/target/noirstarter.json was produced by running nargo compile from the circuits directory.

Deploy verifier contract

The current template uses hardhat as deployment environment. set up was inspired from https://github.com/PaulRBerg/hardhat-template if you need more information. The verifier contract for the demo circuit was generated by running nargo codegen-verifier from the circuits directory. Contract was then moved to hardhat/contracts for deployment and tests (workflow can be improved in the future).

A verifier contract is already deployed and available to use on Sepolia network at the address: 0x668C963776248b95aD19e33522A1125edbAfD004

If you need to deploy your own version follow the traditional hardhat workfow: _ go to hardhat project folder : cd hardhat _ install dependencies: yarn install _ make sure you have the set up the environment variables required to deploy on desired network: alchemy api key + private key for sepolia , infura api key + private key for others ( see hardhat config.json) _ deploy yarn deploy:contracts

Run ui

This starter uses bun runtime environment for performance improvement on proof generation. It is also compatible with npm, pnpm and yarn. A very small increase of performance ( ~5%) is noticed between bun and yarn when computing the proof. this will have to be tested on larger proofs as this example one is very small.

Make sure to install the dependencies:

# bun
bun install

# npm
bun install
# pnpm
pnpm install

# yarn
yarn install

Development Server

Start the development server on http://localhost:3000:

# npm
bun run dev

# npm
npm run dev

# pnpm
pnpm run dev

# yarn
yarn dev