Can I create a login page with HTML/CSS and javascript and later add VUE to it?

Question

For a school project I have to create a web based application for a library system where the librarian can login which takes them to a page where they can add/remove/edit books. I am in charge of the front-end and I am using Javascript and must use Vue (mandatory). I am wondering if I can first make this with HTML/CSS and javascript, then later add VUE components to it. Still really unsure about what javascript frameworks such as vue do. But I am learning javascript at the moment still. So want to add VUE later once done learning javascript basics. Or would this be starting all over again so I should use vue now?

Thank You

Answer 1

Opinions will vary on this question. Undoubtedly, long term it will make you a better web programmer to understand exactly what vue.js or any other library is doing is doing behind the scenes. Because all of these libraries are ultimately written in vanilla JavaScript, and are just translating what you do into vanilla JavaScript.

However that being said, since you're just starting out and your class is requiring vue.js, I tend to think it might be better to just start with vue. The two methods are different enough that learning the vanilla JavaScript way first won't necessarily help vue.js make more sense.

Eventually yes, it will help everything make more sense and will make you a much better web programmer than you would be without the vanilla JavaScript knowledge. But IMHO short term it probably won't help. In fact you might drown on information overload.

Since a picture...er...code snippet is worth a thousand words, I created a very simple example of how vanilla JS might handle a form submission versus how vue.js would do it. I've tried to add comments in the vanilla JS to show where vue.js is doing the same thing.

vanilla:

<form id='login-form'>
    <input id="uname" />
    <input type="password" id="pwd" />
    <input type="submit" value="Login" id="login" />
</form>

<script>
    var form = document.getElementById('login-form');  // handled below by el: '#login-vue'
    form.addEventListener('submit', function (e) { //handled below by @submit.prevent='submit'
        var uname = document.getElementById('uname').value; //handled below by v-model='uname'
        var pwd = document.getElementById('pwd').value; //handled below by v-model='pwd'
        console.log("submit form", { uname, pwd });
        e.preventDefault(); // handled below by .prevent on the @submit
    });
</script>

vue.js:

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<form id='login-vue' @submit.prevent='submit'>
    <input v-model='uname' />
    <input type="password" v-model='pwd' />
    <input type="submit" value="Login" />
</form>
<script>
    var app = new Vue({
        el: '#login-vue',
        data: { uname: '', pwd: '' },
        methods: {
            submit: function (e) {
                console.log("submit form", { uname: this.uname, pwd: this.pwd });
            }
        }
    })
</script>

If in looking at these examples you think the vanilla really helps you understand the vue.js, then maybe you're right to start there. If not, then you might want to just start with the vue.js.