This course was created with the
course builder. Create your online course today.
Start now
Create your course
with
Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Vue 3 drag and drop page builder with a Laravel backend
Introduction
Course Intro (2:14)
Let's get started
Installing vue 3 (2:00)
Installing project depencies (3:21)
Server side routing with inertia (2:09)
The page manager (3:11)
Download the Admin template (0:45)
Download Component Styles
The Admin Layout (2:36)
The Admin Layout Part 2 (2:02)
Installing bootstrap (2:40)
Installing font awesome (3:04)
The page manager in dept
Introduction to the page manager (0:43)
The page selector part 1 (3:43)
The page selector part 2 (3:15)
Applying css styles (1:36)
The get pages function (skeleton version) (1:41)
The section manager (3:54)
Adding plus icon to the section manager (2:13)
Renaming the 'Section' component to 'Section Manager' (2:04)
The Section Manager footer (4:33)
Toggling section manager (3:08)
Toggling the section manager part 2 (3:26)
Page sections part 1 (5:39)
Page sections part2 (1:15)
Page sections part 3 (1:44)
The slides manager (4:29)
The slides uploader component (4:14)
The slides uploader component part 2 (2:59)
Changing uploader button color (3:59)
The live editor
Introduction to the live editor (2:25)
The static section manager component (6:52)
The static section manager component part 2 (4:27)
The live edit route (8:41)
Init live editor (6:50)
Adding drag and drop components to the live editor (6:17)
Download the frontend template (3:31)
Adding contact us to the drag and drop components (7:37)
importing css styles to the editor.mp4 (2:45)
importing css styles to the live editor part2 (7:43)
Fixing the fontsize of the reusable components (0:37)
Fixing images not showing on the editor (3:47)
Adding contact us and more sections to the live editor (6:10)
Fixing contact us images (3:24)
Editing page text, images and image backgrounds (8:28)
The save changes button part1 (9:34)
The save changes button part 2 - get page editor html (2:39)
The save changes button part 3 - get the editor css (2:42)
The backend
Database structure (3:51)
The PageController part1 (5:57)
The PageController part 2 (3:58)
The PageController part 3 (6:47)
Getting page sections from the database (8:29)
Getting page sections on mounted (1:41)
Fixing the add content button and the slides manager missing (3:49)
saving page section content to the database (10:48)
Saving page section section content to the database part 2 (6:03)
Reading page section from the database and loading them to to the editor (3:58)
The frontend
The frontend layout (11:10)
Reading navigation items from the database (5:20)
Reading navigation items from the database part 2 (4:09)
Getting page sections fromt he database (6:07)
Loading the contact us page on the frontend (5:24)
Displaying slider on the home page part 1 (4:49)
Displaying slides on the home page part 2 (6:09)
Displaying slides on the home page part 3 (7:13)
Displaying slides on the home page part 4 - The slider component (9:35)
Displaying slides on the home page part 5 + rendering static content below the slides (4:55)
Adding centered text to the slides (4:59)
Reading navigation items from the database part 2
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock