Laravel SSR Vue config for Vite, ssr.js file?

Question

How can I make SSR to work for my Laravel project with Vite?

export default defineConfig({
    plugins: [
        laravel({
            input: ["resources/css/app.css", "resources/js/app.js"],
            ssr: "resources/js/ssr.js",
            refresh: true,
        }),

But what should be the content of the ssr.js file?

This is the content of my js-file:

import { createApp, markRaw } from "vue";
import router from "./router";
// Route is file with the Routes:
// import {
//   createRouter,
//   createWebHashHistory,
// } from "vue-router";

import { createPinia } from "pinia";

import App from "./screens/App.vue";

import ResizeTextarea from "resize-textarea-vue3";
import { useAuthStore } from "@/store/auth";

const pinia = createPinia();

pinia.use(({ store }) => {
    store.$router = markRaw(router);
});

const app = createApp(App);
app.use(pinia);
app.use(router);
app.use(ResizeTextarea);

app.mount("#app");


import Pusher from "pusher-js";
window.Pusher = Pusher;

Cannot find anywhere in the docs how i can fix it.

It is a VUE3 project and not inertia.

score -1 · Answer 1 · answered Apr 04 '23 at 09:06

Here is a shot and I am not sure if you need it considering it sounds like it can work without. however, here is an example documented by Vuejs themselves, https://vuejs.org/guide/scaling-up/ssr.html#custom-directives

// app.js (shared between server and client)
import { createSSRApp } from 'vue'
import { createStore } from './store.js'

// called on each request
export function createApp() {
  const app = createSSRApp(/* ... */)
  // create new instance of store per request
  const store = createStore(/* ... */)
  // provide store at the app level
  app.provide('store', store)
  // also expose store for hydration purposes
  return { app, store }
}

You could also look at pina's (vue created store) https://pinia.vuejs.org/ssr/ which maybe more relative to your example

import devalue from '@nuxt/devalue'

export default viteSSR(
  App,
  {
    routes,
    transformState(state) {
      return import.meta.env.SSR ? devalue(state) : state
    },
  },
  ({ initialState }) => {
    // ...
    if (import.meta.env.SSR) {
      // this will be stringified and set to window.__INITIAL_STATE__
      initialState.pinia = pinia.state.value
    } else {
      // on the client side, we restore the state
      pinia.state.value = initialState.pinia
    }
  }
)

I believe those two to both be valid however I do not know your use case.

Laravel SSR Vue config for Vite, ssr.js file?

1 Answers1