Add an example of using Vue in the backend

console-asset-compilation.md

@@ -8,6 +8,8 @@
     - [Registering theme packages](#registering-themes)
 - [Mix configuration](#mix-configuration)
 - [Examples](#examples)
+    - [Tailwind CSS](#examples-tailwind)
+    - [Vue JS](#examples-vue)
 - [Commands](#commands)
     - [Install Node dependencies](#mix-install)
     - [Update Node dependencies](#mix-update)
@@ -118,6 +120,7 @@ When the `winter.mix.js` file is evaluated, regardless of where you ran `mix:com
 
 Here are some examples of installing common frontend libraries for use with the asset compilation.
 
+<a name="examples-tailwind"></a>
 ### Tailwind CSS
 
 For themes that wish to use Tailwind CSS, include the `tailwindcss`, `postcss` and `autoprefixer` dependencies in your `package.json` file.
@@ -149,6 +152,75 @@ In the example above, we have a base CSS file that contains the Tailwind styling
 
 Your theme will now be ready for Tailwind CSS development.
 
+<a name="examples-vue"></a>
+### Vue in a backend controller
+
+If you want to use Vue 3 in your plugin for backend controllers, you can follow these steps.
+
+First, define Vue as a dependency in your plugin's `package.json`:
+
+```
+    "name": "myauthor-myplugin",
+    "private": true,
+    "version": "1.0.0",
+    "dependencies": {
+        "vue": "^3.2.41"
+    }
+```
+
+Then, add a `winter.mix.js` configuration file to your plugin directory:
+
+```js
+const mix = require('laravel-mix');
+mix.setPublicPath(__dirname);
+mix
+    // compile javascript assets for plugin
+    .js('assets/src/js/myplugin.js', 'assets/dist/js').vue({ version: 3 })
+```
+
+Next you can create your Vue source files in your plugin's assets/src/js/ directory:
+
+```js
+// assets/src/js/myplugin.js
+
+import { createApp } from 'vue'
+import Welcome from './components/Welcome'
+
+const myPlugin = createApp({})
+
+myPlugin.component('welcome', Welcome)
+
+myPlugin.mount('[data-vue-app="myPlugin"]')
+```
+
+```js
+// assets/src/js/components/Welcome.vue
+
+<template>
+    <h1>{{ title }}</h1>
+</template>
+<script>
+export default {
+    setup: () => ({
+        title: 'Vue 3 in Laravel'
+    })
+}
+</script>
+```
+Then install the NodeJS packages needed for your plugin in your plugin directory with the command `php artisan mix:install -p <my plugin>`.
+
+Now if you comple your assets in the project root with `mix:compile` then mix will create the file in your plugin under `assets/dist/js/app.js` which includes Vue and all other packages that you use in your components.
+
+Next in the your controller's template file (eg. controllers/myvuecontroller/index.php) you can include the generated `myplugin.js` file, and render the content in the div with the `data-vue-app="myPlugin"` attribute:
+
+```
+<div id="app">
+  <welcome/>
+</div>
+
+<script src="/plugins/foo/bar/assets/dist/js/app.js"></script>
+```
+
 <a name="commands"></a>
 ## Commands
 
@@ -245,4 +317,4 @@ This can be useful for running arbitrary scripts that augment the capabilities o
 
 By default, all package scripts are run in "development" mode. If you wish to run a script in "production" mode, add the `-f` or `--production` flag to the command.
 
-If you wish to pass extra arguments or options to your script, you can add `--` to the end of the command. Any arguments or options added after the `--` argument are interpreted as arguments and options to be sent to the script itself.
+If you wish to pass extra arguments or options to your script, you can add `--` to the end of the command. Any arguments or options added after the `--` argument are interpreted as arguments and options to be sent to the script itself.