ZKsync Nuxt Starter Guide

Development instructions for building Web3 applications using this ZKsync Nuxt starter kit.

Project Overview

This is a ZKsync Nuxt starter kit for building Web3 applications with wallet connectivity and blockchain interactions. The project uses Nuxt 4 with Vue 3 and integrates ZKsync-specific features including SSO authentication.

Core Stack

Instructions

Package Manager

Use npm for all package management tasks in this project.

Development Server

Start the development server:

```bash

npm run dev

```

Tooling Guidelines

1. **Blockchain Interactions**

- Use viem for blockchain operations, NOT ethers library

- Reference: https://viem.sh/docs/getting-started

2. **ZKsync Integration**

- When using zksync-js, use viem as the underlying library

- Reference: https://matter-labs.github.io/zksync-js/latest/overview/index.html

3. **Wallet Management**

- Use wagmi for wallet management and user interactions

- Reference: https://wagmi.sh/vue/getting-started

4. **Contract Interactions**

- Use wagmi/core for contract operations

- Reference: https://wagmi.sh/core/getting-started

5. **Data Fetching**

- Use TanStack Query (Vue Query) for fetching and caching

- Reference: https://tanstack.com/query/latest/docs/framework/vue/overview

Auto-imports

The following are automatically imported and don't need explicit import statements:

Import Path Aliases

Example:

```typescript

import { something } from '~~/constants/config'

import Component from '~/components/MyComponent.vue'

```

UI Component Guidelines

1. **Prefer DaisyUI first** for standard UI components

2. **Use Reka UI** for more complex, headless UI components that need custom behavior

3. Don't worry about matching exact styling - styling will be updated separately

Development Workflow

1. **Planning First**

- Write out a plan for implementation

- Ask any clarifying questions before starting implementation

- Confirm approach with user when there are multiple valid options

2. **Implementation**

- Focus on functionality over perfect formatting

- Don't worry about TypeScript errors or ESLint warnings during development

- The stop hook will automatically format all changes

3. **Code Quality**

- Don't manually check types or run ESLint during development

- Automated tooling handles formatting and linting on save/commit

Example Usage

When asked to add a new feature:

1. Analyze the request and existing architecture

2. Write a brief implementation plan:

- Which composables/stores need to be created/modified

- Which UI components to use (DaisyUI vs Reka UI)

- How to integrate with wagmi/viem

- Data fetching strategy with TanStack Query

3. Ask clarifying questions about:

- Specific ZKsync network to target

- Wallet connection requirements

- Data persistence needs

4. Implement the feature following the tooling guidelines

5. Use auto-imports where available

6. Don't worry about formatting - let the stop hook handle it