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

Welcome to our RUclips tutorial on installing Vue.js 3 on a Laravel 10 project! In this step-by-step guide, we'll walk you through the process of integrating Vue.js 3 into your Laravel application, unlocking the power of a robust frontend framework combined with the versatility of a popular PHP backend.
Whether you're a seasoned Laravel developer looking to enhance your project with Vue.js 3 or a beginner seeking to explore the synergy between these two technologies, this tutorial is perfect for you. We'll cover all the essentials, from setting up your development environment to creating Vue components and integrating them seamlessly into your Laravel views.
Subscribe to our channel and hit the notification bell to stay updated with the latest tutorials, tips, and tricks on web development, Laravel, and Vue.js.
CloudWays Promo Code: CWT20
Promo Discount: 20% off for three months
Promo Link: bit.ly/cloudways-cwt
Hostinger: hostinger.com?REFERRALCODE=1TONY30
DigitalOqean $200 free: m.do.co/c/35b78d1e88a4
Follow me:
Twitter: / codewith_tony
Facebook Page: / codewithtony
Instagram: / codewithtonyofficial
GitHub: github.com/codewithtonyofficial
Playlists:
Laravel Splade Tutorial: bit.ly/3j0IfTW
Laravel Filament Permission: bit.ly/3Gojd8Z
Vue Authentication: bit.ly/3g7YZHd
Laravel Inertia Portfolio - bit.ly/3DlxTp5
Laravel Reddit clone - bit.ly/3UOYS2O
React tutorial for beginners - bit.ly/3arkqjX
Laravel Filament Blog - bit.ly/3nWYv74
Laravel 9 Full Tutorial - bit.ly/3nTiyTR
Laravel 9 Media Library - bit.ly/3LpJmVr
Laravel Essentials Full Tutorial - bit.ly/3vplyuC
Laravel Mail Tutorial - bit.ly/37mJUNh
Laravel Restaurant Reservation - bit.ly/3Jc5IcG
Spatie Laravel Permission - bit.ly/3pOsOhN
Laravel Testing For Beginners - bit.ly/3t1gNq4
Laravel Roles and Permissions - bit.ly/3gOhM7d
LARAVEL INERTIA MOVIE APP - bit.ly/3FVMp4Q
Laravel Livewire Movie App - bit.ly/3s8D6v1
Laravel Classified Website - bit.ly/3nsFRnb
Livewire Employees - bit.ly/2ZtIpZY
Laravel Employees Management - bit.ly/3Gglt14
Laravel admin panel - bit.ly/3CcX75M

[@tonyxhepaofficial]

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

[@JohnmardySanmiguel-yj2qe]

how about adding vuetify sir

[@turdakhov]

Thank you! Best tutorial. It very helped me.

[@kinsam6170]

I am getting this error. Can you help @codewithtonyofficial
C:\xampp\htdocs\lms>npm install vue@next vue-loader@next
npm ERR! code ETARGET
npm ERR! notarget No matching version found for vue@next.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.
npm ERR! A complete log of this run can be found in: C:\Users\Hp\AppData\Local
pm-cache\_logs\2024-04-25T02_07_40_721Z-debug-0.log

[@eugenfelipe853]

Thanks i was looking for this for long time beacuse i wasnt sure about directories. Now everything is clear for me thanks :)

[@thebestchillsounds4780]

Finally tutorial that helped :)

[@user-yt4rg5tn9q]

Thanks for your help, this helped me tremendously.

[@kenjohnsiosan9707]

very helpful . please do a series of vue3 and laravel10. thank you sir

[@RajendrSinghJadon]

thank you sir for this great tutorial video

[@mohammadadnan8112]

جزاك الله خيرا

[@learnwithyan]

Thx bro for lesson

[@dopevideos8755]

Amazing tutorial. Please can you make e video about hot to install a template, where to put assets, how to structure header footer sidebar etc.

[@muhammadumarsotvoldiev8768]

thank you very much

[@allyss9022]

thank you so much

[@joshjuntilla]

I have a question. Some Vuejs project needed to run the "npm run build" to build the files for production use but you didn't run it in your tutorial. Is it necessary to run that or not? Still a bit confuse how Vuejs is working with Laravel.

[@rwotbusiness3690]

very helpful

[@milad8451]

Thank you very much

[@tonyxhepaofficial]

You are welcome

[@saplkereviz6824]

Thanks

[@eltiopacote]

Hi buddy, if I wanted to compile app.js to work under the `public/js/app.js` folder and be able to reference it in the typical `` way, how would I do it?
Another question, is it mandatory to use Vite? I think the `Vite` component is for easy development, but what if I don't want to use it?
Could you make a video solving these questions? Regards and thank you very much.

[@AntonioCabralNumberOne]

Interesting.
But now, how to manage routes, install pinia and etc?

[@thesparkdev6665]

Thanks for this video! very useful. I would like to know what's the main difference between using vue within laravel project like this via app.js VS using vue as a standalone application and using Laravel REST API to perform CRUD?

[@Neptun084]

I wonder what operation system is, I think is linux, but the distro?

[@jorensumagang3533]

How do i add vuetify?

[@alexandergeorgesquire220]

will this work in laravel 11?

[@khainghtoo9372]

Sir can i @yield next blade ? Tutorail need Sir!

[@rizkiaprita]

fuck yeah!! thanks man!
youre rock!

[@tabish__ali]

No matching version found for vue@next.

[@imambs521]

npm install vue-next is working

[@louisevirtudazo2822]

not working with laragon I assume

[@imambs521]

npm install vue-next is working now vue@next is not working

[@Daaboo]

npm install vue@3 is working

[@kyung9790]

Thanks, finally i found tutorial that works for me (σ≧▽≦)σ

[@shahintamjidi]

voice is mono

[@tonyxhepaofficial]

Thanks

[@EmotionalWeather]

Yea sound is broken, sadly makes this unwatchable

[@THEShAdOwHFV]

U can't really handle 9 minutes?? i don't think it's unwatchable just only cause of mono xD@@EmotionalWeather

[@EmotionalWeather]

@@THEShAdOwHFV Yes, if you have headphones, its not watchable.

[@Chernov1984]

+

[@THEShAdOwHFV]

For those that can't use the alias, i have this code working in vite.config.js:
Don't know why but without the @ in alias is not working..
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
import { fileURLToPath, URL } from 'node:url'
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
vue()
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)),
vue: 'vue/dist/vue.esm-bundler.js',
}
}
});