Vue 3 setup with laravel 10 and vite - WebJourney
In this tutorial we will learn how to setup vue 3 with laravel 10 and vite step by step and create vue components for test our laravel vue app. Let's learn about vue js.
What is Vue?
According to the documentation Vue is a modern JavaScript Progressive Framework for building user interfaces. It's a front-end framework for building a Single Page Application (SPA).
What is Vite?
Vite is a build tool and development server that is designed to make the development process of modern web applications faster and more efficient.
Vite is specifically optimized for building and bundling modern JavaScript applications, especially those that use the ES modules standard. It features a fast, in-memory development server that allows for quick hot module replacement (HMR) and fast page reloads, as well as lightning-fast builds for production deployments.
Laravel team has released "laravel 9.19" with a major change. There is no more webpack.mix.js file in the laravel root instead of the webpack.mix.js file vite.config.js file is introduced.
In this article, we will see how to install Vue js 3 in laravel10 latest version with vite. This article shows you how to install vue 3 in laravel 10 with the latest upgrades. If you are looking an example of installing vue 3 in laravel-vite then you are in the right article. We are using laravel 10 but it works for any laravel latest version start from laravel 9.19.
How to setup vue 3 with laravel 10 and vite
1. Install laravel 10
2. Install NPM Dependencies
3. Install Vue 3
4. Install vitejs/plugin-vue plugin
5. Update vite.config.js
6. Compile the assets
7. Create Vue 3 App
8. Create Vue 3 Component
9. Connect Vue 3 Component with Laravel blade file.
10. Update Laravel Routes
11. Start The development Server
Step - 1. Install laravel 10
Run the following artisan command to install your laravel app.
composer create-project laravel/laravel laravel-vue-setup
Step - 2. Install NPM Dependencies
For install all npm dependencies open your terminal go to your newly created laravel app and run the bellow command.
npm install
Step - 3. Install Vue 3
Now we have to install vue unsing the following npm command
npm install vue@next vue-loader@next
Step - 4. Install vitejs/plugin-vue plugin
Now install vue plugin
npm i @vitejs/plugin-vue
Step - 5: Update vite.config.js file
Update the file vite config file with the bellow code.
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',
]),
],
});
Step - 6. Compile the assets
Now we need to compile the assets app.css and app.js by the following command.
npm run dev
Step - 7. Create Vue 3 App
Update the app.js file like bellow.
resources/js/app.js
import './bootstrap';
import { createApp } from 'vue'
// import the root component App from a single-file component.
import App from './App.vue'
const app = createApp(App)
app.mount('#app')
Step - 8. Create Vue 3 Component
We need to create a vue component inside resources/js directory
resources/js/App.vue
<template> </template>
<template>
<div>
<h2> Vue 3 setup with laravel 10 and vite - WebJourney </h2>
</div>
</template>
<script>
export default {
name: "App.vue"
}
</script>
<style scoped>
</style>
Step - 9. Connect Vue 3 Component with Laravel blade file.
We we welcome.blade.php as a blade file. You can use any blade file. Now change the default code with the given bellow code.
resources/welcome.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vue 3 setup with laravel 10 and vite - WebJourney</title>
@vite(['resources/css/app.css','resources/js/app.js'])
</head>
<body>
<div id="app"></div>
</body>
</html>
Step - 10. Update Laravel Routes
Update routes from web.php according to your needs.
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('welcome');
});
Step -11. Start The development Server
In the last step we need to run the artisan server with the bellow command.
php artisan serve
Open .env file set APP_URL=http://127.0.0.1:8000. It will help vite to check the js and CSS updates and changes them in the browser instantly.
Now open the browser paste the link http://127.0.0.1:8000 and hit enter.
Note: Keep in mind npm run dev command must running.
Hope this will help you a lot. Thank you for reading the post.
If you like what you are reading, please think about buying us a coffee as a token of appreciation.
We appreciate your support and are committed to providing you useful and informative content.
We are thankful for your ongoing support.
You May Read Bellow Articles:
Laravel 9 live search data in a table using ajax.
How to send SMS in laravel 9 using Twilio SMS API-Webjourney
Laravel 9 pdf invoice generate and download with barryvdh dompdf
How to create multi language website by laravel 9
Laravel image crud with radio, checkbox, email, date, text, number, color, select box
Laravel 10 multiple form validation on the same page-WebJourney
Tags
Comments - 2
rownak jahan
Thanks. Work for me.
May 5, 2023
WebJourney
Most welcome. thanks to your never ending support.
May 7, 2023