Laravel + inertia + vue course Lesson 2. Layout, Link, Meta, Route
We continue the series of videos on inertia.js. In this lesson, we will continue preparing the project for further work: we will figure out how to create a layout, add Link and Meta components, and transfer Routes from the back-end to the client part.
Link to the library by routes from the lesson:
https://github.com/tightenco/ziggy
inertia # laravel # cutcode
-------------------------------------------------- -------------------------------
❗️❗️❗️How to make complex sites in laravel? It's easy with cutcode!
Support my project - https://cutcode.ru/
Buy me coffee - buymeacoffee.com/cutcode
🤖🤖🤖My assistant Taylor is ready to give you a present. Pick up here - https://cutcode.ru/chat-bot
-------------------------------------------------- -------------------------------
⏰ Timecodes:
00:00 Introduction
00:29 Lesson content
01:00 Client side for automatic compilation
02:04 Creating a general layout
06:44 Component inertia link
12:44 The inertia head component
17:00 Summing up
All Laravel fans are welcome to the Cutcode channel! We continue the series of videos on inertia.js and remind you that in the end we will implement a small project with the output of users and the ability to manage them, a full-fledged CRUD. Let me remind you that in the previous video we installed and configured our project for further work and displayed the first page.
What awaits us today? Today we will also continue to prepare our project for further work, namely, we will figure out how to create a layout for pages and make it the default, add links between components - use the inertia LINK component and understand its features. Let's add a head meta to our page using inertia components and move the road from and out of the back end to our front end for ease of use. But friends have fewer words, more practice - let's go!
So let's start by compiling our client side, but let's go a little bit differently. Remember in the first part, by inertia, every time we called the npm run dev command for any changes in the script and compiled the client part. This time we will use a slightly different command - npm run hot, which will automatically track changes in our scripts and recompile the files, which will later also be loaded into the browser.
Let's see how it works: let's change app.js a little, add a paragraph and then see how the file is recompiled in the console.
We'll start today's tutorial by playing with layot. If we are developing a classic laravel application with a blade template engine, then we also have a layout template and the rest of the pages are already extended from it, thus we do not duplicate the code and it is much more convenient to work this way. We will use the same approach in our inertia view application. Also, now we will create a layout and make it the default for all pages.
As with the blade templating engine, when we create the layout it is nothing more than a simple blade file. So here we will create a layout now, it will be just a view component. Let's create it, it will be located in the Shared directory. You can have any other directory. This is where I will have all the other common components.
-------------------------------------------------- -------------------------------
📹 share this video with your friends:
• Курс по Laravel+inertia+vue. Урок 2. ...
🔔 subscribe to the YouTube channel: / @cutcoderu
📼 Laravel course from scratch:
• Курс по Laravel 8 обучение с нуля. Бе...
Laravel + inertia + vue course Lesson 2. Layout, Link, Meta, Route
-------------------------------------------------- -------------------------------
🔗 our website: https://cutcode.ru/
📷 our instagram: / cutcoderu