Install Vue 3 in Laravel 10 in 2024

1. Install Laravel App – Version 10
Open a terminal and run the command:

composer create-project --prefer-dist laravel/laravel:^10.0 project-name

2. Install the dependencies. These dependencies are listed in your package.json file.

npm install

3. Install VueJS 3 and @vitejs/plugin-vue

npm install vue @vitejs/plugin-vue

4. Look in the root of your application the file vite.config.js and edit the file.

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
    resolve: {
        alias: {
            vue: 'vue/dist/vue.esm-bundler.js',

5. Go to app/resoures/js and create a file named : App.vue. This will be the entry point file of our vue application. Update the file.

<h1>This is inside APP.VUE</h1>

6. Still in app/resources/js edit the file app.js

import './bootstrap';
import App from './App.vue'

import { createApp } from 'vue';
const app = createApp(App);


7. Go to app/resources/views and create a file home.blade.php and add the following in the file.

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">


    <!-- Styles -->


    <div id="app">
        <!-- Vue.js components will be processed here. -->
        <counter />


Note : check to add the @vite([‘resources/js/app.js’]) is in the head section. This will initialize VueJs

8. go to app/routes and edit web.php

use Illuminate\Support\Facades\Route;

Route::get('/', function () {
    return view('home');

9. Go to terminal and cd to your application folder and run : 

npm run dev

Output : 

  VITE v5.2.6  ready in 746 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

  LARAVEL v11.0.8  plugin v1.0.2

  ➜  APP_URL: http://localhost

10. Open another terminal and cd to your application folder and run

php artisan serve

Output : 

  INFO  Server running on [].
  Press Ctrl+C to stop the server

11. Open a browser and navigate to : localhost:8000

vue page

And that is it. You can start your Vue app with laravel. Happy coding.

This post has 0 like.

Like this post. 👍

Leave a Comment

Your email address will not be published. Required fields are marked *