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.

<template>
  <div id="app">
    <course-list :courses="courses"></course-list>
  </div>
</template>

<script>
import CourseList from './components/CourseList.vue';

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

<style>
#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;
}
</style>

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.

<template>
  <div>
    <ul>
      <li v-for="course in courses" :key="course.title">
        <h3>{{ course.title }}</h3>
        <p>
          Price: {{ course.price }} USD
          <button @click="buyCourse(course)">Buy Course</button>
        </p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'CourseList',
  props: ['courses'],
  methods: {
    buyCourse(course) {
      alert(`Buying course: ${course.title}`);
      // TODO: Implement actual purchase logic here
    }
  }
};
</script>

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.