Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Use Laravel to Create a SPA with Vue, Inertia, and Tailwind

Name: Use Laravel to Create a SPA with Vue, Inertia, and Tailwind
Rating: 4.4 (59 reviews)

Create a Single Page Application for your portfolio using the best CSS, JavaScript and PHP frameworks and libraries.

Created byJuanD MeGon, ProgramarYa By JuanDMeGon

Last updated 11/2022

English

What you'll learn

Get ahead of the pack and master the technologies of the future, now
Create flexible, dynamic and reactive projects in a very short time
Create a SPA without dying in the process and without high complexities
Learn how to use the fastest growing and most popular tools today
Start with Tailwind CSS and apply it to a real project (your own portfolio)
Learn Inertia JS along with Vue JS and create reactive interfaces for your users
Apply Laravel and build a SPA from scratch in conjunction with all components of the VILT stack
Learn how to use Laravel Jetstream, one of Laravel's most complete authentication systems

Course content

7 sections • 32 lectures • 4h 36m total length

About VILT and the Project to Build in the Course6:39
Take a look at what you'll learn to build during the course and some initial details about VILT.
About the Instructor1:13
Take a quick look at the course instructor, their experience, and what you'll learn
The Development Environment Used in The Course2:17
Some details about the development environment that will be used during the course and your options
The Source Code for The Course's Project0:39
Take a look at the original source code of the course and how to use it to your advantage.
How to Ask Questions0:48
Let's see some details so you can take advantage of the question and answer system

Install and Configure a Fresh Laravel Project6:48
Create your project starting with a fresh Laravel project structure.
Install Jetstream to Get Intertia.js in Your Laravel Portfolio6:22
Install the best authentication system for Laravel, and take advantage of the components that come with Jetstream.
Create the Components to Store Your Portfolio Data, with Laravel9:16
Build the models, migrations, and other useful components to store the information in the database.
Generating and Inserting Test Data for Your Portfolio with Laravel14:20
Implement and use the factories of your models to insert test information for the portfolio.
Notes About Laravel Vite0:29
Let's resolve some possible confusion with the usage of Laravel Vite over Laravel Mix

Get to Know and Use Laravel Jetstream12:40
Leverage some starter Laravel Jetstream components to start building your portfolio.
Meet Tailwind CSS and Use it to Start with Your Portfolio14:25
Time to build some visual portfolio components and get to know Tailwind CSS in the process.
Meet and Learn How to Use Inertia.js Together with Vue.js18:29
Time to give life to some components and touch the functional part of the portfolio in the frontend, using Inertia.js
Explore More Components and Add Content to Your Portfolio with Laravel12:00
Learn about other useful components to use and speed up the portfolio creation process.

Define a Component to Display the List of Skills in Your Portfolio11:12
Take advantage of components and create your first component of your own to represent a Skill from your portfolio.
Improving Some Pending Details of the Portfolio8:19
It's time to solve the missing details so that everything looks better and take advantage of the capabilities of Tailwind CSS.
Define the Component to Display the Projects of Your Portfolio with Laravel8:30
Create another component, this time to display the details of a Project from your portfolio.
Resolving Project Icons Dynamically9:50
Each project in the portfolio has its own icon and you have to resolve it at runtime based on what you have in the database.
Use a Jetstream Modal to Display a Contact Form10:06
Use a custom Jetstream component to create a modal and display the portfolio contact form.

Linking Your Contact Form with Laravel, Through Inertia.js11:38
It's time to work on the backend and prepare the project to receive the form values.
Send the Received Contact Message from Your Portfolio, Using Laravel12:50
Takes the values received in the contact form to send an email.
Validating the Contact Form with Laravel and Inertia.js9:43
Make sure you receive the correct data before sending the contact email and showing the errors to the user.
Showing a Success Message When Receiving a Contact Form in Your Portfolio10:30
Once everything goes well, it displays a success message to the user.

Prepare Your Portfolio to Get an Admin Panel11:55
Add the routes file and the necessary security controls to have an administration panel in your portfolio.
Implement the Components to Display the List of Skills on the Dashboard7:35
Build the table with its respective components to show the details of all the Skills in the portfolio.
Show the Project List in the Admin Panel7:49
Adapt the above list to display details about a Project.
Allow to Create Skills in Your Portfolio with Laravel and Inertia.js16:45
Add the components and functions to allow you to create new Skills for your portfolio.
Add Projects to Your Portfolio Using Laravel and Inertia.js10:55
Add the components and functions to allow you to create new projects for your portfolio.
Allow to Edit Existing Skills and Projects from Your Portfolio14:36
Reuses some creation components to allow editing both Skills and Portfolio Projects.
Remove Skills and Projects from Your Portfolio with Laravel and Inertia.js6:11
Finish with your administration panel allowing you to delete Skills and Projects.

Requirements

Desire to learn from scratch and step by step
Initiative to be ahead of others, with new technologies
Willingness to change the way of thinking and create applications. Now it's better and different

Description

Get ahead of the competition and start with the VILT stack, made up of Vue.js, Inertia.js, Laravel, and Tailwind CSS. Master the technologies that will dominate the world of web development with its growing popularity and demand.

Build a Single Page Application, which used to be complex, in a short time and with little effort, thanks to these Full Stack technologies. Inertia.js will be your greatest ally in this process.

You will create your own SPA Portfolio with an attractive appearance thanks to Tailwind, dynamic and reactive, thanks to Vue.js and Inertia.js, and perfectly functional and supported thanks to Laravel. You will also create an administration panel, using Laravel Jetstream, which will allow you to manage the skills and projects that you will show in your portfolio, applying everything you have learned with Vue.js, Intertia.js, Laravel, and Tailwind CSS.

The approach of the course will allow you to master the essential concepts and functionalities of Vue.js, Inertia, Laravel, and Tailwind together, while also applying them in a fully functional project (your portfolio as a Single Page Application).

The type of SPA to be built with VILT will not matter, you will make it a reality and with ease.

Laravel is the most popular framework in the world and together with Inertia.js, Vue.js, and Tailwind CSS, you will have no limits. You will take advantage of the enormous potential of Laravel for your SPA, without having to limit it to just an API.

It's your opportunity to get ahead

These technologies will dominate the near future of web development and it's your chance to stay ahead of them all.

Why take this course with me?

Because I am always there to accompany and guide your learning. I will answer all your questions and comments during the course. ALWAYS.

More than 25,000 students appreciate the effectiveness of the answers to all their questions and their more than 6,000 perfect scores prove it.

Not only do I teach you VILT, but you will also learn how to apply it and solve real problems for your projects and ideas.

Learning VILT increases your capabilities and ensures a bright future, full of flexibility and agility for your developments.

Do not wait anymore. The world moves fast and all your ideas and projects are waiting to be implemented in an effective and agile way with VILT.

Press the button to enter the course now.

Who this course is for:

If you want to get ahead of the competition and master the technologies that will dominate web development in no time
If you want to start with multiple technologies that work together (Vue JS, Inertia JS, Laravel, and Tailwind)
If you want to build complex applications with little effort and in a short time (as it should always be)
If you are interested in SPAs
If you want to build your own online portfolio

Use Laravel to Create a SPA with Vue, Inertia, and Tailwind

What you'll learn

Explore related topics

Course content

Meet the Instructor and How to Take Advantage of the Course5 lectures • 12min

Prepare the Project and Its Dependencies5 lectures • 37min

Learn How to Use Each Member of the VILT Stack for Your Portfolio4 lectures • 58min

Implement the Portfolio Sections Separated in Modules with Tailwind and Inertia5 lectures • 48min

Add the Functionalities of the Contacting System with Inertia.js and Laravel4 lectures • 45min

Practice What You Learned by Creating an Admin Panel for Your Portfolio7 lectures • 1hr 16min

Conclusions and Recommendations2 lectures • 2min

Requirements

Description

Who this course is for: