We have been using Vite with just our own JavaScript, no Vue, React, or any framework like that. But chances are, you're gonna be using Vue or React or some framework with Vite. So we are going to install Vue and the Vue plugin for our project in this lesson. We will also look at how to work with environment variables. Now, one thing to remember is that if you created a project using Breeze or Jetstream, all of this stuff is set up for you.

using Breeze or Jetstream, all of this stuff is set up for you. Vite is ready to go along with whatever framework you're going to be using. But because I chose none, we have to manually set all of this stuff up, but it's relatively simple. The first thing we need to do is install Vue. So we will install the latest version of Vue and we will save it. And then we want to install the Vue plugin for Vite.

and we will save it. And then we want to install the Vue plugin for Vite. This is going to essentially let Vite know how to handle Vue files. And with that in place, we can run our dev server and we need to hop on over to our vite.config.js because we need to configure the Vue plugin. So we will import Vue from vite-plugin-vue. And we are going to configure this here, either before or after we configure the Laravel plugin.

And we are going to configure this here, either before or after we configure the Laravel plugin. It really doesn't matter. We're going to pass in an object that has a template property, which is an object that has a transformAssetUrls property. And there are two properties that we need to set here. First is base, and we're going to set this to null. This basically tells the Laravel plugin to rewrite asset URLs so that they point to the Vite server.

This basically tells the Laravel plugin to rewrite assets URLs so that they point to the Vite server. So that's kind of important. Next, we will set includeAbsolute, and we will set that to false. And this will leave absolute URLs alone so that we can reference those assets from the public directory, which is what we would expect to do. And there's one other thing

which is what we would expect to do. And there's one other thing that we're going to do in our config, and that is add a new alias for our images folder. And that simply points to resources/images. And with that, we can close our config. And I want to take our welcome view, or at least the content from our welcome view, and I want to put that inside of a view component. So inside of our js components folder,

and I want to put that inside of a view component. So inside of our JS components folder, let's create a new file. We'll just call it welcome.view. Let's have our template, and I'm just going to grab the content that we have from the Blade view and paste that inside of our component. But then we need our script, and we will essentially need two things.

But then we need our script, and we will essentially need two things. The first is going to be the name of our application, which has been this Laravel EnVite. And actually, I want to do this. We'll have the title up here. So our Laravel EnVite text will be here for the h1 element, and then the h4 will have our Laracasts. And then we also need our image.

and then the h4 will have our Laracasts. And then we also need our image. So let's first of all import that. We'll call it logo from, and we're going to use our new images alias to get to our logo.png. And we're going to bind this to source because now that we are doing this inside of a view component, we can't really use the Vite facade here.

inside of a view component, we can't really use the Vite facade here. So we will bind source to logo, and that's going to be fine. However, now we need to define our title prop. So back down in our script, we will define props, and we will have the title, which will be a string. So with that done,

which will be a string. So with that done, I'm going to go back to our Blade view, and I want to add our app container here. But let's give it a class of w-full so that it stretches across the width of the window. And I want to change the title here so that we pull in the APP_NAME environment variable. Everything else we can leave the same. We still need to use the Vite directive.

Everything else we can leave the same. We still need to use the Vite directive to pull in our app.js, and really that's the last piece of this puzzle. So let's open up app.js. I say it's the last piece. We will need to make some changes to our environment variables. But for right now, I want to get rid of where we were using that modal.

But for right now, I want to get rid of where we were using that modal. And I want to import, first of all, createApp and H from view. And then we will import the welcome view component from comps/welcome view. Now we still want to process all of our static assets. Even though we are using our logo inside of a component now, that doesn't necessarily mean that all of our images are going to be used inside of a component.

that doesn't necessarily mean that all of our images are going to be used inside of a component. So it makes sense to still process our static assets here inside of app.js. But after we do that, let's get our app name. Now, if we take a look at the environment variables, we can scroll all the way down and we see this VITE_APP_NAME. And we can see that it essentially points to the APP_NAME environment variable,

And we can see that it essentially points to the APP_NAME environment variable, which I have changed to Laravel and Vite. Now, the reason why we have this VITE_APP_NAME environment variable is because Vite can only access environment variables that start with VITE. So this means if we want to replicate any of these other values inside of our .env file, we will need to create a new environment variable.

any of these other values inside of our .env file, we will need to create a new environment variable that starts with VITE. So if for some reason we needed access to the MAIL_HOST, we would have to create another environment variable that starts with VITE_MAIL_HOST. And then we would set that to the MAIL_HOST environment variable. But let's do this. Let's have our APP_NAME, then let's have a VITE_ORG.

But let's do this. Let's have our app name, then let's have a Vite org. And we're going to set that just to Laracasts. So that we will pull both of those values and we would do so by using import.meta.env. And then we would reference the Vite environment variable. So the app name would be Vite app name. And then we could get the org name, which we would once again, import.meta.env. And that would be called Vite org.

which we would once again, import.meta.env. And that would be called Vite org. So then we could create our app. Our root component will be Welcome. And then we will pass in our props. So we have title, which is going to be appName. And then let's say that we'll have subtitle, which will be orgName. And then we want to mount that to an element that has an ID of app.

And then we want to mount that to an element that has an ID of app. Now we need to go back to the Welcome component because I decided to add that subtitle. So we will simply add that prop. And I don't think I have forgotten anything. So let's go to the browser and voila, we see that it is working as intended. So when you are using Vue with Vite and Laravel, there's really one thing to remember,

So when you are using Vue with Vite and Laravel, there's really one thing to remember, and that is to configure the Vue plugin. Be sure to set the base property on the transformAssetsUrl object to null. That way the Laravel plugin can generate the appropriate URLs to point to the Vite development server, but then also set the includeAbsolute property to false. That way absolute URLs are essentially left alone so that they will point to the public folder.

That way absolute URLs are essentially left alone so that they will point to the public folder. Also remember that if you want to access any of your environment variables, you will need to prepend them with Vite because Vite will ignore all of the other environment variables.