Dec 29, 2021
0
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!
Please or to participate in this conversation.