Installation

Step-by-step guide to getting Haze Dashboard running on your local machine.

Prerequisites

Before you begin, make sure you have the following installed:

Node.js 18+ — Download Node.js
npm, pnpm, or yarn — npm ships with Node.js. For alternatives: pnpm or yarn
A code editor — VS Code with the Vue - Official extension is recommended

Step 1: Clone the Repository

Clone the repository and navigate to the project directory:

bash

git clone 
cd haze-dashboard-nuxt

If you downloaded a zip file, extract it and cd into the extracted directory instead.

Step 2: Install Dependencies

Install all project dependencies using your preferred package manager:

bash

# npm
npm install

# or pnpm
pnpm install

# or yarn
yarn install

This installs Nuxt 4, Nuxt UI, Tailwind CSS v4, Unovis, Pinia, and all other dependencies. The postinstall script runs nuxt prepare automatically to generate TypeScript types.

Step 3: Start the Development Server

bash

npm run dev

The application is available at http://localhost:3000. Nuxt provides hot module replacement (HMR) so changes to Vue components, composables, and styles appear instantly without a full page reload.

Unlike traditional backends, there is no database to configure. All data comes from mock server routes that return JSON — the dashboard is fully functional out of the box.

Step 4: Build for Production

When you are ready to deploy, create an optimized production build:

bash

npm run build

This creates a production-ready output in the .output/ directory. The build includes both the server (Nitro) and the client bundle. For static hosting, use npx nuxt generate instead to pre-render all routes as static HTML.

Available Commands

Command	Description
`npm run dev`	Start the Nuxt development server with HMR
`npm run build`	Create an optimized production build (SSR)
`npm run preview`	Preview the production build locally
`npx nuxt generate`	Pre-render all routes as static HTML
`npx nuxi add page <name>`	Scaffold a new page via the Nuxt CLI

Demo Credentials

The template ships with three demo users, each with a different role and permission set:

Role	Email	Password
Admin	admin@haze.dev	password
Editor	editor@haze.dev	password
Viewer	viewer@haze.dev	password

Tip

Auto-login — the template automatically logs in as the Admin user in development. You can switch users from the auth pages or by modifying the initial user in app/stores/auth.ts.

Next Steps

Now that you have the project running, explore the Folder Structure to understand how the codebase is organized.