Vue Router, Inertia in Laravel
Here we automatically have a SPA type navigation therefore, what are the typical links that would be those of the labeled obviously we do not use them here because if we use them we will have a traditional navigation. This is something that you can very easily see if we place a link here since when you see that the page is going to load here here above the little icon that I am pointing to with the cursor you already know that well the spa navigation is not working there you can see that the entire page loaded therefore it is not what we want since the navigation has to be internal precisely in the selected container that well in this case would be the entire application as we have it but usually in Vue it would be the DIV that by convention we place as app the App identifier but in this case it is the entire application but only a certain part of it has to be reloaded and not the entire application what I mean so well it is not that links cannot be used they can be used for certain crucial parts for example an external link to a third party page that is to say to an internet link or something like that that is not the application but what is the internal navigation is not So that is our case of interest so well for that in basic View View there is a technology called View router but here it makes perfect sense not to use Vue router since here we have a navigation through inertia, that is to say, inertia is the one that takes the place of Vue router which again when we use View router apart from being able to reload as who would say central component in a simple way the URL is also changed but notice that here the URL is automatically changed therefore it makes no sense to use Vue router because both processes would overlap so Inertia already implements an internal mechanism that would be Link it is not an external package it is already part of the Inertia Core, so it makes perfect sense that we import it we have it here I am going to import it up here… so here the package I don't know if we saw it before but it is @inertia Vue and you can see this here I don't know if we checked it but we can check it quickly if we check in the node modules folder that Remember that this is read only do not change anything there we have @inertiajs that is where we are importing:
import { Link } from "@inertiajs/vue3"In our Vue 3 here we are importing the component called link here it is an import with a name since here we can really put anything and here we would have to represent it and this is something from Vue but it seems important to me to remember it a little and the application will continue working I think this is the one to see the Index which will be this one Note that it continues working since this is a kind of alias that we put on it, that is to say, here we are indicating that we imported this but it is a default export, that is what we have here:
import AppLayout from "@/Layouts/AppLayout.vue"In our Vue 3 here we are importing the component called link here it is a custom import therefore we cannot give it the name that we want as you saw because it is an alias my God this thing if it is long is what we are exporting here that well by default is the entire component because we are not exporting something with a name but in this case in this package I do not know if it appears either I think I will look for it much here I do not know if it is exactly this one yes here it is we are exporting the component here several things but in the end the one they are giving it is the link one which is the one we are importing here, here we are indicating what is the thing so to speak that we are importing in this case is Link but it could be this thing called app or this other one called: n name since here we can really put anything and here we would have to represent it and this is something from Vue but it seems important to me to remember it a little and the application will continue working I think this is the one to see the Index one which will be this one Note that it continues working since this is a kind of alias that we placed That is to say, here we are indicating that we import this but it is a default export, that is what we have here:
import { Link2 } from "@inertiajs/vue3"well we already imported this before if we check here here it is also an export an import with a name as you can see so that is the difference here if we cannot put an alias because it will not find it we can do the test here I am going to remove this here leave it as we had it before this was to make an example and here also remove the two in case you have placed it and here like anything we import the component this is not going to work because link2 does not exist and here you can see that it does not find it there it tells you link2 you do not know what that is then well I had to see what you are doing wrong in our case we know that it is not called like that:
import { Link } from "@inertiajs/vue3"We come here, reload and notice that the error no longer appears, so well we already know that this is the component, so to get back to the subject of the class, this is what allows us to navigate like a web spa, that is to say.
Without loading the whole page, so to use it is very simple, it is like a link, that is to say, with the tag a, but instead of placing a, we place link, this is from ccs, here it is in capital letters, well, it doesn't matter, well, here we place href again, the colon, it is because we want to evaluate the result here, and here we can place the router function, and here we indicate the name, which would be category edit, it is the name of the route, and here we pass the parameter, I think that with c it will not take it, we have to put the ID, but well, we can try it, and here we close the link... Oh, look, if it takes the object, then we can pass it directly to the object, here, remember that the URL appears:
<Link class="text-sm text-purple-400 hover:text-purple-700"
:href="route('category.edit', c)">Edit</Link>OR
<Link class="text-sm text-purple-400 hover:text-purple-700"
:href="route('category.edit', c.id)">Edit</Link>And you will see that the difference is that when we click on it you will see that this does not reload what it indicates is that we are in a spa type navigation, the title changes, that is not what I am saying, I am talking here about the little icon that appears when you are loading the page that loads very quickly here and appears in a few milliseconds, it is because it is a good everything is local but that is what indicates the spa type navigation. So it is that simple and well with this as a challenge, create the link to create that has to be up here, we can place it so go ahead, I already did 80% of the work, I place create here and create here:
<Link class="link-button-default my-3" :href="route('category.create')">Create</Link>Y eso era todo y volvemos aquí al Index fíjate que bueno podemos utilizar las las flechitas como hacemos en Vue router y lo mismo ya así que con esto tenemos integrado o al menos la navegación de los otros módulos que nosotros ya creamos así que pues nada ya con esto terminamos y vamos para la siguiente clase.
- Andrés Cruz
Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter