Laravel + Vue, switch from webpack to vite

Hello people,   I've been trying to figure out my problem with AI tools for two days now, but I'm going around in circles. That's why I'm hoping that swarm intelligence can help me more.

I think I have a pretty good understanding of the basic process now. A Vue app is created and then attached to a DOM element. The components are then embedded within this element and SHOULD actually be rendered.

After much trial and error, I have now reached a point where the app supposedly starts up and is attached correctly, but the components are not visible and are only displayed in the DOM with their names. For example, <TestComponent></TestComponent>.

I am currently at a loss as to what to do next.  I have already tried the following:

Synchronous registration of components in the Vue app (eager import)
Asynchronous registration of components in the Vue app
Adding components as custom elements (works, but styling no longer works due to shadow dom)

According to all the migration guides I've read, it should now work. When I check my console in the browser, everything seems to be working and no errors are being thrown.

martinbean

9 months ago

Level 80

@benjaminbauer It would help if you actually showed some code.

BenjaminBauer

9 months ago

Level 1

@martinbean tried to input code here yesterday but I guess my post was to long.

vite.config.ts

import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import vue from "@vitejs/plugin-vue";
import { globSync } from "glob";

let files = globSync(["resources/js/*.js"]);
let input = [];
files.forEach((file) => {
    input.push(file.replace(/[\\\/]+/g, "/"));
});

console.log("Vite input files:", input);

export default defineConfig({
    resolve: {
        alias: {
            vue: "vue/dist/vue.esm-bundler.js",
        },
    },
    plugins: [
        vue(),
        laravel({
            input,
            refresh: true,
        }),
    ],
    build: {
        outDir: "public/build",
    },
});

as far as I can tell the vite config is valid. I see the build with the expected outputs. Next my vue.js file which is inserted in my blade file with @vite(['resources/js/vue.js'])

import { createApp } from "vue";

const app = createApp({});

const components = import.meta.glob("./components/**/*.vue", {
    eager: true,
});

console.log("Found components:", Object.keys(components));

Object.entries(components).forEach(([path, definition]) => {
    const name = path.split("/").pop().replace(".vue", "");
    console.log(`Registering component: ${name}`, definition);

    try {
        app.component(name, definition);
        console.log(`✓ Successfully registered: ${name}`);
    } catch (error) {
        console.error(`✗ Failed to register ${name}:`, error);
    }
});

document.addEventListener("DOMContentLoaded", () => {
    console.log("DOM loaded, starting Vue mount process...");

    // Finde alle möglichen Mount-Punkte
    const possibleMounts = [
        document.getElementById("app"),
        document.querySelector(".container"),
        document.querySelector("main"),
        document.querySelector("body"),
    ].filter((el) => el !== null);

    console.log("Possible mount points found:", possibleMounts);

    let mountElement = possibleMounts[0];

    if (!mountElement) {
        console.log("No suitable mount point found, creating wrapper...");
        const bodyContent = document.body.innerHTML;
        document.body.innerHTML = `<div id="vue-app">${bodyContent}</div>`;
        mountElement = document.getElementById("vue-app");
    }

    console.log("Mounting Vue to:", mountElement);
    try {
        app.mount(mountElement);
        console.log("✓ Vue App mounted successfully!");
    } catch (error) {
        console.error("✗ Failed to mount Vue app:", error);
    }
});

BenjaminBauer

9 months ago

Level 1

Next my really simple blade files

parent html page

<html>
<head>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>@yield('title', app_name())</title>
    @vite(['resources/js/vue.js'])
</head>

<body class="{{ config('backend.body_classes') }}" id="body">
    <main class="main" id=app>
        @yield('content')
    </main>
</body>
</html>

child html page

@extends('backend.layouts.app')
@section('title', __('strings.backend.dashboard.title') . ' | ' . app_name())

@section('content')
    <TestComponent></TestComponent>
@endsection

The test component

<script setup lang="ts">
import { ref, onMounted } from "vue";

const currentTime = ref(new Date().toLocaleTimeString());
onMounted(() => {
    console.log("TestComponent mounted successfully!");
});
</script>

<template>
    <div style="background: red; color: white; padding: 10px">
        TEST COMPONENT IS WORKING! Current time: {{ currentTime }}
    </div>
</template>

<style scoped lang="scss"></style>

When checking my console I see that the vue app is mounted successfully into to 'main class="main" id=app' element but in the DOM I only see <TestComponent></TestComponent> and not the expected div element.

Please or to participate in this conversation.