In this article, we will see how to install vue 3 in laravel 9 with vite step by step. Here, we will learn laravel 9 vite with install vue js 3. In the previous article, we will install laravel 9 with vue 3. Laravel 9 has major changes.
Vite has replaced Laravel Mix in new Laravel installations when bundling assets. There is no more webpack.mix.js file in the laravel root in the place of the webpack.mix.js file vite.config.js file is introduced.
So, let's see install vue 3 in laravel 9 vite, laravel 9 vite vue 3, laravel 9 install vue 3 with vite, and vue 3 install in laravel 9 vite.
Vite is a modern front-end build tool that provides an extremely fast development environment and bundles your code for production. Before transitioning to Vite, new laravel applications utilized Mix, which is powered by webpack. Vite is used to bundling your application's CSS and JavaScript files.
Vue.js is an open-source model–view front-end JavaScript framework for building user interfaces and single-page applications it is lightweight and easy to use and learn.
So, let's see install vue 3 in laravel 9 vite.
In this step, we will install laravel 9 using the following command.
composer create-project --prefer-dist laravel/laravel laravel-9-vite-vue3-example
Now, we will install NPM using the following command. So, run the following command to the terminal.
npm install
In this step, we will install vue 3 in the laravel 9 application. vue-loader
is a loader for webpack that allows you to author vue components in a format called single file components.
npm install vue@next vue-loader@next
Now, we will install vitejs for vue 3 in laravel 9. This plugin provides the required dependencies to run the vuejs application on vite.
npm i @vitejs/plugin-vue
Now, we will open vite.config.js and add the below code in that file and also import the laravel-vite-plugin.
// 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',
]),
],
});
Now, after installing the vue 3 we will run dev using the following command. Also, starts a vite server on http://localhost:3000. you can not open it in the browser as it is for vite hard reload and it runs in the background and watches the assets of your application like js and CSS.
npm run dev
In this step, we will create vue 3 app. In app.js we will import vue and create the app.
resources/js/app.js
// app.js
require('./bootstrap');
import {createApp} from 'vue'
import App from './App.vue'
createApp(App).mount("#app")
In this step, we will create a file name App.vue in the JS file.
<template>
How To Install Vue 3 In Laravel 9 With Vite Step By Step - Techsolutionstuff
</template>
In this step, we will create the app.blade.php file.
resource/views/app.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel 9 Vite with Install Vue 3 - Techsolutionstuff</title>
@vite('resources/css/app.css')
</head>
<body>
<div id="app"></div>
@vite('resources/js/app.js')
</body>
</html>
In this step, we will add a route in the web.php file
routes/web.php
<?php
use Illuminate\Support\Facades\Route;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/', function () {
return view('app');
});
Also, we will change the .env file.
APP_URL=http://localhost:8000
Run the server using the following command.
php artisan serve
You might also like: