Use Vue in Laravel Application

#Introduction

Vue.js is a popular JavaScript framework for building user interfaces. It's easy to use, flexible, and powerful, making it a great choice for building modern web applications.

Laravel is a popular PHP framework for building web applications. It provides a robust set of features for developing web applications quickly and efficiently.

In this guide, we'll show you how to use Vue.js in a Laravel application to build dynamic and interactive user interfaces.

#Installation

To use Vue.js in a Laravel application, you need to install the Vue.js package using npm or yarn. You can do this by running the following command in your Laravel project directory:

npm install vue

We're going to use Vite as the build tool for our Vue.js application. Vite is a fast, modern build tool that provides a great development experience for building Vue.js applications.

To do this you need to install Vite using npm or yarn:

npm install vite

Next we can install the vue-loader plugin for Vite:

npm install @vitejs/plugin-vue

#Configuration

Next, you need to configure Vite to build your Vue.js application. You can do this by creating a vite.config.js file in the root of your Laravel project directory.

Here's an example configuration for Vite:

import { defineConfig } from 'vite';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    resolve: {
        alias: {
            '@': '/resources/js',
            'vue': 'vue/dist/vue.esm-bundler.js'
        },
    },
});

With this setup we can add Vue components to our Laravel application and build them using Vite.

In your resources/js/app.js file you need to add vue application

import { createApp } from 'vue';
import HelloWorld from './HelloWorld.vue';

// VueJS
const app = createApp({});

// Components
app.component('hello-world', HelloWorld);

// Define App
app.mount('#app');

#Usage

To use Vue.js in your Laravel application, you can create Vue components and include them in your Blade templates.

Here's an example of a Vue component that displays a simple message:

<template>
    <div>
        <h1>Hello, World!</h1>
    </div>
</template>

You can include this component in your Blade template using the following code:

<div id="app">
    <hello-world></hello-world>
</div>

When you load your Laravel application in the browser, you should see the message "Hello, World!" displayed on the page.