diff --git a/console-asset-compilation.md b/console-asset-compilation.md
index 93eb6065..9049274b 100644
--- a/console-asset-compilation.md
+++ b/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.
+
### 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.
+
+### 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
+
+
+ {{ title }}
+
+
+
+```
+
+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
+