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

p3drojimenez's avatar

Problem with Inertia SSR + Vuejs + Laravel Forge Deployment

Hi guys! This is my first message and I come to you looking for some light.

I recently started a project with laravel inertia and vuejs. The product is a marketplace or directory where the search engine part has indexed pages and then a profile part to configure and modify all the information shown in the marketplace. This service also has a subscription using Laravel SPARK (which I have problems to validate the account with Paddle, but that's another book I don't want to open yet haha).

The problem comes when I deployed the application using forge and configuring it according to the Inertia guide, it is not completely SSR, I don't know why, but it doesn't look like it looks for example in the same example web. In fact, the Chrome dev tools recognizes the vuejs components... I must be doing something wrong.

The ssr looks like: ssr.js

import { createSSRApp, h } from 'vue'
import { renderToString } from '@vue/server-renderer'
import { createInertiaApp } from '@inertiajs/inertia-vue3'
import createServer from '@inertiajs/server'

createServer((page) => createInertiaApp({
    page,
    render: renderToString,
    resolve: name => require(`./features/${name}`),
    setup({ app, props, plugin }) {
        return createSSRApp({
            render: () => h(app, props),
        }).use(plugin)
    },
}))

app.js

require('./bootstrap');
import { createApp, h } from 'vue'
import { InertiaProgress } from '@inertiajs/progress'
import { createInertiaApp, Link } from '@inertiajs/inertia-vue3'
import { createI18n } from "vue-i18n"
import { i18Config } from '@/plugins/i18n'
import emitter from '@/plugins/emitter'

import 'flowbite';

import VCalendar from 'v-calendar';

import VueMixpanel from 'vue-mixpanel'
import { vfmPlugin } from 'vue-final-modal'

import Toaster from "@meforma/vue-toaster";


const toastConfig = {
    position: "top-right",
    duration: 1955,
}

createInertiaApp({
    resolve: name => require(`./features/${name}`),
    title: title => title ? `${title}',
    setup({ el, App, props, plugin }) {

        const i18n = createI18n(i18Config);

        createApp({ render: () => h(App, props) })
            .mixin({ methods: { route: window.route } })
            .use(plugin)
            .use(i18n)
            .use(emitter)
            .use(Toaster, toastConfig)
            .use(VueMixpanel, {
                token: 'xx',
                config: {
                    debug: true
                }
            })
            .use(VCalendar, {})
            .use(vfmPlugin)
            .component('Link', Link)
            .mount(el)
    },
})

webpack.ssr.min.js

const path = require('path')
const mix = require('laravel-mix')
const cssImport = require('postcss-import')
const cssNesting = require('postcss-nesting')
const webpackNodeExternals = require('webpack-node-externals')
const webpackConfig = require('./webpack.config')

mix
    .options({ manifest: false })
    .js('resources/js/ssr.js', 'public/js')
    .vue({ version: 3, options: { optimizeSSR: true } })
    .webpackConfig(webpackConfig)
    .postCss('resources/css/app.css', 'public/css', [
        cssImport(),
        cssNesting(),
        require('tailwindcss'),
    ])
    .webpackConfig({
        target: 'node',
        externals: [webpackNodeExternals()],
    })

Regarding the daemon (mencioned in the documentation), event i think is good configured, it doesnt work, but i dont now it this is the problem at all.

Another thing that is failing is the command:

 mix --production && mix --production --mix-config=webpack.ssr.mix.js

it Is returing a time out issue

Any of you have been working with inertia + vuejs + laravel forge in a ssr mode?

Thanks a lot

0 likes
0 replies

Please or to participate in this conversation.