Details

Written by: admin

Category: Basics

Published: 29 November 2025

Hits: 48

Phase 1: Environment Setup

Ensure you have the required prerequisites:

1. Install Node.js (LTS): Make sure you have Node.js and npm installed (check with node -v and npm -v).
2. VS Code: Ensure you are using Visual Studio Code.

Phase 2: Create the Next.js Project with TypeScript

We will use the official Next.js installer, which correctly sets up React, TypeScript, and Tailwind CSS.

1. Open Terminal: Open your integrated terminal in VS Code (Terminal > New Terminal).
2. Run Initialization Command: Execute the following command to create your project:(This command forces TypeScript, Tailwind CSS, ESLint, and the recommended App Router (--app).)
3. Bash npx create-next-app qml-viz-ts --ts --tailwind --eslint --app
   
   
   
4. Navigate: Change into the new project directory:
   Bash cd qml-viz-ts
   
   
5. Install D3.js and Types: Now, install the D3 library along with its TypeScript definitions (@types/d3). This step is crucial for TypeScript to understand D3's functions and methods.
   Bash
   npm install d3
   npm install --save-dev @types/d3
   
   
   
   
   
6. To run: npm run dev 

Details

Written by: admin

Category: Basics

Published: 08 September 2025

Hits: 270

https://vuejs.org/guide/quick-start.html

https://vuejs.org/guide/essentials/reactivity-fundamentals.html

Add this to your App.vue file as

The result should be like this:

 Add another file Hello.vue

Details

Written by: admin

Category: Basics

Published: 11 August 2025

Hits: 191

https://cli.vuejs.org/guide/creating-a-project.html

https://github.com/vuejs/create-vue

To create:

npm create vue@latest

To Run:

npm run dev

Fix if any issues:

npm install vite --save-dev

Project folders created:

Add Vue Router:

https://router.vuejs.org/guide/
https://router.vuejs.org/installation.html

npm install vue-router@4

With Router selected during npm vue create@latest