Building an Online Course Platform with Vue.js

Demonstrate how to build an online platform for selling frontend development courses, using Vue.js, to establish additional income streams.
  <div id="app">
    <course-list :courses="courses"></course-list>

import CourseList from './components/CourseList.vue';

export default {
  name: 'App',
  components: {
  data() {
    return {
      courses: [
        { title: 'Vue.js Basics', price: 50 },
        { title: 'Advanced Vue.js', price: 100 },
        // ... other courses

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
This is the main application instance where we define the `courses` data and include the `CourseList` component. The `courses` array will be passed as a prop to the `CourseList` component.
      <li v-for="course in courses" :key="course.title">
        <h3>{{ course.title }}</h3>
          Price: {{ course.price }} USD
          <button @click="buyCourse(course)">Buy Course</button>

export default {
  name: 'CourseList',
  props: ['courses'],
  methods: {
    buyCourse(course) {
      alert(`Buying course: ${course.title}`);
      // TODO: Implement actual purchase logic here
The `CourseList` component is responsible for displaying the list of courses and handling the purchase logic. The `courses` prop is used to display each course, and a button is provided to trigger the `buyCourse` method.