First Vue template: Login page
In this chapter we take the code from the login.html page and convert that into a Vue component, or page if you will. Here it is a page, but technically each page is just another Vue component. Let’s get started.
Open up your login.html
file and copy over everything inside the <body></body>
tags into the <template><template>
part of the login.vue
file. If you visit your /login
route, you should now see the same page as your static version. Let’s make this page a bit more interactive with Vue.
You might have noticed that the header and side navigation are visible, which they shouldn’t be. This is because you use App.vue
as a base for the admin app. For tutorial purposes, we can make an easy fix for this. You should not do this for production code. What you need to do is wrap your <nav>
and <section>
with a <template>
tag and a check if you are on the login page. To accomplish the latter, you can...