npx create-nuxt-app <project-name>

    cd <project name> && yarn dev

    export default {
      // Global page headers: https://go.nuxtjs.dev/config-head
      head: {
         //...
        link: [
          { rel: "icon", type: "image/x-icon", href: "/favicon.ico" },
          {
            rel: "stylesheet",
            href: "https://unpkg.com/@appwrite.io/pink",
          },
          {
            rel: "stylesheet",
            href: "https://unpkg.com/@appwrite.io/pink-icons",
          },
        ],
      },

     //...
    };

    [
      {
        "id": 1,
        "title": "Introduction to Web Development",
        "description": "Learn the basics of web development with HTML, CSS, and JavaScript.",
        "level": "Beginner",
        "prerequisites": [],
        "category": 1
      },
      {
        "id": 2,
        "title": "Advanced Web Development",
        "description": "Build complex web applications with React, Node.js, and MongoDB.",
        "level": "Intermediate",
        "prerequisites": ["Introduction to Web Development"],
        "category": 1
      },
      {
        "id": 3,
        "title": "Introduction to Mobile Development",
        "description": "Learn the basics of mobile development with React Native and Expo.",
        "level": "Beginner",
        "prerequisites": ["Introduction to Web Development"],
        "category": 2
      },
      {
        "id": 4,
        "title": "Data Analysis with Python",
        "description": "Learn how to analyze and visualize data using Python and Pandas.",
        "level": "Intermediate",
        "prerequisites": ["Introduction to Web Development"],
        "category": 3
      },
      {
        "id": 5,
        "title": "User Interface Design Fundamentals",
        "description": "Learn the basics of user interface design with Sketch.",
        "level": "Beginner",
        "prerequisites": [],
        "category": 4
      },
      {
        "id": 6,
        "title": "Cloud Computing with AWS",
        "description": "Learn how to deploy and scale web applications on Amazon Web Services.",
        "level": "Intermediate",
        "prerequisites": ["Introduction to Web Development"],
        "category": 5
      }
    ]

    <template>
      <div>
        <div class="container">
          <div class="sidebar">
            <!-- Sidebar content goes here -->
           </div>
          <div class="content">
             <!-- Search and Course list goes here -->
          </div>
        </div>
        <div class="course-modal" v-if="selectedCourse">
          <div class="modal-content">
            <!-- Modal goes here -->
          </div>
        </div>
      </div>
    </template>

    <template>
      <!--  -->
    </template>

    <style>
    @import '@/styles.css';
    </style>

    <template>
      <div>
        <div class="container">
          <div class="sidebar">

          </div>
          <div class="content">
            <h1 class="course-catalogue-title">
              Course Catalog With Pink Design and Nuxt.js
            </h1>
             <!-- Search goes here -->
            <div class="courses">
              <div
                class="course-card"
                v-for="course in filteredCourses"
                :key="course.id"
              >
                <div class="card" @click="openCourseModal(course)">
                  <div class="card-content">
                    <h3 class="title">{{ course.title }}</h3>
                    <div class="description">{{ course.description }}</div>
                    <div class="details">
                      <div class="level">{{ course.level }}</div>
                    </div>
                  </div>

                </div>
              </div>
            </div>
          </div>
        </div>
        </div>
        <div class="course-modal" v-if="selectedCourse">
          <div class="modal-content">
           <!-- Modal goes here -->
          </div>
        </div>
      </div>
    </template>
    <!--  -->

    <!-- Importing data from a JSON file named courses.json -->
    <script>
    import coursesData from '../courses.json'

    export default {
      // Defining the data property of the component
      data() {
        // Returning an object with a key of 'courses' and its value set to the imported coursesData
        return {
          courses: coursesData,
        }
      },
    }
    </script>

    <template>
      <div>
        <div class="container">
          <!-- //... -->
        </div>
        <div class="course-modal" v-if="selectedCourse">
          <div class="modal-content">
            <span class="close-modal" @click="closeCourseModal">&times;</span>
            <h2 class="modal-title">{{ selectedCourse.title }}</h2>
            <div class="modal-description">{{ selectedCourse.description }}</div>
            <div class="details">
              <div class="modal-level">{{ selectedCourse.level }}</div>
            </div>
            <div class="modal-prerequisites">
              <h3>Prerequisites</h3>
              <ul v-if="selectedCourse.prerequisites.length">
                <li
                  v-for="prerequisite in selectedCourse.prerequisites"
                  :key="prerequisite"
                >
                  {{ prerequisite }}
                </li>
              </ul>
              <p v-else>None</p>
            </div>
          </div>
        </div>
      </div>
    </template>

    <script>
    // Import courses data from JSON file
    import coursesData from "../courses.json";
    export default {
      data() {
        return {
          //...
          selectedCourse: null,
        };
      },
      methods: {
        //...
        openCourseModal(course) {
          this.selectedCourse = course;
        },
        closeCourseModal() {
          this.selectedCourse = null;
        },
      },
      computed: {
        //...
      },
    };
    </script>

    //...