Add an example of using Vue in a plugin (#102)

Co-authored-by: Luke Towers <github@luketowers.ca>
Co-authored-by: Ben Thomson <git@alfreido.com>

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,77 @@ 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
+
+If you want to use [Vue 3](https://vuejs.org/) in your project, either in the backend or in a component or theme, 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"
+    }
+```
+
+Run `php artisan mix:install` to install Vue and the dependencies that Vue requires.
+
+Then, add a `winter.mix.js` configuration file to your plugin directory. This will build a specific entry point file, in this case `assets/src/js/myplugin.js` and create a built version of your Vue app as `assets/dist/js/myplugin.js`.
+
+```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 directory. Mix supports rendering of [single-file components](https://vuejs.org/guide/scaling-up/sfc.html), allowing you to define the template, scripting and styling all in one file.
+
+```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>
+```
+
+Now if you comple your assets in the project root with `php artisan mix:compile`, Mix will create your compiled and built Vue component as a JS file.
+
+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:
+
+```html
+<div data-vue-app="myPlugin">
+  <welcome/>
+</div>
+
+<script src="/plugins/foo/bar/assets/dist/js/myplugin.js"></script>
+```
+
 <a name="commands"></a>
 ## Commands
 
@@ -245,4 +319,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.