PHP-View to vue.js

Backend

• find the correct PHP-folder in the src/Modules.
• find the view-controller

Frontend

• create a component folder and files in client/src/components/
• or create a page folder and file in client/src/components/
• to register the component or page and create a JavaScript-file in the PHP-folder

Example, Dashboard.

It is required to place a page loader javascript in src/Modules based on the webpack-configuration.

import { vueRegister, vueApply } from '@/vue'

// View: {Component}
import '@/views/pages/Dashboard/Dashboard.scss'
import Dashboard from '@/views/pages/Dashboard/Dashboard.vue'

vueRegister({
  Dashboard,
})
vueApply('#dashboard')

When replacing a complete page, you could add the page to the base.twig#L63. Which gives you more control over the page because the else uses an old grid, which won't stop using.

{% if route in 'dashboard,index,content'|split(',') %}

Maybe you need to extend shame-old-style-corrections.scss#L1-4. To remove the margin.

Hard part

• Find the code position, where HTML is in use.
• Extract the used variables

Some examples

return $this->twig->render('pages/FoodSharePoint/foodSharePointTop.html.twig', [
	'food_share_point' => $this->foodSharePoint,
]);

public function checkFoodSharePoint(array $foodSharePoint): string
	{
		$htmlEscapedName = htmlspecialchars($foodSharePoint['name']);
		$content = '';
		if ($foodSharePoint['pic']) {
			$content .= $this->v_utils->v_input_wrapper($this->translator->trans('fsp.pic'),
				'<img src="' . $foodSharePoint['pic']['head'] . '" alt="' . $htmlEscapedName . '" />'
			);
		}

		$content .= $this->v_utils->v_input_wrapper($this->translator->trans('fsp.address'),
			$foodSharePoint['anschrift']
			. '<br />'
			. $foodSharePoint['plz'] . ' ' . $foodSharePoint['ort']
		);

		$content .= $this->v_utils->v_input_wrapper($this->translator->trans('fsp.description'),
			$this->sanitizerService->markdownToHtml($foodSharePoint['desc'])
		);

		$content .= $this->v_utils->v_input_wrapper($this->translator->trans('fsp.addedOn'),
			date('d.m.Y', $foodSharePoint['time_ts'])
		);

		$fsName = $foodSharePoint['fs_name'] . ' ' . $foodSharePoint['fs_nachname'];
		$content .= $this->v_utils->v_input_wrapper($this->translator->trans('fsp.addedBy'),
			'<a href="/profile/' . (int)$foodSharePoint['fs_id'] . '">' . $fsName . '</a>'
		);

		return $this->v_utils->v_field(
			$content,
			$this->translator->trans('fsp.acceptName', ['{name}' => $foodSharePoint['name']]),
			['class' => 'ui-padding']
		);
	}

public function joininfo(): string
	{
		return '
		<div class="page-container page-joininfo">
			<h1> ' . $this->translator->trans('startpage.join_rules') . ' </h1>
			<h3> ' . $this->translator->trans('startpage.join_welcome') . ' </h3>
			<p> ' . $this->translator->trans('startpage.respect') . ' <br><b>' . $this->translator->trans('startpage.register') . '</b></p>
			<h3> ' . $this->translator->trans('startpage.forstores') . ' </h3>
			<p> ' . $this->translator->trans('startpage.together') . ' </p>'
// the paragraph invites to foodsharing - both individuals and stores
			. $this->v_utils->v_field('
			<div class="reddot">
			<h5><span>1</span>  ' . $this->translator->trans('startpage.honest') . '</h5>
			<p> ' . $this->translator->trans('startpage.telltruth') . '</p>
			<h5><span>2</span>  ' . $this->translator->trans('startpage.followrules_a') . '</h5>
			<p> ' . $this->translator->trans('startpage.followrules_b') . ' ' . $this->translator->trans('startpage.followrules_c') . '</p>
			<p> ' . $this->translator->trans('startpage.notallowed') . '</p>'
// the paragraph states do`s and don`t`s for foodsharing, the next ones talk about how one should interact in the community
			. '<h5><span>3</span> ' . $this->translator->trans('startpage.beresponsible') . '</h5>
			<p>30<span style="white-space:nowrap">&thinsp;</span>% ' . $this->translator->trans('startpage.responsibility') . '</p>
			<h5><span>4</span> ' . $this->translator->trans('startpage.bedependable') . '</h5>
			<p>' . $this->translator->trans('startpage.dependability') . '</p>
			<h5><span>5</span> ' . $this->translator->trans('startpage.makeproposals') . '</h5>
			<p>' . $this->translator->trans('startpage.proposals') . '</p>
			</div>', $this->translator->trans('startpage.etiquette'), ['class' => 'ui-padding']) . '
			<p class="buttons"><br><a href="/?page=register" style="font-size:180%;" class="button">' . $this->translator->trans('startpage.registernow') . '</a><br></p>
		</div>
		';
	}

Showing the Vue-Component

When you found the correct PHP-view file, you can register the Vue-component in it.

$this->vueComponent('component-id', 'component-name', $params)

Example, DashboardView.php

public function index($params): string
{
	return $this->vueComponent('dashboard', 'dashboard', $params);
}

And call it in DashboardController.php where the $params is filled with information.

	...
	$this->pageHelper->addContent($this->view->index($this->params));
}

VUE

In the Vue-components, add some props where you need and define in PHP.

Example, Dashboard.vue

 props: {
    broadcast: { type: Object, default: () => null },
    quiz: { type: Object, default: () => null },
    errors: { type: Array, default: () => null },
    events: { type: Object, default: () => ({ accepted: null, invites: null }) },
  },