Learn Laravel Vuejs from scratch

Replicating the Tesla UI and Building a TESLA web application, using VueJs, VueX, Vuetify, Laravel, CSS and Bootstrap. Vue JS Courses Free

Vue JS Courses Free

Replicating the Tesla UI and Building a TESLA web application

Learn Laravel Vuejs from scratch – Build a TESLA web app

What you’ll learn
A thorough understanding of Laravel and PHP for implementing Backends
Implement web applications using Vuejs and JS
Designing beautiful layouts effortlessly using Vuetify
Vuex for Implementing a global storage system
Vue Router for navigating between screens
CSS and Bootstrap for detailed custom designs
MySQL for data storage
HTML for screen content structure

Basic IT skills
‌Hello and welcome to this course.

‌This course will teach you how to use the Laravel and Vuejs frameworks completely from scratch.‌ In this course we will be building and going through a few projects.


‌Firstly we will start with our todos project. In this project we will go through the basics so that you will have a good understanding of the architecture and paradigm for the Laravel and Vuejs frameworks.


‌Then we can progress and dive into more complex things. In the commencing project, we will design and build a tesla web application. ‌We will first try to somewhat replicate the Tesla website’s homepage and then we will program the complete web application which is comprised of the backend for the admins to manage, and the front end for the users to use.


‌We will use many libraries for Vuejs to implement the projects such as Vuetify for making beautiful designs effortlessly, vuex to allow us to implement a global storage system which allows all components to connect to it and access the core data of the web application. We will also use the Event bus to allow different components to communicate between eachother and we will use other tools such as css, bootstrap, and more.

Vue JS Courses Free


I hope you enroll and make the most of this course.

Who this course is for:
Students curious about web development
Students curious about Full-Stack web development


Project 1 – Build a Todo web application


1-Tools required

2-Downloading required tools

3-Setting up project

4-Connecting blade with vue

5-Todos CRUD

6-Creating components

7-Setting up fontawesome

8-Adding todo items

9-Displaying todo items

10-Marking todos as completed

11-Deleting todos

Learn Laravel Vuejs from scratch – Build a TESLA web app

Project 2 – Replicating the Tesla home page with vuetify


1-Installing vue-cli and creating the project

2-Designing the navbar component

3-Designing the promo component

4-Designing the Specifications component

5-Designing the interior and Car core features component

6-Designing the order now component

7- Project Summary

Project 3 – Building a complete CRUD Tesla web application with an online shop


1-Creating and setting up the project

2-Setting up vue router

3-Setting up vuetify

4-Designing the navbar component

5-Implementing the Model, View and Controller for categories

6-Add category route and button

7- Designing the category form

8- Connecting the category form with the state of the component

9- Implementing the store category function for submitting the form

10- Implementing the delete category function

11- Designing the edit category component and implementing the edit category fun

12- Implementing the products model and controller

13- Designing the Add Product component

14- Submitting the product form

15- Implementing the Products browse page

16 – Deleting Products

17- Editing products

18- Designing the client AppNavigator and HomePage component

19- Configuring things in web php file

20- Designing the Login component

21- Setting up laravel sanctum and submitting the login form

22- Implementing the logout button

23- Switching the AppNavigator based on authentication

24- Setting a relationship between the products and categories

25- Adding products to a specific category and setting a base url for axios

26- Designing the shop component

27- Designing Product Details Component

28- Designing the Category products component

29-Designing the Cart component and setting up vuex for the cart

30- Summarizing the project

We will be happy to hear your thoughts

Leave a reply

Reset Password
Compare items
  • Total (0)