Add Vue example

.gitignore

@@ -13,3 +13,9 @@ nbproject
 
 # Other ignores
 .DS_Store
+
+# Node ignores
+node_modules
+
+# Assets ignores
+assets/js/*

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'),
+                    ],
                 ],
             ],
         ];

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')

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>

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() 
+    {
+    }
+}

controllers/vue/index.htm

@@ -0,0 +1,6 @@
+<div id="app">
+  <welcome/>
+</div>
+
+<script src="/plugins/winter/test/assets/js/app.js"></script>
+

package.json

@@ -0,0 +1,8 @@
+{
+    "dependencies": {
+        "vue": "^3.2.41"
+    },
+    "devDependencies": {
+        "vue-loader": "^16.8.3"
+    }
+}

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',
+    });
+    */