From 4ab6760ae88cc8f336c065e3edc805cde5df66ec Mon Sep 17 00:00:00 2001
From: Gabor Horn <gabor@h3online.hu>
Date: Sun, 6 Nov 2022 11:51:13 +0100
Subject: [PATCH] Add Vue example

---
 .gitignore                           |  6 ++++++
 Plugin.php                           |  5 +++++
 assets/src/js/app.js                 |  8 ++++++++
 assets/src/js/components/Welcome.vue | 11 +++++++++++
 controllers/Vue.php                  | 22 ++++++++++++++++++++++
 controllers/vue/index.htm            |  6 ++++++
 package.json                         |  8 ++++++++
 winter.mix.js                        | 14 ++++++++++++++
 8 files changed, 80 insertions(+)
 create mode 100644 assets/src/js/app.js
 create mode 100644 assets/src/js/components/Welcome.vue
 create mode 100644 controllers/Vue.php
 create mode 100644 controllers/vue/index.htm
 create mode 100644 package.json
 create mode 100644 winter.mix.js

diff --git a/.gitignore b/.gitignore
index e29f175..ca09d31 100644
--- a/.gitignore
+++ b/.gitignore
@@ -13,3 +13,9 @@ nbproject
 
 # Other ignores
 .DS_Store
+
+# Node ignores
+node_modules
+
+# Assets ignores
+assets/js/*
diff --git a/Plugin.php b/Plugin.php
index 5223da5..664f5f0 100644
--- a/Plugin.php
+++ b/Plugin.php
@@ -99,6 +99,11 @@ public function registerNavigation()
                         'icon'  => 'icon-database',
                         'url'   => Backend::url('winter/test/locations'),
                     ],
+                    'vue' => [
+                        'label' => 'Vue',
+                        'icon'  => 'icon-cube',
+                        'url'   => Backend::url('winter/test/vue'),
+                    ],
                 ],
             ],
         ];
diff --git a/assets/src/js/app.js b/assets/src/js/app.js
new file mode 100644
index 0000000..3b06ca2
--- /dev/null
+++ b/assets/src/js/app.js
@@ -0,0 +1,8 @@
+import { createApp } from 'vue'
+import Welcome from './components/Welcome'
+
+const app = createApp({})
+
+app.component('welcome', Welcome)
+
+app.mount('#app')
diff --git a/assets/src/js/components/Welcome.vue b/assets/src/js/components/Welcome.vue
new file mode 100644
index 0000000..912e3ea
--- /dev/null
+++ b/assets/src/js/components/Welcome.vue
@@ -0,0 +1,11 @@
+<template>
+    <h1>{{ title }}</h1>
+</template>
+<script>
+
+export default {
+    setup: () => ({
+        title: 'Vue 3 in Laravel'
+    })
+}
+</script>
\ No newline at end of file
diff --git a/controllers/Vue.php b/controllers/Vue.php
new file mode 100644
index 0000000..99ea917
--- /dev/null
+++ b/controllers/Vue.php
@@ -0,0 +1,22 @@
+<?php namespace Winter\Test\Controllers;
+
+use BackendMenu;
+use Backend\Classes\Controller;
+
+/**
+ * Vue Back-end Controller
+ */
+class Vue extends Controller
+{
+
+    public function __construct()
+    {
+        parent::__construct();
+
+        BackendMenu::setContext('Winter.Test', 'test', 'vue');
+    }
+
+    public function index() 
+    {
+    }
+}
diff --git a/controllers/vue/index.htm b/controllers/vue/index.htm
new file mode 100644
index 0000000..a67d62a
--- /dev/null
+++ b/controllers/vue/index.htm
@@ -0,0 +1,6 @@
+<div id="app">
+  <welcome/>
+</div>
+
+<script src="/plugins/winter/test/assets/js/app.js"></script>
+
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..d9ab54f
--- /dev/null
+++ b/package.json
@@ -0,0 +1,8 @@
+{
+    "dependencies": {
+        "vue": "^3.2.41"
+    },
+    "devDependencies": {
+        "vue-loader": "^16.8.3"
+    }
+}
diff --git a/winter.mix.js b/winter.mix.js
new file mode 100644
index 0000000..f70112a
--- /dev/null
+++ b/winter.mix.js
@@ -0,0 +1,14 @@
+const mix = require('laravel-mix');
+
+mix
+    // compile javascript assets for plugin
+    .js('assets/src/js/app.js', 'assets/js').vue({ version: 3 })
+
+    /*
+    // Polyfill for all targeted browsers
+    .polyfill({
+        enabled: mix.inProduction(),
+        useBuiltIns: 'usage',
+        targets: '> 0.5%, last 2 versions, not dead, Firefox ESR, not ie > 0',
+    });
+    */