From ae6cfb08039072d7820661a8548d340bc1c6acb3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=A1bor=20Horn?= Date: Sun, 30 Oct 2022 22:18:39 +0100 Subject: [PATCH 01/10] Add an example of using Vue in the backend --- console-asset-compilation.md | 61 +++++++++++++++++++++++++++++++++++- 1 file changed, 60 insertions(+), 1 deletion(-) diff --git a/console-asset-compilation.md b/console-asset-compilation.md index 93eb6065..eb6fef2e 100644 --- a/console-asset-compilation.md +++ b/console-asset-compilation.md @@ -149,6 +149,65 @@ 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 in a backend controller + +If you want to use Vue 3 in your plugin for backend controllers, you can follow these steps. + +```bash +# Inside the project root folder +npm install --save vue@latest && npm install --save-dev vue-loader@latest +``` + +Then, add a `winter.mix.js` configuration file to your plugin directory: + +```js +const mix = require('laravel-mix'); +mix + // compile javascript assets for plugin + .js('src/app.js', 'assets/js').vue({ version: 3 }) +``` + +Next you can create your Vue source files in your plugin's src/ directory: + +```js +// src/app.js + +import { createApp } from 'vue' +import Welcome from './components/Welcome' + +const app = createApp({}) + +app.component('welcome', Welcome) + +app.mount('#app') +``` + +```js +// src/components/Welcome.vue + + + +``` +Now if you comple your assets in the project root with `mix:compile` then mix will create the file in your plugin under assets/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 inclue this generated app.js, and render the content in the div#app: + +``` +
+ +
+ + +``` + ## Commands @@ -245,4 +304,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. \ No newline at end of file +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. From 8a2748662619f8ceefc6bf996e830ffc05308c87 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=A1bor=20Horn?= Date: Tue, 1 Nov 2022 15:19:35 +0100 Subject: [PATCH 02/10] Update console-asset-compilation.md Change JS source paths, move them to plugin's assets/ directory. --- console-asset-compilation.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/console-asset-compilation.md b/console-asset-compilation.md index eb6fef2e..6ee7be6b 100644 --- a/console-asset-compilation.md +++ b/console-asset-compilation.md @@ -164,13 +164,13 @@ Then, add a `winter.mix.js` configuration file to your plugin directory: const mix = require('laravel-mix'); mix // compile javascript assets for plugin - .js('src/app.js', 'assets/js').vue({ version: 3 }) + .js('assets/src/js/app.js', 'assets/js').vue({ version: 3 }) ``` -Next you can create your Vue source files in your plugin's src/ directory: +Next you can create your Vue source files in your plugin's assets/src/js/ directory: ```js -// src/app.js +// assets/src/js/app.js import { createApp } from 'vue' import Welcome from './components/Welcome' @@ -183,7 +183,7 @@ app.mount('#app') ``` ```js -// src/components/Welcome.vue +// assets/src/js/components/Welcome.vue