In this section we will install vue 3 in laravel 9 with vite. In laravel 9.19 come with vite tool. There is two way you can install vue 3 in laravel 9. first you can install vue 3 from scratch or you can use laravel breeze inertia vue. We will see both.
1. Install Vue 3 in Laravel With Vite From Scratch
Create Laravel Project
composer create-project laravel/laravel laravel-vite-vue
Install vue 3 with vue-loader.
npm install vue@next vue-loader@next
Install @vitejs/plugin-vue.
npm i @vitejs/plugin-vue
Install npm.
npm install && npm run dev
Import @vitejs/plugin-vue in vite.config.js.
vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [
vue(),
laravel([
'resources/css/app.css',
'resources/js/app.js',
]),
],
});
import and mount vue 3 in resources/js/app.js.
resources/js/app.js
import './bootstrap';
import { createApp } from 'vue';
import app from './Page/app.vue'
createApp(app).mount("#app")
Create Page Folder and app.vue file.
resources/js/Page/app.vue
<template>
<h1>
Laravel 9 vite with vue 3
</h1>
</template>
Next, you need define root in blade file and @vite directive
resources/views/welcome.blade.php
<!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 9 with vue 3 vite</title>
</head>
<body>
<div id="app"></div>
@vite('resources/js/app.js')
</body>
</html>
You need to npm run build or npm run dev command to create asset vue file.
npm run dev
and
php artisan serve
laravel 9 vite vue 3
2. Install Vue 3 in Inertia Using Laravel Breeze
Create Laravel Project
composer create-project laravel/laravel laravel-inertia-vue
Next, you need to run below command in your terminal
composer require laravel/breeze --dev
Run below command to Install Inertia vue 3.
php artisan breeze:install vue
// and...
npm install
npm run dev
php artisan migrate
You need to npm run build or npm run dev command to create asset vue file.
npm run dev
and
php artisan serve
Read Also
Laravel 9 Add Simple Sidebar with Tailwind CSS Example
How to Use Carousel Slider in Laravel 9 Example
Laravel 9 Posts with Tags Many to Many Relationships Example
Laravel 9 Insert Category in Posts CRUD Example
How to Use Ckeditor 5 in Laravel 9 Vite with Tailwind CSS
Laravel 9 Simple Image Upload in Ckeditor 5 Example
Laravel 9 Flash Message Timeout and Hide Message Example
Install & Setup Markdown Editor in Laravel 9
Nuxt 3 Data Fetching Using Laravel 9 Api Example
Laravel 9 Image Upload with Preview using Tailwind CSS & Alpine JS
Laravel 9 with Tailwind CSS Form Validation Example
Laravel 9 Backend Api Connect with Vue 3 Using Axios Example
Laravel 9 Authentication with Next js Example
Laravel 9 Sanctum Authentication with Nuxt JS Example
Laravel 9 Simple Search with Pagination Example
Laravel 9 Install Setup TALL(Tailwind, Alpinejs, Livewire) Admin Panel
How to Fix and Clean Code Style in laravel 9
Laravel 9 Image File Upload Example
