Merge branch 'main' into vagrant-workers

Author: bmcutler

Diff for: _docs/developer/developing_the_php_site/view.md

@@ -11,7 +11,7 @@ pattern.
 The [Controller](controller) will call the view.  Let's have a look at
 an example `UserView.php`. It might have a function in it like this:
 
-```PHP
+```php
 public function showUserDetails(UserModel $user) {
   $this->core->getOutput()->addInternalJs('user-details.js');
   $this->core->getOutput()->addInternalCss('user-details.css');
@@ -53,4 +53,45 @@ Finally, let's look at `UserDetails.twig`
 ```
 
 In this page, we use `user_id` and `favorite_color` to render information
-about the student.
+about the student.
+
+## Another option: Rendering with Vue
+
+Alternatively, instead of using Twig, we can use [Vue](https://vuejs.org/) instead.
+
+To do this, first make a Vue page in `site/vue/src/pages` (for example, `site/vue/src/pages/UserDetails.vue`): 
+```html
+<script setup lang='ts'>
+  import { inject } from 'vue';
+
+  const userId = inject<string>('user_id') ?? '<no user provided>';
+  const favoriteColor = inject<string>('favorite_color') ?? '<no color provided>';
+</script>
+
+<template>
+  <div class="content">
+    {% raw %}{{ userId }}'s favorite color is {{ favoriteColor }}.{% endraw %}
+  </div>
+</template>
+```
+
+
+To actually render this page, we will then need to use the `renderVue` function in our View (ex. `UserView.php`).
+
+The first paramater of the `renderVue` takes the name of the page (the name of the `.vue` file minus the extension, in this case `UserDetails`), and the second parameter is the same as in `renderTwig`, an associative array of variables that are passed to the Vue page.
+
+If we wanted our `UserView.php` example to render with Vue, it would have a function that might look like this:
+
+```php
+public function showUserDetails(UserModel $user) {
+  return $this->core->getOutput()->renderVue(
+    'UserDetails',
+      [
+        'user_id' => $user->getUserId(),
+        'favorite_color' => $user->getFavoriteColor()
+      ]
+  );
+}
+```
+
+To access the variables passed by the `renderVue` function in Vue, use [`inject`](https://vuejs.org/api/composition-api-dependency-injection.html#inject). The injection keys will be the same as the keys in the provided array. If the key provided to `inject` is not in the array passed to `renderVue`, it will return `undefined`.