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

thesecretjuggler's avatar

Installed vue to my laravel application but my app.js not firing.

Trying to integrate a frontend framework to my current laravel application. But having trouble getting my app-vue.js file to render. laravel version - 9.52.16 vue version - 3.4.15

app-vue.js file


import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'

createInertiaApp({
    resolve: (name) => require(`./Pages/${name}.vue`),
    setup({ el, App, props, plugin }) {
        createApp({ render: () => h(App, props) })
            .use(plugin)
            .mount(el)
    },
})

set up files in /resources/js/Pages/CrmIntegration/Index.vue

my app.blade.php


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <script src="{{ mix('/js/app-vue.js') }}" defer></script>
    @inertiaHead
</head>
<body>
@inertia
</body>
</html>
0 likes
14 replies
gych's avatar

Add your code to code blocks other wise its hard to read for us. Before the code you have to start with 3 backticks and at the end of the code close with 3 backticks.

What code do you have in your app.blade file and do you use vite?

gych's avatar

@thesecretjuggler Is this a new application that you are creating or are you installing vue with inertia to an existing application?

thesecretjuggler's avatar

@gych I have also set up a fresh laravel site with vue and inertia and theres no issue, it renders everything fine. So now wondering if there's something in my existing app that could be preventing vue and inertia from rendering.

gych's avatar

@thesecretjuggler Ok and did you also do he following:

  • install the HandleInertiaRequests middleware and add that middleware to Kernel
  • update webpack config in webpack.mix.js
thesecretjuggler's avatar

@gych Yes added the middleware and added mix.js('resources/js/app-vue.js', 'public/js').vue().version();. to webpack config When inspect my page i see this

<div id="app" data-page="{&quot;component&quot;:&quot;CrmIntegration\/Index&quot;,&quot;props&quot;:{&quot;errors&quot;:{},&quot;user&quot;:1},&quot;url&quot;:&quot;\/crm&quot;,&quot;version&quot;:&quot;9e1d4bc1955087825e06a60316d36722&quot;}"></div> - not sure if thats useful.

gych's avatar

@thesecretjuggler The value of data-page decoded is this:

{
  "component": "CrmIntegration/Index",
  "props": {
    "errors": {},
    "user": 1
  },
  "url": "/crm",
  "version": "9e1d4bc1955087825e06a60316d36722"
}

This means that the data for the page with url /crm is loaded and it should render this component: CrmIntegration/Index

But because you can't see the component, there is still an issue with the rendering of this component

gych's avatar

@thesecretjuggler You can add this console.log in createInertiaApp to check if it tries to resolve the correct page. The console log will be visible in your browser's console

createInertiaApp({
    resolve: (name) => {
        console.log('Resolving component:', name);
        return require(`./Pages/${name}.vue`);
    },
    setup({ el, App, props, plugin }) {
        createApp({ render: () => h(App, props) })
            .use(plugin)
            .mount(el);
    },
});
thesecretjuggler's avatar

@gych I have done the following - added the console.log to my app-vue.js file and have run npm run mix but not seeing anything in the console!

gych's avatar

@thesecretjuggler I advise you to check this tutorial: https://dev.to/geowrgetudor/setting-up-laravel-with-inertiajs-vuejs-tailwind-css-21pc

By following this you can see if you missed something while setting it up. You don't have to reinstall everything but just check to confirm if you have everything you need to get this running. Skip the tailwindcss part if you don't use tailwind.

Because there must have gone something wrong while setting this up, but its difficult to know what exactly because I don't know the exact steps you took with your setup.

I think there is also a video for this on Laracast but not sure if it uses vite or laravel mix.

Please or to participate in this conversation.