How to enable SSR for components defined in resources/js folder

[kamal-chagam]

i followed the following steps but no luck.

custom component resource/js/Custom.vue

<template
     <h1> this is cusotme component </h1>
</template>

import in app.js

import Custom from  './Custom.vue')
const app = createApp({
                render: renderSpladeApp({ el })
            })
            .use(SpladePlugin, {
                "max_keep_alive": 10,
                "transform_anchors": false,
            })

app.component('Custom', Custom)

app.mount('#app')

usage in blade file

 <div>
      <Custom />
</div>

Custom component gets rendered but not ssred

[pascalbaljet]

You must also add import Custom from './Custom.vue' and app.component('Custom', Custom) to ssr.js.

[kamal-chagam]

thank @pascalbaljet for that quick response.

Don't have much experience with SSR . tried in 2 ways but still no luck

method 1

    import Custom from './Custom.vue'

    const app = renderSpladeApp(props)
    app.component('Custom', Custom)
    return createSSRApp({
        render: app
    })
    .use(SpladePlugin);
});

method 2

startServer(createServer, renderToString, (props) => {
    return createSSRApp({
        render: renderSpladeApp(props)
    })
    .component('Custom', Custom)
    .use(SpladePlugin);
});

how to fix this?

[pascalbaljet]

The second one is the right direction. Does it also include import Custom from './Custom.vue'? Do you get any errors you can share?

[kamal-chagam]

yes that's imported , check this

no errors too

[pascalbaljet]

It's been a while, but I finally figured out the problem. Custom Vue components with a template tag break when the SSR app uses the Vue esm-bundler. By default, Splade uses that esm-bundler as it's configured in the vite.config.js file. The solution is to remove it there, and move it to the main app.js file, but not to the ssr.js file 😅

So, in vite.config.js, remove this section:

resolve: {
    alias: {
        vue: "vue/dist/vue.esm-bundler.js"
    }
}

And bring it to app.js:

- import { createApp } from "vue";
+ import { createApp } from "vue/dist/vue.esm-bundler.js";

Here's the commit that changes the stubs: https://github.com/protonemedia/laravel-splade/pull/123/commits/1cbca78e8fabd4992adfce4883810800b5eb6e6b