Vue 3 setup with laravel 10 and vite - WebJourney

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.

Buy Me A Coffee

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

  • Share This:

Comments - 2

rownak jahan

Thanks. Work for me.

May 5, 2023

WebJourney

Most welcome. thanks to your never ending support.

May 7, 2023

rownak jahan

Nice Sir Thanks.

Jun 3, 2023