immld's avatar
Level 1

Vue 3 Laravel 8 SSR

I'm trying to create a ssr project using Vue 3 and Laravel 8 with V8Js. I've followed some tutorials but all of them are using Vue 2 and vue-server-renderer but I can't get it work with Vue 3 and new version @vue/server-renderer.

so here is my code so far:

app.js:

import {createApp} from 'vue';
import App from './App.vue'

export function createVueApp(){
    return createApp(App)
}

client.js:

import { createVueApp } from "./app";
createVueApp().mount('#app')

server.js

import {createApp} from "vue";
const { createSSRApp } = require('vue')
const { renderToString } = require('@vue/server-renderer')

const app = createSSRApp(createApp)
const appContent = renderToString(app) // <= don't know what to do here...

AppController.php:

public function index()
    {
        $html = $this->render();

        return view('app', [
            "html" => $html
        ]);
    }

    public function render(){
        $renderer_source = \File::get(base_path('node_modules/vue/server-renderer/index.js'));
        // don't know what should I put here! There are only some index files in this folder and there is another folder named '@vue/server-renderer' which has a index.js and a dist folder with server-renderer.cjs.js files, I get error with each one of them...

        $app_source = \File::get(public_path('js/server.js'));

        $js = '
            var process = { env: { VUE_KEY: "server", NODE_ENV: "production" } };
            this.global = { process: process };
        ';

        $v8 = new V8Js();

        ob_start();

        $v8->executeString($js);
        $v8->executeString($renderer_source);
        $v8->executeString($app_source);

        return ob_get_clean();
    }

appreciate your help!

0 likes
0 replies

Please or to participate in this conversation.