Paulund

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.

UpChecker

Reliable uptime monitoring and instant alerts for any website downtime.

  • Uptime Monitoring
  • Performance Monitoring
  • SSL Certificate Alerts
  • Domain Monitoring
  • DNS Checker
  • XML Sitemap Monitoring