There will be times when we want to add attributes to the elements generated by Vite and Laravel, and we have the ability to do so. Like, for example, we might want to include the integrity attribute. Now, yes, typically, integrity attributes are used for assets provided by CDNs, but yeah, let's include it on our own. First of all, though, I want to run the build script. This is going to build our assets for production, and inside of our project, let's go to public/build/assets, and then we can see the assets that were built by Vite, and they are referenced inside of this manifest.json. So we can see that we essentially have two resources here, or two assets.

inside of this manifest.json. So we can see that we essentially have two resources here, or two assets. We have logo.png. We can see that there is a file name. This is what we would use in production. Then there is the source. That is, of course, the source of that asset. The same is true for our app.js. We have a file, which would be used in the browser in production. Then there is the source, which is, of course, the source of that asset.

We have a file, which would be used in the browser in production. Then there is the source, which is, of course, the source of that asset. But then we can also see that CSS is also being included here. So to include the integrity attribute, we can install the vite-plugin-manifest-sri plugin. This is a dev dependency, and we would need to go to the vite.config.js so that we could first of all import the manifest-sri plugin so that we can configure that inside of our plugins array. And all we need to do is call that manifestSRI function, and we're good to go. So if we go back and rebuild our assets, all we need to do is take a look at the manifest, and we will see that we now have this integrity hash.

So if we go back and rebuild our assets, all we need to do is take a look at the manifest, and we will see that we now have this integrity hash. And if we were to actually run this inside of the browser, notice that the dev server is not running. So whenever I refresh the browser, that means that it is going to pull the assets that are in the public folder. So we are working with production assets here. Let's refresh, and we get an error, unable to locate this file, ./.resources. Let's take a look at our manifest. So our manifest does not have a ./. in front of the path for resources/images/logo.

Let's take a look at our manifest. So our manifest does not have a ./. in front of the path for resources/images/logo. So I'm thinking we will need to go to the AppServiceProvider, and yep, that right there. So we can take off that ./.. We can go back to the browser, refresh, and there we go. Our application is working okay. And if we take a look at the source, then we will see the integrity attribute added to these link elements. And if we scroll on over to our script, we can see we have the integrity attribute there.

to these link elements. And if we scroll on over to our script, we can see we have the integrity attribute there as well. But now let's say that we want to take off the integrity attribute on our script element. Well, we can do that inside of our AppServiceProvider because the Vite facade has a method called useScriptTagAttributes. And we can pass an array where the keys are the attributes that we want to work with. So in this case, we could say integrity. And we can assign three values. The first two values are Boolean, true, which means that the attribute is going to be included,

And we can assign three values. The first two values are Boolean, true, which means that the attribute is going to be included, false, which means it will be omitted, and then we can provide a value for the attribute. So for our script element, we're going to pass false. That is going to omit the integrity attribute. So if we go back to the browser, we can refresh and we can see that the script element no longer has that integrity attribute. Now the attributes that we are setting with use script tag attributes are global. So any script element that Vite or the Laravel plugin is going to generate is going to have these same attribute rules applied.

So any script element that Vite or the Laravel plugin is going to generate is going to have these same attribute rules applied. So let's say that we wanted all of our script elements to have the async attribute. And that is a Boolean attribute. It's going to either be there or it's not. There's really not a value that we assign to this. So we can simply say true, and that is going to include the async attribute to our script element. We can also have custom attributes. So if we needed a data-custom attribute with whatever value we needed, that is perfectly fine. That is going to be added to every script element.

So if we needed a data custom attribute with whatever value we needed, that is perfectly fine. That is going to be added to every script element. But let's say that this data custom attribute should only be applied to any JavaScript that is not our app.js. Well, we can conditionally control our attributes by using the same method, use script tag attributes. But we would pass a closure that is going to, first of all, accept the source of the asset. It will also get the URL of the asset. It can get an array of the chunk, or that would be null. If our dev server was running, chunk would be null, as well as the last argument, which is manifest. But in this case, we want to check if the source is our entry point, which would be resources/js, app.js. And we don't want to include our data custom attribute in that case.

But in this case, we want to check if the source is our entry point, which would be resources.js, app.js. And we don't want to include our data custom attribute in that case. So since this is a Boolean expression, that's not going to work for us. Because if it's true, then that means it's going to be included. If false, it's not. We need that reversed. So if it is app.js, we will set it as false. Otherwise, we will set it as true. So for our entry point, that should remove that attribute. Now, if we can do this for script elements, it also should go without saying we can do it with our link elements.

So for our entry point, that should remove that attribute. Now, if we can do this for script elements, it also should go without saying we can do it with our link elements. So if we wanted to add a custom attribute to all of our link elements, we could do that using the useStyleTagAttributes method. And it works the same way. We can pass in an array to where we could set whatever attributes we needed. Or we could pass in a closure to conditionally control those attributes. So I'm now adding a data-css-theme attribute to our link elements. So if we go back to the browser and refresh, there it is right there. We can see data-css-theme equal dark.

So if we go back to the browser and refresh, there it is right there. We can see data css theme equal dark. Now, I think I pointed it out, but I guess I should just so that we are all clear. These attributes that we are setting inside of our AppServiceProvider here are just for the elements generated by Vite and the Laravel plugin. So if we go to our welcome view, and if we add a script element anywhere here, this script element was manually added by us, which means it is not going to have any of the attributes that we set inside of our AppServiceProvider. We can see right there, there's our script element. There's nothing special about that because we created it. Vite or the Laravel plugin did not create that element.

There's nothing special about that because we created it. Vite or the Laravel plugin did not create that element. So these two methods, useScriptTagAttributes and useStyleTagAttributes are only for Vite generated elements. And that's it. It's pretty straightforward. So if you want to add an integrity attribute, just install the vite-plugin-manifest-sri plugin, and that is going to generate integrity hashes for your assets. Then to control the attributes that are applied to the script and link elements, you can use the useScriptTagAttributes and the useStyleTagAttributes methods.

Then to control the attributes that are applied to the script and link elements, you can use the useScriptTagAttributes and useStyleTagAttributes methods.