DEV Community

Mahmoud Adel
Mahmoud Adel

Posted on • Originally published at laravelspa.site on

3

How To Install Vue 3 In Laravel 11 With Vite Updated

Preview

Image Laravel 10 Vue 3

What is Laravel

  • Laravel is a web application framework with expressive, elegant syntax.
  • A web framework provides a structure and starting point for creating your application, allowing you to focus on creating something amazing while we sweat the details.

What is Vue js!

  • Vue is a JavaScript framework for building user interfaces.
  • It builds on top of standard HTML, CSS, and JavaScript.
  • It Helps you efficiently develop user interfaces, be they simple or complex.

What is Vite js!

Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects. It consists of two major parts:

  • A dev server that provides rich feature enhancements over native ES modules, for example extremely fast Hot Module Replacement (HMR).

  • A build command that bundles your code with Rollup, pre-configured to output highly optimized static assets for production.

We conclude from the above that the most important thing that distinguishes vite is the speed at the start of the server, as well as making a bundle of files upon completion of the project.

Step 1: Create New Laravel Project

composer create-project laravel/laravel laravel10-vue3
Enter fullscreen mode Exit fullscreen mode

Step 2: How To Install Vue 3 on Laravel 10

npm install
npm install vue@latest
Enter fullscreen mode Exit fullscreen mode

Step 3: Install Plugin Vue From Vite

npm i @vitejs/plugin-vue
Enter fullscreen mode Exit fullscreen mode

Step 4: Edit File 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({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});
Enter fullscreen mode Exit fullscreen mode

Step 5: Edit File app.js Inside Folder resources/js

import {createApp} from 'vue'

import App from './App.vue'

createApp(App).mount("#app")
Enter fullscreen mode Exit fullscreen mode

Step 6: Create File app.blade.php Inside Folder resources/views

Make sure to add the css file and javascript as shown and also the div with id=app

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>ًApplication</title>
        @vite('resources/css/app.css')
    </head>
    <body>
        <div id="app"></div>
        @vite('resources/js/app.js')
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Step 7: Create File App.vue Inside Folder resources/js

<template>
    <h1>
        How To Install Vue 3 in Laravel 10 : ZWebCourses :)
    </h1>
</template>
Enter fullscreen mode Exit fullscreen mode

Step 8: Edit File web.php Inside Folder routes

<?php

use Illuminate\Support\Facades\Route;

Route::get('/', function () {
    return view('app');
})
->name('application');
Enter fullscreen mode Exit fullscreen mode

Step 9: Run PHP Local Server

php artisan serve
Enter fullscreen mode Exit fullscreen mode

Step 10: Run Node Local Server

npm run dev
Enter fullscreen mode Exit fullscreen mode

Go to the following link http://127.0.0.1:8000/ and you will find the following

Image Laravel 10 Vue 3

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay