Menu
I am using laravel 8 and now I want install Vue.js. I am trying like this
composer require laravel/uiphp artisan ui vuephp artisan ui vue --auth
220
Laravel is PHP's fastest-growing Framework with its ease of use, scalability, and flexibility. VueJS is the fastest growing Front end Library in the Javascript community. Laravel is providing VueJS support out of the box. So let us get up and running with the Laravel VueJS tutorial.
UPDATE: If you want to completely avoid Inertia / Livewire (Alpine.js) scaffolding in your Laravel ^8.0 applications and use Vue instead - install Laravel UI, which will most likely be maintained indefinitely (scaled to practical software lifetime).
Instructions for installing Vue (and old auth scaffolding) in your Laravel app:
composer require laravel/ui php artisan ui vue for just installing Vue.php artisan ui vue --auth for scaffolding out the auth views.npm install && npm run dev How ever, if you still want to use Vue.js with Livewire scaffolding, use the following instructions.
IMPORTANT: Please note that Vue.js takes control of the DOM once installed, detaching nodes and replacing it, removing other JS listeners. So, if you are using Livewire on the same page with Vue, the Alpine.js that comes with Livewire scaffolding wont work. As a workaround you can use Livewire VueJS support plugin.
run npm install --save vue
Add the following to your resources/js/app.js:
window.Vue = require('vue'); Vue.component('example-component', require('./components/ExampleComponent.vue').default); const app = new Vue({ el: '#app', }); Create an ExampleComponent.vue in the resources/js/components directory
<template> <div>Hello World.</div> </template> <script> export default { mounted() { console.log("Example component mounted"); } }; </script> Add <script src="{{ asset('js/app.js') }}" defer></script> in the <head> section of your layout file (resources/views/layouts/app.blade.php)
Add id="app" to <body> or main <div> in your layout file (resources/views/layouts/app.blade.php)
Add <example-component /> to your view
Run npm run dev or npm run watch
Finally, open up the devtools, and in the console log you should see Example component mounted
160
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
