Setting Up a Nuxt 3 Project with Git, Dependencies, and Configuration

This guide walks you through setting up a Nuxt 3 project with Git, installing necessary dependencies, configuring modules, and preparing your project structure.

1. Initialize Git and Connect to a Remote Repository

Run the following commands to initialize Git and link it to your repository:

git init
git remote add origin https://github.com/SGSTeamDev/frontend-starter-lib.git

git init: Initializes a new Git repository in your project.

git remote add origin https://github.com/SGSTeamDev/frontend-starter-lib.git: Links your project to a remote repository.

git remote -v
git add .
git commit -m "initial commit"

git remote -v: Verifies that the remote repository is correctly set.

git add . and git commit -m "initial commit": Stages and commits all

git pull --allow-unrelated-histories origin main
git remote remove origin

git pull --allow-unrelated-histories origin main: Pulls the latest changes from the remote repository, allowing unrelated histories to merge.

git remote remove origin: Removes the existing remote origin.

git remote add origin <new-project-repository-url>
git remote -v

git remote add origin : Re-adds the correct remote repository.

git remote -v: Confirms that the repository has been set up correctly.

2. Install Dependencies

Run the following command to install essential dependencies:

npm install primevue@4.1.0 @primevue/themes primeicons pinia-plugin-persistedstate @vueuse/core vite-svg-loader joi moment

This installs: primevue - UI component library

@primevue/themes - Theme support for PrimeVue

primeicons - Icon library

pinia-plugin-persistedstate - Enables persistent state management for Pinia

@vueuse/core - Utility functions for Vue

Install Development Dependencies

npm install -D tailwindcss@3.4.17 postcss autoprefixer @primevue/nuxt-module@4.1.0 prettier eslint-plugin-prettier eslint-config-prettier

This installs: tailwindcss - Utility-first CSS framework

postcss & autoprefixer - Required for TailwindCSS

@primevue/nuxt-module - Integration module for PrimeVue in Nuxt

prettier, eslint-plugin-prettier, eslint-config-prettier - Code formatting & linting

3. Add Nuxt Modules

npx nuxi@latest module add pinia
npx nuxi module add eslint

This automatically sets up Pinia (state management) and ESLint (linting) in your Nuxt project.

4. Replace Example Files with Original Files

Your project includes example files that need to be copied and replaced with the original files. The existing example files are:

app.example.vue
nuxt.config.example.ts
package.example.json

Replace them with the actual project files:

1. Copy the content from the example files into the corresponding real files:

Copy app.example.vue → Paste into app.vue
Copy nuxt.config.example.ts → Paste into nuxt.config.ts
Copy package.example.json → Paste into package.json script

2. Once the copying is complete, delete the example files: Git Bash Terminal

rm app.example.vue nuxt.config.example.ts package.example.json

This ensures that your project is correctly structured and ready for further development.