Laravel - Single Page App & Vue CRUD

Learn to create Single Page Applications with Laravel & Vue.js

Created byEdwin Diaz | 900,000+ Students, Coding Faculty Solutions

Last updated 11/2018

English

English [Auto],

What you'll learn

Students will able to Use Laravel and Vue to create Single Page Applications

Course content

2 sections • 23 lectures • 1h 56m total length

App Demostration2:25
Watch a Laravel single-page app built with Vue that demonstrates create, read, update, and delete tasks, including login, notifications, and delete confirmations.
Introduction6:08
Edwin D.S. outlines his coding journey from age 13 and his passion for technology and teaching. Learn how coding, discussions, and helping people empower Laravel and Vue CRUD skills.
Reference Files0:08
Model, Migration and Auth5:49
design and implement a task model with its migration, define fillable fields (name, body, user_id), establish a one-to-many user tasks relationship, configure authentication, and run migrations to enable read functionality.
Setting Up Routes and Creating a Controller2:39
Create a resource controller and routes to manage store, update, and delete operations and send data to the front end for a single page application.
Setting Up Our Controller Methods - Part 1 - Index1:33
Set up the controller to return tasks as JSON response using the user model relationship, importing via the facade, and expose a tasks payload with id, user, and status data.
Setting Up Our Controller Methods - Part 2 - Store3:49
Validate form input in the store method, then create the task in the database using request data. Return a JSON response with the newly created task and a confirmation message.
Setting Up Our Controller Methods - Part 3 - Update & Delete3:15
Learn how to implement update and delete in the Laravel controller for a single-page app, reusing request data, accessing the relationship, and returning JSON responses.

Installing VUE and Making Sure its working with our App9:19
Install vue and ensure the app works by running npm install and npm run development or watch, then verify component rendering and webpack compilation in the Laravel single page app.
Adding Our HTML Table4:28
Create a task component with an add new task button and a Bootstrap table, fetch data from an endpoint, and display it in the table.
Reading Data - Part 15:32
Hook up a task table in a single page app, create a data method, and fetch backend tasks to display and support edit and delete actions.
Reading Data - Part 25:43
Demonstrates building a tests array, mapping API response to tasks, and looping to extract task name and body for display in a Laravel Vue SPA.
Creating Data Part 14:16
Implement a create modal in a Laravel Vue single-page app, load it on button click, and wire inputs to the model to send data to the backend.
Creating Data Part 24:31
Create a task flow by wiring a new create task method to post form data (name and description) to the back end, saving it to the database.
Creating Data Part 35:51
Create and send data to the backend for a Laravel single-page app, handle the response, update the task array, and perform basic error handling and validation.
Displaying Errors9:56
Learn how to surface backend validation errors in the front end by creating an errors array, capturing response data, and rendering a list of field-specific messages.
Updating Data Part 18:57
Implement the update flow in a Laravel Vue SPA: create the update model and modal, pass the id, initialize errors, and wire the edit action to save changes.
Updating Data Part 26:18
Update data in a Laravel Vue single-page app via patch request, sending Axios headers, updating a task by id with name and body, and handling responses.
Deleting Data5:52
Learn how to safely delete a task in a Laravel Vue SPA by implementing a confirmation prompt, sending a delete request with the item ID, and updating the UI state.
Reseting Data Method2:36
Implement a reset data method that clears the task name and body after submitting a new task. This ensures input fields are emptied and previous data does not persist.
Creating a Loader Feature5:49
Add a Laravel Vue single-page app by displaying a loading image while data loads. Hide content until loading completes.
Creating a Notification Feature9:23
Learn to add a notification feature with the toast-tr plugin in a Laravel single page app, including npm install, css import, window integration, and customizable options for position and callbacks.
Conclusion2:17
Finish the course and keep learning and practicing, because growth comes from steady effort and putting in the work to achieve lasting success.

Requirements

Laravel Fundamentals - YOU Need know Laravel to understand this course

Description

We go straight to the point on this course, there is no wasting time explaining fundamental concepts of Laravel or Vue. You are expected to know how to use Laravel. This course will make a nice addition to your Laravel & Vue Skill Set.

I decided to create small courses with right to the point projects because employers are looking for developers who can BUILD, create applications that will satisfy the needs of their companies. Nowadays you either know what you are doing or you don't have a job.

Laravel / PHP is on demand since millions of websites use it. Laravel is one of the best PHP frameworks and every developer that wants to succeed in this market should learn it well.

Come and join me on this small adventure, you won't regret it!

Who this course is for:

Any student wishing to create Single Page Application using Laravel and Vue should take this course

Laravel - Single Page App & Vue CRUD

What you'll learn

Explore related topics

Course content

Our First Setup Steps8 lectures • 26min

VUE15 lectures • 1hr 31min

Requirements

Description

Who this course is for: