Learn Laravel Vuejs from scratch - Build a TESLA web app
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.
More
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.
Watch Online Learn Laravel Vuejs from scratch - Build a TESLA web app
| # | Title | Duration |
|---|---|---|
| 1 | 1-Tools required | 00:59 |
| 2 | 2-Downloading required tools | 01:09 |
| 3 | 3-Setting up project | 04:20 |
| 4 | 4-Connecting blade with vue | 02:25 |
| 5 | 5-Todos CRUD | 13:49 |
| 6 | 6-Creating components | 08:39 |
| 7 | 7-Setting up fontawesome | 03:32 |
| 8 | 8-Adding todo items | 05:45 |
| 9 | 9-Displaying todo items | 13:45 |
| 10 | 10-Marking todos as completed | 03:44 |
| 11 | 11-Deleting todos | 02:48 |
| 12 | 1-Installing vue-cli and creating the project | 03:08 |
| 13 | 2-Designing the navbar component | 05:01 |
| 14 | 3-Designing the promo component | 04:19 |
| 15 | 4-Designing the Specifications component | 11:08 |
| 16 | 5-Designing the interior and Car core features component | 06:10 |
| 17 | 6-Designing the order now component | 02:40 |
| 18 | 7- Project Summary | 00:54 |
| 19 | 1-Creating and setting up the project | 05:50 |
| 20 | 2-Setting up vue router | 06:41 |
| 21 | 3-Setting up vuetify | 01:51 |
| 22 | 4-Designing the navbar component | 03:00 |
| 23 | 5-Implementing the Model, View and Controller for categories | 18:58 |
| 24 | 6-Add category route and button | 01:37 |
| 25 | 7- Designing the category form | 05:52 |
| 26 | 8- Connecting the category form with the state of the component | 01:11 |
| 27 | 9- Implementing the store category function for submitting the form | 13:42 |
| 28 | 10- Implementing the delete category function | 04:24 |
| 29 | 11- Designing the edit category component and implementing the edit category fun | 08:10 |
| 30 | 12- Implementing the products model and controller | 03:20 |
| 31 | 13- Designing the Add Product component | 05:42 |
| 32 | 14- Submitting the product form | 08:49 |
| 33 | 15- Implementing the Products browse page | 10:05 |
| 34 | 16 - Deleting Products | 03:42 |
| 35 | 17- Editing products | 14:39 |
| 36 | 18- Designing the client AppNavigator and HomePage component | 11:40 |
| 37 | 19- Configuring things in web php file | 01:20 |
| 38 | 20- Designing the Login component | 07:41 |
| 39 | 21- Setting up laravel sanctum and submitting the login form | 12:21 |
| 40 | 22- Implementing the logout button | 03:07 |
| 41 | 23- Switching the AppNavigator based on authentication | 11:01 |
| 42 | 24- Setting a relationship between the products and categories | 04:44 |
| 43 | 25- Adding products to a specific category and setting a base url for axios | 21:47 |
| 44 | 26- Designing the shop component | 42:25 |
| 45 | 27- Designing Product Details Component | 24:04 |
| 46 | 28- Designing the Category products component | 24:57 |
| 47 | 29-Designing the Cart component and setting up vuex for the cart | 29:38 |
| 48 | 30- Summarizing the project | 01:39 |
Similar courses to Learn Laravel Vuejs from scratch - Build a TESLA web app
Build a Server Rendered Vue.js App with Nuxt and Vuex
Vue 3, Nuxt.js and Laravel: A Practical Guide
Build an e-commerce platform
Master Laravel, Vue 3 & Inertia Full Stack 2023
Laravel Livewire
Nuxt.js - Vue.js on Steroids
