Permasalahan yang sering dihadapi oleh pengembang antarmuka berbasis website adalah penulisan kode program yang berulang pada komponen yang sama, sehingga kode program yang ditulis menjadi kurang efisien, fleksibel dan mempersulit proses pemeliharaan. Dalam penelitian ini dilakukan pengembangan antarmuka website e-learning menggunakan arsitektur berbasis komponen. Penerapan arsitektur berbasis komponen bertujuan untuk membuat kode program pada suatu komponen dapat digunakan kembali, fleksibel dan mempermudah proses pemeliharaan. Penelitian ini akan menggunakan framework Vue.js untuk menerapkan arsitektur berbasis komponen. Hasil dari kode program antarmuka website menggunakan Vue.js akan diuji menggunakan pengujian otomatis dengan unit testing menggunakan Jest. Pengujian otomatis dapat memberikan feedback yang cepat dan memungkinkan pengembang menemukan kesalahan kode setelah dibuat. Pengujian dengan unit testing menggunakan Jest akan menghasilkan matrik code coverage yang digunakan untuk menyatakan bagian kode perangkat lunak yang tidak dilakukan pengujian. Matrik tersebut menandakan bahwa ada tes yang cukup untuk kode program, menghasilkan kelangkaan kerusakan perangkat lunak dan memberikan keyakinan untuk pengembang mengubah kode yang ada. Hasil dari penelitian ini menunjukkan bahwa pengembangan antarmuka wesbite e-learning dengan menerapkan arsitektur berbasis komponen menggunakan Vue.js dapat membuat kode program dapat digunakan kembali, efisien, fleksibel dan mudah untuk dipelihara.