DEV Community

Mahmoud Adel
Mahmoud Adel

Posted on • Originally published at laravelspa.site on

How To Install Vue 3 In Laravel 10 With Vite

#laravel10 #vue3 #fullstack #spa

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@next vue-loader@next
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

Top comments (0)

Read next

fabrikapp profile image

The Evolution of Next.js: A Deep Dive into the Latest Updates Since Version 14.2

Fabrikapp -

a727283 profile image

Exploring Zod and the Benefits of Schema-Based Validation in TypeScript Projects

Awais -

a727283 profile image

Quick introduction to the Prisma ORM

Awais -

phukon profile image

How I write Commits like a pro

phukon -