Writing page components
Now let's start adding pages to our Vue.js application particularly for admins:
- In the
views
directory, create a new folder and name itAdminDashboard
. CreateDefaultContent.vue
, the page forAdminDashboard
. TheDefaultContent
page will be the default content of the application when a user goes to the/admin-dashboard
page. 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-dashboard
path with text on the browser's screen. We will update this in the upcoming chapters. - Create another Vue component...