Okay, let's take a look at using Vue 3 within Laravel. This requires the latest version of Laravel Mix, which is at version 6 and is still in beta at the time of this recording. So before we start, let's do a quick review of how to use Vue 2 in Laravel. So first we would use the Laravel UI package, so composer require laravel/ui. And then after that, we would run the php artisan ui vue command to set up the Vue scaffolding. And that will install Vue for us, or at least the setup of Vue in app.js, so right here. And here is the initialization of Vue. And here are the components that we can use in our app. And then we new up Vue and then give it a container which we can use it.

And here is the components that we can use in our app. And then we new up Vue and then give it a container which we can use it. So in our Vue files, we have to make sure to import the compiled JavaScript. So there it is. And then wherever we have our div with an ID of app, we can use Vue components within there. There's the div with the ID of app. So let's see if we can accomplish the same workflow with Vue 3 in Laravel. So I have a fresh app here and a fresh app here, which we can make use of. So first thing we want to do is npm install Vue 3.

So I have a fresh app here and a fresh app here, which we can make use of. So first thing we want to do is npm install vue@3. So we still have to do npm install to get Vue 3 and also the latest version of Laravel Mix. And we also have to do npm install for that. Okay, that's done. Also make sure you have a somewhat recent version of Node. I was using Node version 10 and Laravel Mix requires a newer version. So I am using version 15 now. So if you do fnm, which is sorry, fnm ls, you can see I'm using version 15 now and everything is working correctly.

So if you do fnm, which is sorry, fnm ls, you can see I'm using version 15 now and everything is working correctly. So fnm allows you to have multiple versions of Node running on your machine. So very handy if you're not already using it. Okay, next is, let's go into webpack.mix.js. And let's get rid of postCss, we're not going to use that. And let's add a dotReview method here, which is new to Laravel Mix six. And you can also specify a version in here in a parameter, but it does a pretty good job at detecting which version you have. Okay, let's save that.

job at detecting which version you have. Okay, let's save that. And now let's initialize Vue. So in our Vue 2 app, we have the initialization after the required bootstrap. So let's do the same thing. So let's go to app.js. And let's put it in here. So setting up Vue in Vue 3 is different from Vue 2. So let's go ahead and do it the Vue 3 way. So we have to import createApp from Vue.

So let's go ahead and do it the Vue 3 way. So we have to import createApp from Vue. Okay. And let's go ahead and use that createApp. And it takes some parameters, which we'll do in a second, and we have to mount it to a container. And I'll do div with an ID of app. And let's also create a components folder here. So let's say components and say ExampleComponent.vue. And let's scaffold this out.

So let's say components and say ExampleComponent view. And let's scaffold this out. And it's just a ExampleComponent. And that's fine for now. And now we can import the component here. So import ExampleComponent from. And it's in the components folder. ExampleComponent.view. Okay. And within here, we can specify the components that we want to use.

Okay. And within here, we can specify the components that we want to use. So components exampleComponent. Okay. So now let's go ahead and try to npm run dev this to compile our JavaScript assets. And as you can see, it installed some additional dependencies that we need. So that's good. You have to run it again. Okay. And that seemed to compile properly.

Okay. And that seemed to compile properly. Cool. So now let's see if we can get it to work in our Blade views. So we'll just go to our welcome.blade.php. And let's put it in here. So I'll put div id up in here. And let's say exampleComponent right underneath. Okay. Oh, yeah.

Cool. So let's also set up a watcher as well. So npm run watch. Let's do that. And let's make some changes to our component to make sure the Vue 3 features are working correctly. Okay. So now Webpack is watching for changes. So let's go ahead and change our component and make use of some Vue 3 features here. So let's say set up and I should put a greeting in here.

So let's go ahead and change our component and make use of some Vue features here. So let's say set up and I should put a greeting in here. So let or const is fine. greeting equals. Let's make use of a ref. Say hello there. And let's make sure to return the greeting. And let's add it here in our output. Say greeting. And hopefully this works.

And there it is. Cool. Few more things here. Let's make sure it can accept props, because usually you're passing in props from the backend. So let's say props. Actually, we don't even need this, because I just want to output it in the template. So let's just declare props here, and I'll just use the array syntax. Let's just accept something called foo, and let's output it here, and we can have multiple root nodes. So this is fine.

root nodes. So this is fine. Say foo, foo. And it's passing that prop from our welcome.blade.php. So back to our example component, let's say foo equals bar. And hopefully this works. And there it is. Cool. One more thing. Just want to make sure multiple components work.

One more thing. Just want to make sure multiple components work. So let's go ahead and duplicate this. Let's say another component.view. And let's import that in our app.js. So let's duplicate this. Another component. And let's put that in here. And let's see if this works. That should compile.

So yeah, if you want to make use of Vue three and Laravel, definitely check out the latest version of Laravel Mix and make use of Vue three like I showed you here.