Install Vue.js 3 on Laravel 10 Project: A Comprehensive Guide

Hello friends welcome now if you want to use the view GS with the laravel project and for one reason you don't like the inertia.js I want to show you in this video how to install view 3 on the level 10 project and use a components from View first I'm going to open the terminal and create a fresh learnable 10 project so I'm going to say here a little bit new and I'm going to name it the level Dash view hit enter and let's create a laravel 10 project and after that the first thing we need to install is the npm dependencies so let's navigate in the laravel Dash view project and here I'm going to say NVM install the level dependencies and then let's install the UJS so with the same npm installed View at next to install the latest version of wgs okay now we have installed the ugs if I open the project with the vs code okay and let's navigate in the avid.config.js because laraveen now used VJs we can see here we have imported the Define config from vid and then we have imported the laravel from laravel with plugins the same here we have a plugin so we add the level the same first we need to install the view login for VTS and then add it here to the plugins array okay so to install a view plugin for VJs we need to say npm installed add PJs slash login Dash view with that we are going to install the new plugin for VJs now we are okay let's come here and let's import The View plugin so we can say import you round the add PJs slash plugin Dot View Dash view sorry and then register that in the plugin so we can say you like this good now let's save this and let's open the resources yes app.js here I'm going to import the create app not from view because if I say value is not going to work but we need to import from fuel slash East glass you esm bundler.js like this and then let's create a constant with name app it's going to be equals with create app and here I'm with the person empty object and then I'm going to say up dot mount and this Mount this inside the div with d of up like this let's save let's go now inside the use welcome and I'm going to select all the remove add the new HTML5 and inside of it other div with the ID both up what we have specified here and let's close this and also now we need to add the JS up JS here on the welcome blade so for that I'm going to say it and add resources slash JS slash r dot JS here good let's save and let's see now if I open the project in here I'm going to say View test we need to run the NVM around that good let's come here and do that let's say npm run Dev hit enter okay it's very fresh now yeah we have an empty eight and as you can see here we have but let's Zoom it for you we have a component is missing template or a render function because we don't have any component yet so let's so and inside the JS I'm going to create a directory for components and inside the components let's create new file and let's say example Dot View here I'm with Savvy setup and just under template and with that Edge wall and let's say example component like this okay save now let's register that component in here so first we need to import that let's say import the example component from dot dash components slash examples Dot View and register that we can register here as n components and an object and let's say example like this okay save now on the welcome let's add inside the div with ID app because here we have mounted the View inside here let's see example and where the set blows up and let's save now and let's see yeah here we have the example up and that's it okay but what I want is and here instead of importing the create app from view disk view SM bundler I'm going to create an Alia so let's copy this let's go on the beat JS with config sorry and here I would say result and add an alias for the view and yes and save you and now in here and with the add the view disk view SM Asm bundler leave that now in here we just need to say The View Alias like this with that I think we are more okay and let's come here and refresh everything works correctly so on the console yeah everything is good okay friends so what we have done is install the view and also install the your plugin for VTS then on the vid.config.js we have make some changes first import the view from your VJs slash plugin View added the view plugin here and also I just added the Alias for View list us esm blender and on the objects import the create app importance of the component create a content for app and also if you don't like like this register the components you can register the component by saying up Dot component one by one and give it the name for example example in our case and example is the component and say app.mount and let's come here yeah everything works correctly okay friends about it about this video I hope you enjoy and if you like don't forget to subscribe to my channel and like the video and see you in the next one

Channel: Code With Tony

Views: 22,660

Keywords: laravel, vuejs, livewire, laravel 8, laravel 9, laravel crud, laravel 8 tutorial, laravel 9 tutorial, vuejs 3.3, whats new in vue, whats new in vuejs, whats is new in vue 3.3, vue defineModel, vue generic components, vue import types, install vue 3 to laravel, laravel install vuejs, how to install vue 3 on Laravel, custom install vue 3 on laravel

Id: Su8dWVrHdkc

Length: 8min 54sec (534 seconds)

Published: Mon May 22 2023