We have the basics of our application set up, with a model, a main controller, and a Blade template showing us this right now. But we'll need some interactivity on the front end if we want to allow our users to upload images in a pretty seamless way. And for that, I'm going to be using Vue, and then later on, a package called FilePond. Opening up our source code again, the first thing that we'll need to do is install the actual Vue dependency with npm. So let's close out of what we have open right now, and open up the terminal. And to install Vue, npm install --save-dev vue. And I'm going to be using @next here, which will install Vue 3, instead of the typical

And to install Vue, npm install --save-dev vue. And I'm going to be using Vue 3 here, which will install Vue 3, instead of the typical Vue 2, which is what you'll get if you just use Vue. We're still going to be using the Options API later on. I just like Vue 3 better, and it is the recommended current starting point. Alright once we have that installed, we can exit our terminal and open up our app.js file. Now right now all we have is this require bootstrap file. And if we open it up, all it does is require lodash, axios, and set a default header for axios for X-Requested-With. That's all typical for Laravel out of the box, but we'll need to initiate Vue.

axios for x-requested-with. That's all typical for Laravel out of the box, but we'll need to initiate Vue. It only takes a few lines, and I'll explain each one as we go. So import createApp from Vue. Now if you haven't had a lot of experience with Vue 3, you might be used to something like window.vue equals require Vue, or something else like import Vue from Vue. But the method that we're using here comes straight out of the Vue 3 boilerplate from their command line tool. So we're importing just the createApp method from the whole Vue package, and we'll be using that shortly.

So we're importing just the createApp method from the whole Vue package, and we'll be using that shortly. We're also going to need to pull in a component that will serve as both our main image uploader and the gallery on the front end. So we'll need another import statement. Import we'll just call it app from, and it'll be a local component app.vue. And before we continue, let's go ahead and create that now. Components app.vue, and we'll just leave this blank for now. And then we use that createApp like this. createApp, passing in our app component, and then mount to the element that we want.

And then we use that createApp like this. createApp, passing in our app component, and then mount to the element that we want to mount this to on the front end. And we'll just create a div with the id of app. And that's it. So again, if you mostly have experience with Vue 2, or don't have experience with the createApp method, you might be more familiar with something like const app = new Vue. And then you would have the element to bind it to, which would be our app id. And then even like a render statement, which would be hh app. But with this new syntax, it's obviously a lot cleaner.

And then even like a render statement, which would be hh app. But with this new syntax, it's obviously a lot cleaner. And that's all we need for this file. Now we do need to create the app element, and then add something to our app.vue template. So one thing at a time, let's go to our blade template. And let's create a new div here with the id app. And this will be the mount point for our Vue component. And because of the way that we've initialized Vue, instead of our component being injected inside of this element, it's going to replace this element with whatever we have inside of the component.

inside of this element, it's going to replace this element with whatever we have inside of the component. So let's get that added in. Actually, before we do that, let's add our <script> tag down here for the compiled JavaScript. So script src, and it runs through Laravel Mix. So mix js app.js, and then close out the </script> tag. And we can open up that blank component that we started with earlier. So just like every Vue component, we'll start with a <template> tag, and a <script> tag. Now throughout this series, I'm going to be using the options API, which is what you'll be very familiar with if you use Vue 2.

Now throughout this series, I'm going to be using the options API, which is what you'll be very familiar with if you use Vue 2. Vue 3 does introduce a new composition API, but it allows for full backwards compatibility with the old Vue 2 options way of doing things. I'm more familiar with it, and I think for projects like this, it makes more sense. So that's what I'll be sticking with. export default. And let's create our data return. And to test this out, we'll just return a message, hello world. And we'll display that up here in our template.

And to test this out, we'll just return a message, hello world. And we'll display that up here in our template. We'll create a div first. And a heading tag with the class textExtraLarge and textCenter. All right, let's put all this together and test it out. Now before we run php artisan mix in order to compile this script, we'll have to add something to our mix config file. Let's get rid of these comments first. And so you can see here that we are mixing our app.js file with the js method. This used to work in the past, but now if you include Vue in your JavaScript, you have

And so you can see here that we are mixing our app.js file with the js method. This used to work in the past, but now if you include Vue in your JavaScript, you have to explicitly state it in the mix config. And for that, all we need to do is tack on a Vue method in this chain of methods. All right, let's pop open our terminal. And run npm run dev. Uh oh, it errored out. You may need an appropriate loader to handle this file type. Now usually this is installed by default, so I don't know why it's not doing that. But we'll have to install the Vue loader so that it can process and compile our Vue files.

Now usually this is installed by default, so I don't know why it's not doing that. But we'll have to install the VueLoader so that it can process and compile our Vue files. Let's clear this out and run npm install --save-dev VueLoader. All right, and let's try this again, npm run dev. All right, we're still getting an error. Let's see what version of VueLoader that it installed. This might be a cause for our new error. It's installing 15.9, but I'm pretty sure that there is a higher version used with Vue3. And it also includes that next tag that we installed Vue with. So let's just uninstall this now, npm remove --save-dev VueLoader.

And it also includes that next tag that we installed Vue with. So let's just uninstall this now, npm remove --save-dev VueLoader. And npm install --save-dev VueLoader at next. Okay, and there's our higher version, 16.8.3. Now let's try npm run dev one more time. And it compiled successfully. So if we take a look in our browser, we should see our Hello World text being displayed. And there it is. So our Vue component was compiled successfully and is displaying its message data attribute as expected.