Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Ceriabuddyz's avatar

Laravel vue with vite

Hye, I'm new around here with Laravel. Need some help with personal project. The story will go "User will put a date called olddate then another input box will automatically print it but added 6 Years onto it. Like User put in 01/01/2000 (olddate) -> input box automatically add 6 Years and print out 01/01/2006 .Then user can click on submit to send out the data." Any solution? i use laravel blade with bootstrap at first then integrate vue.js using vite but still looking for the answer.

0 likes
6 replies
muhammadhuzaifa's avatar

Hi @ceriabuddyz

There are 2 approaches to achieve this, either you do it on the vue end using moment or by initiaing an ajax request from vue to your server and let the laravel do this for you using Carbon.

I'll personally won't bother the server for this and probably do this on the client side until and unless its required to communicate with the backend.

<template>
    <VueDatePicker :model-value="oldate" @update:model-value="handleDate" />
    <VueDatePicker :model-value="newdate" />
</template>

<script setup>
import { ref } from 'vue';
import moment from 'moment';
import VueDatePicker from '@vuepic/vue-datepicker';
import '@vuepic/vue-datepicker/dist/main.css'


const oldate = ref();
const newdate = ref();

const handleDate = (modelData) => {
  oldate.value = modelData;
  newdate.value = moment(oldate.value).add('years',6).toDate();
}
</script>
2 likes
Ceriabuddyz's avatar

@muhammadhuzaifa ahh alright i get how the using moment method. How about the code of the input is inside the blade file? How do i change the code so that it can capture the olddate -> process it in vue components -> print futuredate back in blade file?

muhammadhuzaifa's avatar

@Ceriabuddyz you can listen for the update:model-value event of newdate datepicker and when there's a change in value you can then use the vanilla javascript to grab the element and print the new date there for example document.getElementById('you-selector').value or innerText

Ceriabuddyz's avatar

@muhammadhuzaifa I tried the method you mentioned but it seems like it does not working. It doesn't send out the output onto the Inputbox. Need some help looking into it

master.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>WTDApps</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
    @vite(['resources\js\app.js'])
</head>
<body>
    <div id="app" class="container mt-5">
        
        <h1 class="text-primary mt-3 mb-4 text-center"><b><i>UNIT AMANAH</i></b></h1>
        
        @yield('form')
        
    </div>
</body>
</html>

Terimaan.blade.php

pengekalan.vue

<script>
export default {
  methods: {
    handleDateChanger(event) {
      const inputElement = event.target;
      const tempohDate = inputElement.valueAsDate;

      tempohDate.setFullYear(tempohDate.getFullYear() + 6);

      const outputElement = document.getElementById("tempohpengekalan");
      outputElement.value = tempohDate.toISOString().split("T")[0];
    },
  },
};
</script>

app.js

// resources/js/app.js
import { createApp } from 'vue';
import Pengekalan from'./components/Pengekalan.vue' ;
import './bootstrap';

const app = createApp({});
app.component("pengekalan", Pengekalan);
const mountedApp = app.mount("#app");

vite.config.js

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

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: {
            vue: 'vue/dist/vue.esm-bundler.js',
        },
    },
});
muhammadhuzaifa's avatar

@Ceriabuddyz I don't see where you are triggering the handleDateChanger method also please use English for you app internal structure, such as table names, column names, component names and pretty much everything and as for the frontend you should use internationalization for multilingual support.

1 like
puklipo's avatar

Before integrating Laravel with Vue, you must understand Vue.
Let's create everything with Vue components, including the form.

// vue component
<script>
</script>

<template>
</template>

In Blade, just place Vue components.

// blade
<div id="app">
    <example-component></example-component>
</div>

The idea of ​​"controlling Blade's html from Vue" is a mistake.

2 likes

Please or to participate in this conversation.