Как отрендерить на бэкенде vue компонент с пропсами?

Question

[Ilya Bobkov]

Доброго времени суток!
Возник вопрос по рендерингу vue компонента на бэкенде.
Имеется vue компонент с пропсами который должен отображать список входящих данных с бэкенда:

<template>
<div v-for="(item,index) in items :key=index">
 {{ item }}
</div>
</template>
<script>
export default {
  props: ["items"] // входящие данные с бэкенда
}
</script>

Есть серверная часть на PHP (Laravel):

private function render() {
	$renderer_source = File::get(base_path('node_modules/vue-server-renderer/basic.js'));
	$app_source = File::get(public_path('js/mycomponent.js'));
	$v8 = new \V8Js();
	ob_start();

  $js= 'var process = { env: { VUE_ENV: "server", NODE_ENV: "production" } };  this.global = { 
 process: process };';
 
$v8->executeString($js);
 $v8->executeString($renderer_source);

$code="

var propsData=["1", "2", "3"];

// Не понятно как передать массив propsData в компонент 
renderVueComponentToString(??? propsData ???, (err, html) => {
    	print(html)
 })";"

$v8->executeString($code);

return view('index', ['ssr' => ob_get_clean()]); // передаю данные на фронт
}

Comments

[Дмитрий]

Что это за дичь? И почему нельзя вывести компонент во вьюхе?

Answer 1

[Alex Wells]

Зачем рендерить на пхп? Подними ноду, напиши там ССР сервак и пусть дергает твой бекенд сколько угодно. v8 в пхп это какая-то дичь.

Answer 2

[Александр Аксентьев]

Вы сначала создайте что рендерить-то будете, а то какая-то каша из копипасты разных строк.

https://ssr.vuejs.org/guide/non-node.html