Adding Vue to an AdonisJS application

Adding Vue to an AdonisJS application

3 lessons
Start course

Vue.js is a progressive JavaScript framework which means we can start with using it as a library and gradually move to use it as a full framework. In this course, we’ll be looking at how to add Vue.js to an AdonisJS application and see how to use Vue components directly inside your Edge files.


We start the course by installing and setting up Encore to be used to compile and serve our frontend assets.

What you'll learn

  • How to set up Encore in an existing AdonisJS application

Now, let’s install and set up Vue along with the necessary dependencies.

What you'll learn

  • Install and set up Vue.js
  • Set up Encore for compiling Vue.js
5m 42s

With all the setup out of the way, in this lesson, we create our first Vue component.

What you'll learn

  • How to create your first Vue component
  • Using Vue 3 script setup
  • How to use Vue component directly in Edge files
  • Make AdonisJS model usable in Vue

*Course still in development. Do check back often for updates.

Chimezie Enyinnaya

Hi, I'm Chimezie Enyinnaya, your teacher.

I’m a self-taught software developer based in Lagos, Nigeria, with over 8 years of experience. In the last couple of years, I've been doing more teaching because I enjoy sharing my knowledge so that others can benefit from it. Come along as I teach you all I know about AdonisJS, Node.js, and JavaScript at large!