Starting with VueJS

erpnext/public/js/education/web-academy.js

@@ -8,9 +8,9 @@ import AcademyCoursePage from "./web-academy/pages/AcademyCoursePage.vue";
 Vue.use(VueRouter)
 
 const routes = [
-	{path: '', component: AcademyHome},
-	{path: '/Program/:code', component: AcademyProgramPage, props: true},
-	{path: '/Course', component: AcademyCoursePage},
+	{name: 'home', path: '', component: AcademyHome},
+	{name: 'program', path: '/Program/:code', component: AcademyProgramPage, props: true},
+	{name: 'content', path: '/Program/:code/:course/:type/:content', component: AcademyCoursePage, props: true},
 ];
 
 const router = new VueRouter({
@@ -18,7 +18,7 @@ const router = new VueRouter({
 });
 
 frappe.ready(() => {
-	new Vue({
+	window.v = new Vue({
 		el: "#web-academy",
 		router: router,
 		template: "<academy-root/>",

erpnext/public/js/education/web-academy/AcademyRoot.vue

@@ -1,6 +1,6 @@
 <template>
 	<div id="academy-root">
-	<router-view></router-view>
+	<router-view :key="$route.fullPath"></router-view>
 	</div>
 </template>
 <script>

erpnext/public/js/education/web-academy/pages/AcademyHome.vue

@@ -1,17 +1,36 @@
 <template>
 <div>
-	<AcademyTopSection/>
-	<AcademyCardList/>
+	<AcademyTopSection :title="title" :description="description"/>
+	<AcademyList :title="'Featured Programs'" :description="'Master ERPNext'">
+        <AcademyProgramCard v-for="program in featured_programs" :key="program.name" :program_code="program"/>
+    </AcademyList>
 </div>
 </template>
 <script>
 import AcademyTopSection from "../components/AcademyTopSection.vue"
-import AcademyCardList from "../components/AcademyCardList.vue"
+import AcademyList from "../components/AcademyList.vue"
+import AcademyProgramCard from "../components/AcademyProgramCard.vue"
 
 export default {
     name: "AcademyHome",
+    data() {
+    	return{
+    		title: '',
+    		description: '',
+            featured_programs: []
+    	}
+    },
     components: {
-		AcademyTopSection, AcademyCardList
-	}
+		AcademyTopSection, AcademyList, AcademyProgramCard
+	},
+	mounted() {
+    	frappe.call("erpnext.www.academy.get_portal_details").then(r => {
+    		this.title = r.message.title,
+    		this.description = r.message.description
+    	});
+        frappe.call("erpnext.www.academy.get_featured_programs").then(r => {
+            this.featured_programs = r.message
+        });
+    },
 };
 </script>