Add vue component

.eslintrc.json

@@ -0,0 +1,16 @@
+{
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": "plugin:vue/essential",
+    "parserOptions": {
+        "ecmaVersion": 12,
+        "sourceType": "module"
+    },
+    "plugins": [
+        "vue"
+    ],
+    "rules": {
+    }
+}

assets/css/app.css

@@ -1,5 +1,4 @@
 :root {
-    --bg-color: hsl(0.0, 0.0%, 90.2%);
     --primary: hsl(82.3, 54.4%, 44.7%);
     --secondary: hsl(194.5, 100.0%, 26.9%);
     --gray: hsl(37.5, 25.0%, 93.7%);
@@ -41,7 +40,6 @@
 
     form {
         font-family: sans-serif;
-        background: var(--bg-color);
         & > div {
             h2 {
                 color: var(--secondary);

assets/js/Stepper.vue

@@ -0,0 +1,11 @@
+<template>
+    <div>
+        aaa
+    </div>
+</template>
+
+<script>
+export default {
+    
+};
+</script>

assets/js/app.js

@@ -1,6 +1,14 @@
 import axios from 'axios';
-import 'alpinejs';
 import wNumb from 'wnumb';
+import Vue from 'vue';
+import Stepper from './Stepper.vue';
+
+const app = new Vue({
+    components: {
+        Stepper
+    },
+});
+app.$mount(document.getElementById('stepper-main'));
 
 var units = window.units = {
     currency: wNumb({

composer.json

@@ -4,7 +4,8 @@
         "symfony/var-dumper": "^5.1",
         "illuminate/support": "^8.12",
         "illuminate/validation": "^8.48",
-        "vlucas/phpdotenv": "^5.3"
+        "vlucas/phpdotenv": "^5.3",
+        "twig/twig": "^3.3"
     },
     "authors": [
         {

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "72d6c961eb022b8f7a892d4948731f61",
+    "content-hash": "daa339a17e3a1f0370898f194e443cf8",
     "packages": [
         {
             "name": "doctrine/inflector",
@@ -1958,6 +1958,82 @@
             ],
             "time": "2020-10-27T10:11:13+00:00"
         },
+        {
+            "name": "twig/twig",
+            "version": "v3.3.3",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/twigphp/Twig.git",
+                "reference": "a27fa056df8a6384316288ca8b0fa3a35fdeb569"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/twigphp/Twig/zipball/a27fa056df8a6384316288ca8b0fa3a35fdeb569",
+                "reference": "a27fa056df8a6384316288ca8b0fa3a35fdeb569",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=7.2.5",
+                "symfony/polyfill-ctype": "^1.8",
+                "symfony/polyfill-mbstring": "^1.3"
+            },
+            "require-dev": {
+                "psr/container": "^1.0",
+                "symfony/phpunit-bridge": "^4.4.9|^5.0.9|^6.0"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "3.3-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Twig\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "BSD-3-Clause"
+            ],
+            "authors": [
+                {
+                    "name": "Fabien Potencier",
+                    "email": "fabien@symfony.com",
+                    "homepage": "http://fabien.potencier.org",
+                    "role": "Lead Developer"
+                },
+                {
+                    "name": "Twig Team",
+                    "role": "Contributors"
+                },
+                {
+                    "name": "Armin Ronacher",
+                    "email": "armin.ronacher@active-4.com",
+                    "role": "Project Founder"
+                }
+            ],
+            "description": "Twig, the flexible, fast, and secure template language for PHP",
+            "homepage": "https://twig.symfony.com",
+            "keywords": [
+                "templating"
+            ],
+            "support": {
+                "issues": "https://github.com/twigphp/Twig/issues",
+                "source": "https://github.com/twigphp/Twig/tree/v3.3.3"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/twig/twig",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2021-09-17T08:44:23+00:00"
+        },
         {
             "name": "vlucas/phpdotenv",
             "version": "v5.3.0",

package.json

@@ -19,12 +19,18 @@
     "alpinejs": "^2.7.3",
     "axios": "^0.21.0",
     "cross-env": "^7.0.3",
-    "laravel-mix": "^5.0.7",
+    "laravel-mix": "^6.0.7",
+    "postcss-import": "^14.0.2",
     "postcss-nested": "^4.0",
+    "tailwindcss": "^2.2.16",
+    "vue": "^2.6.14",
     "wnumb": "^1.2.0"
   },
   "devDependencies": {
+    "eslint": "^7.32.0",
+    "eslint-plugin-vue": "^7.19.1",
     "postcss-css-variables": "^0.17.0",
+    "vue-loader": "^15.9.8",
     "vue-template-compiler": "^2.6.12"
   }
 }

src/Stepper.php

@@ -45,7 +45,7 @@ class Stepper {
     }
 
     public function enqueue() {
-        wp_enqueue_script('stepper-js', $this->url.'assets/public/app.js');
+        wp_enqueue_script('stepper-js', $this->url.'assets/public/app.js', [], false, true);
         wp_enqueue_style('stepper-css', $this->url.'assets/public/app.css');
     }
 

tailwind.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  purge: [],
+  darkMode: false, // or 'media' or 'class'
+  theme: {
+    extend: {},
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [],
+}

views/stepper.twig.htm

@@ -1,4 +1,8 @@
-<div id="stepper-main" class="stepper"
+<div id="stepper-main" class="stepper">
+    <stepper></stepper>
+</div>
+
+<!--
      x-data="{ ...stepper, step: {{data.step}}, value: { ...stepper.value, kind: '{{data.kind}}', {% if data.kind %} {{data.kind}}: { ...stepper.value.{{data.kind}}, eigenkapital: {{data.eigenk}}, kaufpreis: {{data.kaufpreis}} }  {% endif %} }, sprite: '{{sprite|raw}}' }"
      {% if data.step == 1 %} x-init="slideTo(null, {{data.step}})" {% endif %}>
 
@@ -103,3 +107,4 @@
 
     </form>
 </div>
+-->

webpack.mix.js

@@ -1,18 +1,20 @@
 let mix = require('laravel-mix');
+let tailwindcss = require('tailwindcss');
+let atImport = require("postcss-import");
+let nested = require("postcss-nested");
 
-/*
- |--------------------------------------------------------------------------
- | Mix Asset Management
- |--------------------------------------------------------------------------
- |
- | Mix provides a clean, fluent API for defining some Webpack build steps
- | for your Laravel application. By default, we are compiling the Sass
- | file for your application, as well as bundling up your JS files.
- |
- */
+if (mix.inProduction()) {
+    mix.version();
+} else {
+    mix.sourceMaps();
+}
+
+mix.setPublicPath('assets/public');
+mix.setResourceRoot('/wp-content/plugins/stepper/assets/public/');
+
+mix.postCss('assets/css/app.css', 'app.css', [
+        atImport(),
+        nested,
+        tailwindcss('./tailwind.config.js'),
+]).js('assets/js/app.js', 'app.js').vue({ version: 2 });
 
-mix.js('assets/js/app.js', 'assets/public/app.js')
-    .postCss('assets/css/app.css', 'assets/public/app.css', [
-        require('postcss-nested'),
-        require('postcss-css-variables')
-    ]);