How To Install Vue 3 In Laravel 9 | Vue 3 With Laravel 9 | Laravel 9 with Vue 3 | Use Vue 3 In Laravel 9

In this post, we will learn how to install Vue js 3 in laravel 9?. This post shows you how to install vue 3 in laravel 9. If you want to see an example of installing vue 3 in laravel 9 then you are in the right place. Laravel 9 is the latest version of the laravel framework at the writing of this article. As you know Laravel is the most popular PHP framework and it’s easy to use scale, and flexible. Vue js is a progressive framework for building user interfaces and it is lightweight and easy to use and learn. Vue 3 is the latest version of the Vuejs Framework and growing rapidly.

By the end of this post, you’ll have created a Vue 3 an Laravel 9 project, built one component and connect it with laravel blade file.

How To Install Vue 3 In Laravel 9 ?

Use the following steps to install vue 3 in the laravel 9 application.

• Install laravel 9 App
• Install NPM Dependencies
• Install Vue 3
• Update webpack file
• Compile the assets
• Create Vue 3 App
• Create Vue 3 Component
• Connect Vue 3 Component with Laravel blade file.
• Update Laravel Routes
• Start The Local Server

Step 1: Install Laravel 9 App

Open your terminal and navigate where you want to install the laravel application. To install the laravel 9 framework you need to execute the following command.

composer create-project --prefer-dist laravel/laravel Laravel9Vue3Project

Step 2: Install NPM Dependencies

After installing the project, go to the project folder, and in the terminal execute the following command to install the front-end dependencies. you need node.js to be installed in your system to check the node.js version just write node -v and npm -v. if the node is not installed on your machine please visit this link

npm install

Step 3: Install Vue 3

Now after installing npm we need to install vue 3, for that execute the following command in the terminal. vue-loader is a loader for webpack that allows you to author Vue components in a format called Single-File Components . vue-loader@next is a loader that is for webpack to author vue components in single-file components called SFCs.

npm install vue@next vue-loader@next

Step 4: Update webpack file

Webpack is a module bundler for modern JavaScript applications. Open webpack.mix.js and copy-paste the following code. Here mix() helper method helps to generate the public/css/app.css and public/js/app.js files and correct path for us. mx() helper method also recommends proper file name according to versioning.

// webpack.mix.js
const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
    .vue()
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

Step 4: Compile The Assets

Now after installing the vue 3 we need to compile the assets for that run the following command and it will compile your resources/js/app.js file and saved it to public/js/app.js.

npm run dev && npm run watch

Step 5: Create Vue 3 App

open resources/js/app.js here you create an instance of the vue 3 projects firstly you import { createApp } from ‘vue’ and createApp takes a parameter here we have passed App. vue file which is the main file responsible for the vuejs content.

// app.js
require('./bootstrap');

import {createApp} from 'vue'

import App from './App.vue'

createApp(App).mount("#app")

Step 6: Create Vue 3 Component

Under the js folder create a file name ‘App. vue’ and write the following content for this example let’s write simple “hello vue 3” you can change it according to your requirements. Vue allows you to declaratively bind the rendered DOM to the underlying Vue instance’s data Under the hood, Vue compiles the templates into Virtual DOM render functions.

<template>
	Hello vue 3
</template>

Step 7: Connect Vue 3 Component with Laravel blade file.

Now we need to create a blade file where we’ll load vue3 code for that create a new file in the resources/views folder name vue.blade.php. Link app.css file in header section with the help of asset() helper which points to the public folder. Add compiled js file from public/js/app.js in the vue.blade.php file It will load all the js you need to run the vue js code. you can add code to the app.js in the resources folder and compile it, it creates an app.js file in the public folder.

{{-- resources/views/vue.blade.php --}}
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Laravel 9 Vue 3 - DevDuniya.com</title>
	<link rel="stylesheet" type="text/css" href="{{ asset('css/app.css') }}">
</head>
<body>
	<div id="app"></div>

	<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>

Step 8: Update Laravel Routes

Laravel routes folder is responsible for the routing in laravel it navigates to the correct view or controller path from here. Inside the routes folder, api.php is responsible for all APIs in laravel. If you wanted to create a crud operation in vuejs then you need to create some APIs to connect your vuejs project with laravel, APIs help to connect the front-end with the back-end, for this example, we don’t need APIs we just need to update web.php file Open routes/web.php and load the vue.blade.php file on the home page.

<?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('vue');
});

Step 9: Start the Local server

Now execute the following command from your terminal. It runs the project on localhost 8000 port by default but you can change it also if you are running another project on the same port number.

php artisan serve

and navigate to the following link http://localhost:8000/

Updated Post is Here:-

How To Install Vue 3 In Laravel With Vite

Conclusion

That’s it, I hope this article provides you with the necessary information about laravel 9 and vue 3 to build your own app that uses Laravel 9 and Vue 3.

If I forgot or missed something or any ideas for future posts on this topic, let me know in the comments.

I’d love to know!