Writing page components
Now let's start adding pages to our Vue.js application particularly for admins:
- In the
viewsdirectory, create a new folder and name itAdminDashboard. CreateDefaultContent.vue, the page forAdminDashboard. TheDefaultContentpage will be the default content of the application when a user goes to the/admin-dashboardpage. Here is the code forDefaultContent.vue:<template> Â Â <div> Â Â Â Â <div> Â Â Â Â Â Â <div class="text-h2 my-4">DefaultContent</div> Â Â Â Â </div> Â Â </div> </template> <script> export default { Â Â name: "DefaultContent", }; </script>The code is simple enough to show a proof of concept that we can navigate to this page using the
/admin-dashboardpath with text on the browser's screen. We will update this in the upcoming chapters. - Create another Vue component...