Register components locally, and top component with router

aleksis/apps/alsijil/assets/components/alsijil/CourseBook.vue

 <template>
   <ApolloQuery
     :query="require('./CourseBook.graphql')"
-    :variables="{ lessonId }"
+    :variables="{ lessonId: $route.params.lessonId }"
   >
     <template v-slot="{ result: { loading, error, data } }">
         <!-- Error -->
@@ -54,8 +54,14 @@
 
 <script>
 import {CHANGES, SAVED, UPDATING} from "../../UpdateStatuses.js";
+import UpdateIndicator from "./UpdateIndicator.js";
+import LessonDocumentation from "./LessonDocumentation.js";
 
 export default {
+    components: {
+        UpdateIndicator,
+        LessonDocumentation
+    },
     methods: {
         processDataChange(event) {
             this.status = CHANGES;
@@ -78,13 +84,11 @@ export default {
             }, 500)
         }
     },
-    props: ["lessonId"],
     name: "course-book",
     data: () => {
         return {
             ping: "ping",
             status: SAVED,
-            // lessonId: 352
         }
     }
 }

aleksis/apps/alsijil/assets/components/alsijil/LessonDocumentation.js

+import PersonalNotes from "./PersonalNotes.js";
+
 export default {
+    components: {
+        PersonalNotes
+    },
     props: [
         "id",
         "date",

aleksis/apps/alsijil/assets/index.js

-import Vue from "vue"
-
-import UpdateIndicator from "./components/alsijil/UpdateIndicator.js";
-import PersonalNotes from "./components/alsijil/PersonalNotes.js";
-import LessonDocumentation from "./components/alsijil/LessonDocumentation.js";
 import CourseBook from './components/alsijil/CourseBook.vue'
 
-Vue.component(UpdateIndicator.name, UpdateIndicator);
-Vue.component(PersonalNotes.name, PersonalNotes);
-Vue.component(LessonDocumentation.name, LessonDocumentation);
-Vue.component(CourseBook.name, CourseBook);
+window.router.addRoute({ path: "/app/alsijil/coursebook/:lessonId", component: CourseBook });

aleksis/apps/alsijil/templates/alsijil/class_register/coursebook.html

@@ -9,7 +9,7 @@
 {% endblock %}
 {% block browser_title %}{% trans "Coursebook" %} {{ lesson }}{% endblock %}
 {% block content %}
-<course-book lesson-id="{{ lesson.id }}"></course-book>
+<router-view/>
 {% endblock %}
 
 {% block extra_body %}