Vite is completely integrated with Laravel, and that means that Laravel has the tools that it needs to work with the assets that Vite is processing, even static assets. For example, I have an image that I want to display in the browser. It is this right here. It is inside of Resources, Images, Logo, and of course, this isn't going to change. This is static, but I want Vite to process it nonetheless, and it currently has no idea that that file exists. However, if I go to app.js, we can say import.meta.glob, and then we can pass an array that contains all of the paths that we want Vite to watch and process for our static assets. So in the case of my image, I'm telling Vite to go back to the Resources folder, go into

all of the paths that we want Vite to watch and process for our static assets. So in the case of my image, I'm telling Vite to go back to the Resources folder, go into the Images, and then process all of the images there. So if we had a Fonts folder inside of Resources, we would do something like this to where we would process all of those fonts. We don't have fonts, so we're going to get rid of that, but the images we do want to keep. And so with that simple statement, Vite is now processing all of our static images. I say all, we only have one, but that's okay. And so now I want to display that in the browser, but I want to use Tailwind for styling.

I say all, we only have one, but that's okay. And so now I want to display that in the browser, but I want to use Tailwind for styling. So let's install Tailwind, PostCSS, and Autoprefixer. We then need to run npx tailwind init -p, and then we need to open up our tailwind.config.js, and we need to add some entries to content. The first will be resources/views, and then everything with a .blade.php extension. And we also want resources/js, and everything inside that has a .js extension. So very run-of-the-mill stuff. Let's go to our app.css, and instead of that body setting, we're going to use Tailwind for the base, components, and utilities.

Let's go to our app.css, and instead of that body setting, we're going to use Tailwind for the base, components, and utilities. But let's open up the Welcome view. Let's go ahead and add class here. I'm not sure if we need to restart our dev server, but let's set a background of

We're going to center it, and we'll have some padding at the top. And inside of here we will have an h1, but let's do this. We'll say that the h1 will have text of 3xl. The font will be extra bold, and let's set a different color as well. Let's do slate200, and this will be simply Laracasts. After this, let's have an h4. Text will be extra large. We'll have some padding at the top, and we'll say Laravel and Vite. So after that, we'll have a div, and this is where we will have our image. But let's make sure that's looking okay.

So after that, we'll have a div, and this is where we will have our image. But let's make sure that's looking okay. That's great. So we have our image, but we need the source for that image. And since Vite is processing that image, we need to use the Laravel tools to work with that processed image. And we do so using the Vite facade. But here, we're going to call the asset method. And we are going to pass in the path to the asset that we want to display here. So that is resources/images/logo.png.

And we are going to pass in the path to the asset that we want to display here. So that is resources/images/logo.png. And if we save that and take a look at the browser, we can see that it's being pulled in, but that's ginormous. We need to add some style here. So for the div that contains the image, let's say flex, justify-center, items-center, and then we will add some padding to the top. And then for the image itself, let's say that the object-fill, and let's give it a height of 96, and there we go. That's so much better.

and let's give it a height of 96, and there we go. That's so much better. So by using the asset method, we just need to pass in the path of the assets that we want to use, and it's going to pull in the processed asset. Pretty easy and straightforward. The only thing is that, well, we have to supply the entire path. Not the entire path, but the relative path. And I personally don't want to do that, especially if there are a lot of assets that we need to include. So one thing we could do is write a macro, so

especially if there are a lot of assets that we need to include. So one thing we could do is write a macro, so that we could do something like this, where we would have an image method. And then we could simply just pass in the name of the image, and that would work the same way. So what we need to do then is set up that macro, and we can do so inside of the AppServiceProvider. If we go down to the boot method, we can say vt macro, and our macro name is going to be image. That's going to execute a function that is going to get the asset,

our macro name is going to be image. That's going to execute a function that is going to get the asset, basically the value that we are passing to our image method. And here, we are simply going to call asset, and we will assume that if we want an image, it's going to reside within resources/images, and then we will include the asset. We do need to import the View facade. But with that in place, we should be able to go back and save this, and everything should still work okay. Now, we can prove that this works by going back to our code and

everything should still work okay. Now, we can prove that this works by going back to our code and changing the name of the file that we want to include. So this file does not exist, foo.png, but notice that we don't get an error. So the asset method doesn't check if the asset actually exists. It simply takes the path that you pass to it and translates that into a URL or a resource that may or may not exist. So it's up to you to be sure to pass the correct path. But now that we know how that works, we can go back. Let's change this to logo.png, and we see our image once again.

But now that we know how that works, we can go back. Let's change this to logo.png, and we see our image once again. So working with static assets is very straightforward. First of all, we tell vt where those static assets live. And then we use the vt facade's asset method to get the URL for a given asset.