developernaren / nuxtjs-demo

NuxtJs Demo: Start to Deployment, NuxtJs app in 6 Steps

What we are building

The completed app is deployed here

I created this repo as part of presentation for Dubai Js Meetup 03.
In this repo, I am demonstrating the basics of a NuxtJs App. I am creating a simple app that lists buildings but to see the details of the buildings you need to login into the app.

This is a test repo I have created for reference for the live demo I will be doing.

Technologies, Plugins and Frameworks Used

1. NodeJs
2. VueJs
3. Express
4. Config
5. Create Nuxt App
6. Tailwind Css

Nuxt Plugins Used

1. Nuxt Axios
2. Nuxt Auth

Steps

I. The First Step

1. Added a layout for building listing. Links for design "inspirations".
   • Menu Design from here
2. Added a layout for login. Layout and page design from here
   • Page Design from here
3. Added a page to list buildings
   • Card Design from here

Changes here

II. The Second Step

1. Added Nuxt Axios to the project.
2. Added endpoint api/buildings that return a list of buildings. Since Nuxtjs basically is a nodeJs server. We can add routes and consume them
3. Consumed the created endpoint to make the list of buildings dynamic.

Changes here

III. The Third Step

1. Added a detail page for building details
   • Menu Design from here

Changes here

IV. The Fourth Step

1. Added endpoint to accept email and password for authentication.
2. Added endpoint to get detail of the authenticated user.
3. Added login and logout functionality for frontend.
4. Added a condition so that only authenticated user can see the detail page.

Changes here

V. The Fifth Step

1. Added seo for the homepage

Changes here

VI. The Sixth Step

1. Deploy to Heroku

Changes here