Install Vue 3
npm install vue@next
npm install
npm i vue-loader
npm run dev
create components folder under resources/assets/js/
create vue file Welcome.vue laravelproject\resources\js\components\Welcome.vue
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | //laravelproject\resources\js\components\Welcome.vue<template><div class="container"> <div class="row justify-content-center"> <div class="col-md-12"> <div class="card"> <div class="card-header">Title</div> <div class="card-body"> Info </div> </div> </div> </div></div></template><script> export default { mounted() { console.log('Component mounted.') } }</script> |
mix.js('resources/js/app.js', 'public/js')
.vue()
Next, Go to resources/assets/js then open app.js file and intialize vue js components in this file.
open app.js file and update the following code into your app.js file:
laravelproject\resources\js\app.js
1 2 3 4 5 6 7 8 9 10 11 | //laravelproject\resources\js\app.jsimport './bootstrap';import { createApp } from 'vue';import Welcome from './components/Welcome' const app = createApp({}) app.component('welcome', Welcome) app.mount('#app') |
laravelproject\resources\view\welcome.blade.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | //laravelproject\resources\view\welcome.blade.php<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Laravel 9 VUE 3</title> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"> <link href="{{ mix('css/app.css') }}" rel="stylesheet"></head><body> <div id="app"> <div class="card-body"> <welcome></welcome> </div> </div> <script src="{{ mix('js/app.js') }}" defer></script></body></html> |
C:\xampp\htdocs\laravel\laravelproject>npm run dev
C:\xampp\htdocs\laravel\laravelproject>php artisan serve
Starting Laravel development server: http://127.0.0.1:8000
