Use Vue in Laravel Application


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.


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


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: [
            input: [
            refresh: true,
            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


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:

        <h1>Hello, World!</h1>

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

<div id="app">

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


Reliable uptime monitoring and instant alerts for any website downtime.

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