1. Install Laravel App – Version 10
Open a terminal and run the command:
composer create-project --prefer-dist laravel/laravel:^10.0 project-name2. Install the dependencies. These dependencies are listed in your package.json file.
npm install3. Install VueJS 3 and @vitejs/plugin-vue
npm install vue @vitejs/plugin-vue4. Look in the root of your application the file vite.config.js and edit the file.
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
vue(),
],
resolve: {
alias: {
vue: 'vue/dist/vue.esm-bundler.js',
}
}
});
5. Go to app/resoures/js and create a file named : App.vue. This will be the entry point file of our vue application. Update the file.
<template>
<h1>This is inside APP.VUE</h1>
</template>6. Still in app/resources/js edit the file app.js
import './bootstrap';
import App from './App.vue'
import { createApp } from 'vue';
const app = createApp(App);
app.mount('#app');7. Go to app/resources/views and create a file home.blade.php and add the following in the file.
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<!-- Styles -->
@vite(['resources/js/app.js'])
</head>
<body>
<div id="app">
<!-- Vue.js components will be processed here. -->
<counter />
</div>
</body>
</html>Note : check to add the @vite([‘resources/js/app.js’]) is in the head section. This will initialize VueJs
8. go to app/routes and edit web.php
use Illuminate\Support\Facades\Route;
Route::get('/', function () {
return view('home');
});9. Go to terminal and cd to your application folder and run :
npm run devOutput :
VITE v5.2.6 ready in 746 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h + enter to show help
LARAVEL v11.0.8 plugin v1.0.2
➜ APP_URL: http://localhost10. Open another terminal and cd to your application folder and run
php artisan serveOutput :
INFO Server running on [http://127.0.0.1:8000].
Press Ctrl+C to stop the server11. Open a browser and navigate to : localhost:8000
And that is it. You can start your Vue app with laravel. Happy coding.
This post has 0 like.