Thymeleaf + Vue application

spring-boot/thymeleaf-vue/.gitignore

@@ -0,0 +1,33 @@
+HELP.md
+.gradle
+build/
+!gradle/wrapper/gradle-wrapper.jar
+!**/src/main/**
+!**/src/test/**
+
+### STS ###
+.apt_generated
+.classpath
+.factorypath
+.project
+.settings
+.springBeans
+.sts4-cache
+
+### IntelliJ IDEA ###
+.idea
+*.iws
+*.iml
+*.ipr
+out/
+
+### NetBeans ###
+/nbproject/private/
+/nbbuild/
+/dist/
+/nbdist/
+/.nb-gradle/
+
+### VS Code ###
+.vscode/
+/server/src/main/resources/static/js/vue-components/

spring-boot/thymeleaf-vue/client/.gitignore

@@ -0,0 +1,25 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+/coverage/
+/.storybook/
+/build/

spring-boot/thymeleaf-vue/client/README.md

@@ -0,0 +1,24 @@
+# client
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Lints and fixes files
+```
+npm run lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

spring-boot/thymeleaf-vue/client/babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

spring-boot/thymeleaf-vue/client/build.gradle

@@ -0,0 +1,9 @@
+plugins {
+	id "com.github.node-gradle.node" version "2.2.4"
+}
+
+task build(type: NpmTask) {
+	inputs.dir("src")
+	outputs.dir("dist")
+	args = ['run', 'build']
+}

spring-boot/thymeleaf-vue/client/jest.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  preset: "@vue/cli-plugin-unit-jest",
+  collectCoverage: true,
+  collectCoverageFrom: ["src/**/*.{js,vue}", "!**/node_modules/**"],
+  coverageReporters: ["html", "text-summary"],
+  setupFilesAfterEnv: [
+      "./jest/console-error-to-exception.setup.js",
+      "./jest/mock-canvas.setup.js"
+ ]
+};

spring-boot/thymeleaf-vue/client/jest/console-error-to-exception.setup.js

@@ -0,0 +1,35 @@
+import { format } from "util";
+
+/**
+ * Log UnhandledRejection exceptions to console.error to be picked up by
+ * below logging patterns. This will cause tests to fail when Vue components
+ * are missing required props, for example.
+ */
+process.on("unhandledRejection", (error) => {
+  // Will print "unhandledRejection err is not defined"
+  console.error("unhandledRejection", error.message);
+});
+
+/**
+ * Intercept calls to console.error and fail a test on certain logging patterns.
+ */
+beforeEach(() => {
+  const { error } = global.console;
+
+  global.console.error = (...args) => {
+    for (let i = 0; i < args.length; i += 1) {
+      const arg = args[i];
+
+      // add patterns here that should fail a test
+      if (
+        typeof arg === "string" &&
+        (arg.includes("Vue warn") ||
+          arg.includes("unhandledRejection") ||
+          arg.includes("Not implemented"))
+      ) {
+        throw new Error(format(...args));
+      }
+    }
+    error(...args);
+  };
+});

spring-boot/thymeleaf-vue/client/jest/mock-canvas.setup.js

@@ -0,0 +1,2 @@
+// Import mock canvas to be able to assert canvas operations.
+import 'jest-canvas-mock';

spring-boot/thymeleaf-vue/client/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "client",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build --target lib --dest dist/WeekChart --name WeekChart src/components/WeekChart.vue",
+    "lint": "vue-cli-service lint",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook",
+    "test": "vue-cli-service test:unit"
+  },
+  "dependencies": {
+    "core-js": "^3.6.5",
+    "vue": "^2.6.11",
+    "chart.js": "^2.9.3"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.10.2",
+    "@storybook/addon-actions": "^5.3.19",
+    "@storybook/addon-links": "^5.3.19",
+    "@storybook/addons": "^5.3.19",
+    "@storybook/vue": "^5.3.19",
+    "@vue/cli-plugin-babel": "~4.4.0",
+    "@vue/cli-plugin-eslint": "~4.4.0",
+    "@vue/cli-service": "~4.4.0",
+    "@vue/cli-plugin-unit-jest": "^4.4.0",
+    "@vue/test-utils": "^1.0.3",
+    "jest-canvas-mock": "^2.2.0",
+    "babel-eslint": "^10.1.0",
+    "babel-loader": "^8.1.0",
+    "babel-preset-vue": "^2.0.2",
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^6.2.2",
+    "vue-template-compiler": "^2.6.11"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}

spring-boot/thymeleaf-vue/client/src/App.vue

@@ -0,0 +1,28 @@
+<template>
+  <div id="app">
+    <img alt="Vue logo" src="./assets/logo.png">
+    <HelloWorld msg="Welcome to Your Vue.js App"/>
+  </div>
+</template>
+
+<script>
+import HelloWorld from './components/HelloWorld.vue'
+
+export default {
+  name: 'App',
+  components: {
+    HelloWorld
+  }
+}
+</script>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>

spring-boot/thymeleaf-vue/client/src/components/HelloWorld.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <p>
+      For a guide and recipes on how to configure / customize this project,<br>
+      check out the
+      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
+    </p>
+    <h3>Installed CLI Plugins</h3>
+    <ul>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
+    </ul>
+    <h3>Essential Links</h3>
+    <ul>
+      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
+      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
+      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
+      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
+      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
+    </ul>
+    <h3>Ecosystem</h3>
+    <ul>
+      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
+      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
+      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
+      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
+      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HelloWorld',
+  props: {
+    msg: String
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>

spring-boot/thymeleaf-vue/client/src/components/WeekChart.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="chart-container">
+    <canvas ref="chart"></canvas>
+  </div>
+</template>
+
+<script>
+import Chart from "chart.js";
+
+export default {
+  name: "WeekChart",
+
+  props: {
+    chartData: {
+      type: Array,
+      required: true,
+    },
+  },
+
+  mounted: function() {
+    const config = {
+      type: "bar",
+      data: {
+        labels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
+        datasets: [
+          {
+            data: this.chartData
+          },
+        ]
+      },
+    };
+
+    new Chart(this.$refs.chart, config);
+  }
+};
+</script>
+
+<style scoped>
+.chart-container {
+  position: relative;
+  height: 100%;
+  width: 100%;
+}
+</style>

spring-boot/thymeleaf-vue/client/src/main.js

@@ -0,0 +1,8 @@
+import Vue from 'vue'
+import App from './App.vue'
+
+Vue.config.productionTip = false
+
+new Vue({
+  render: h => h(App),
+}).$mount('#app')

spring-boot/thymeleaf-vue/client/src/tests/unit/WeekChart.spec.js

@@ -0,0 +1,16 @@
+import { shallowMount } from "@vue/test-utils";
+import WeekChart from "../../components/WeekChart.vue";
+
+describe("WeekChart", () => {
+  it("renders without error", () => {
+    const wrapper = shallowMount(WeekChart, {
+      propsData: {
+        chartData: [1, 2, 3, 4, 5, 6, 7],
+      },
+    });
+
+    const chart = wrapper.findComponent({ name: "WeekChart" });
+    expect(chart.exists()).toBe(true);
+  });
+
+});

spring-boot/thymeleaf-vue/client/stories/0-Welcome.stories.js

@@ -0,0 +1,18 @@
+import { linkTo } from '@storybook/addon-links';
+
+import Welcome from './Welcome';
+
+export default {
+  title: 'Welcome',
+  component: Welcome,
+};
+
+export const ToStorybook = () => ({
+  components: { Welcome },
+  template: '<welcome :showApp="action" />',
+  methods: { action: linkTo('Button') },
+});
+
+ToStorybook.story = {
+  name: 'to Storybook',
+};

spring-boot/thymeleaf-vue/client/stories/1-Button.stories.js

@@ -0,0 +1,29 @@
+import { action } from '@storybook/addon-actions';
+import { linkTo } from '@storybook/addon-links';
+
+import MyButton from './MyButton';
+
+export default {
+  title: 'Button',
+  component: MyButton,
+};
+
+export const Text = () => ({
+  components: { MyButton },
+  template: '<my-button @click="action">Hello Button</my-button>',
+  methods: { action: action('clicked') },
+});
+
+export const Jsx = () => ({
+  components: { MyButton },
+  render(h) {
+    return <my-button onClick={this.action}>With JSX</my-button>;
+  },
+  methods: { action: linkTo('clicked') },
+});
+
+export const Emoji = () => ({
+  components: { MyButton },
+  template: '<my-button @click="action">😀 😎 👍 💯</my-button>',
+  methods: { action: action('clicked') },
+});

spring-boot/thymeleaf-vue/client/stories/MyButton.js

@@ -0,0 +1,29 @@
+export default {
+  name: 'my-button',
+
+  data() {
+    return {
+      buttonStyles: {
+        border: '1px solid #eee',
+        borderRadius: 3,
+        backgroundColor: '#FFFFFF',
+        cursor: 'pointer',
+        fontSize: 15,
+        padding: '3px 10px',
+        margin: 10,
+      },
+    };
+  },
+
+  template: `
+    <button :style="buttonStyles" @click="onClick">
+      <slot></slot>
+    </button>
+  `,
+
+  methods: {
+    onClick() {
+      this.$emit('click');
+    },
+  },
+};

spring-boot/thymeleaf-vue/client/stories/WeekChart.stories.js

@@ -0,0 +1,13 @@
+import WeekChart from '../src/components/WeekChart.vue';
+
+export default {
+  title: 'WeekChart',
+  component: WeekChart,
+};
+
+export const DefaultState = () => ({
+  components: { 
+    chart: WeekChart
+  },
+  template: `<chart v-bind:chartData="[1,2,3,4,5,6,7]" />`
+});

spring-boot/thymeleaf-vue/client/stories/Welcome.js

@@ -0,0 +1,121 @@
+// eslint-disable-next-line no-console
+const log = () => console.log('Welcome to storybook!');
+
+export default {
+  name: 'welcome',
+
+  props: {
+    showApp: {
+      type: Function,
+      default: log,
+    },
+  },
+
+  data() {
+    return {
+      main: {
+        padding: 15,
+        lineHeight: 1.4,
+        fontFamily: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif',
+        backgroundColor: '#ffffff',
+      },
+
+      logo: {
+        width: 200,
+      },
+
+      link: {
+        color: '#1474f3',
+        textDecoration: 'none',
+        borderBottom: '1px solid #1474f3',
+        paddingBottom: 2,
+      },
+
+      code: {
+        fontSize: 15,
+        fontWeight: 600,
+        padding: '2px 5px',
+        border: '1px solid #eae9e9',
+        borderRadius: 4,
+        backgroundColor: '#f3f2f2',
+        color: '#3a3a3a',
+      },
+
+      note: {
+        opacity: 0.5,
+      },
+    };
+  },
+
+  template: `
+    <div :style="main">
+      <h1>Welcome to STORYBOOK</h1>
+      <p>
+        This is a UI component dev environment for your app.
+      </p>
+      <p>
+        We've added some basic stories inside the
+        <br />
+        <code :style="code">src/stories</code>
+        <br />
+        directory.
+        <br />
+        A story is a single state of one or more UI components. You can have as many stories as
+        you want.
+        <br />
+        (Basically a story is like a visual test case.)
+      </p>
+      <p>
+        See these sample
+        <br />
+        <a :style="link" @click="onClick" role="button" tabIndex="0">stories</a>
+        <br />
+        for a component called
+        <br />
+        <code :style="code">Button</code>
+        .
+      </p>
+      <p>
+        Just like that, you can add your own components as stories.
+        <br />
+        You can also edit those components and see changes right away.
+        <br />
+        (Try editing the <code :style="code">Button</code> component
+        located at <code :style="code">src/stories/Button.js</code>.)
+      </p>
+      <p>
+        This is just one thing you can do with Storybook.
+        <br />
+        Have a look at the
+        <br />
+        <a
+          :style="link"
+          href="https://github.com/storybookjs/storybook"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Storybook
+        </a>
+        <br />
+        repo for more information.
+      </p>
+      <p :style="note">
+        <b>NOTE:</b>
+        <br />
+        Have a look at the
+        <br />
+        <code :style="code">.storybook/webpack.config.js</code>
+        <br />
+        to add webpack
+        loaders and plugins you are using in this project.
+      </p>
+    </div>
+  `,
+
+  methods: {
+    onClick(event) {
+      event.preventDefault();
+      this.showApp();
+    },
+  },
+};

spring-boot/thymeleaf-vue/gradle/wrapper/gradle-wrapper.properties

@@ -0,0 +1,5 @@
+distributionBase=GRADLE_USER_HOME
+distributionPath=wrapper/dists
+distributionUrl=https\://services.gradle.org/distributions/gradle-6.4.1-bin.zip
+zipStoreBase=GRADLE_USER_HOME
+zipStorePath=wrapper/dists

spring-boot/thymeleaf-vue/gradlew

@@ -0,0 +1,185 @@
+#!/usr/bin/env sh
+
+#
+# Copyright 2015 the original author or authors.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#      https://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+#
+
+##############################################################################
+##
+##  Gradle start up script for UN*X
+##
+##############################################################################
+
+# Attempt to set APP_HOME
+# Resolve links: $0 may be a link
+PRG="$0"
+# Need this for relative symlinks.
+while [ -h "$PRG" ] ; do
+    ls=`ls -ld "$PRG"`
+    link=`expr "$ls" : '.*-> \(.*\)$'`
+    if expr "$link" : '/.*' > /dev/null; then
+        PRG="$link"
+    else
+        PRG=`dirname "$PRG"`"/$link"
+    fi
+done
+SAVED="`pwd`"
+cd "`dirname \"$PRG\"`/" >/dev/null
+APP_HOME="`pwd -P`"
+cd "$SAVED" >/dev/null
+
+APP_NAME="Gradle"
+APP_BASE_NAME=`basename "$0"`
+
+# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
+
+# Use the maximum available, or set MAX_FD != -1 to use that value.
+MAX_FD="maximum"
+
+warn () {
+    echo "$*"
+}
+
+die () {
+    echo
+    echo "$*"
+    echo
+    exit 1
+}
+
+# OS specific support (must be 'true' or 'false').
+cygwin=false
+msys=false
+darwin=false
+nonstop=false
+case "`uname`" in
+  CYGWIN* )
+    cygwin=true
+    ;;
+  Darwin* )
+    darwin=true
+    ;;
+  MINGW* )
+    msys=true
+    ;;
+  NONSTOP* )
+    nonstop=true
+    ;;
+esac
+
+CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
+
+
+# Determine the Java command to use to start the JVM.
+if [ -n "$JAVA_HOME" ] ; then
+    if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
+        # IBM's JDK on AIX uses strange locations for the executables
+        JAVACMD="$JAVA_HOME/jre/sh/java"
+    else
+        JAVACMD="$JAVA_HOME/bin/java"
+    fi
+    if [ ! -x "$JAVACMD" ] ; then
+        die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+else
+    JAVACMD="java"
+    which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+fi
+
+# Increase the maximum file descriptors if we can.
+if [ "$cygwin" = "false" -a "$darwin" = "false" -a "$nonstop" = "false" ] ; then
+    MAX_FD_LIMIT=`ulimit -H -n`
+    if [ $? -eq 0 ] ; then
+        if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then
+            MAX_FD="$MAX_FD_LIMIT"
+        fi
+        ulimit -n $MAX_FD
+        if [ $? -ne 0 ] ; then
+            warn "Could not set maximum file descriptor limit: $MAX_FD"
+        fi
+    else
+        warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT"
+    fi
+fi
+
+# For Darwin, add options to specify how the application appears in the dock
+if $darwin; then
+    GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\""
+fi
+
+# For Cygwin or MSYS, switch paths to Windows format before running java
+if [ "$cygwin" = "true" -o "$msys" = "true" ] ; then
+    APP_HOME=`cygpath --path --mixed "$APP_HOME"`
+    CLASSPATH=`cygpath --path --mixed "$CLASSPATH"`
+    
+    JAVACMD=`cygpath --unix "$JAVACMD"`
+
+    # We build the pattern for arguments to be converted via cygpath
+    ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null`
+    SEP=""
+    for dir in $ROOTDIRSRAW ; do
+        ROOTDIRS="$ROOTDIRS$SEP$dir"
+        SEP="|"
+    done
+    OURCYGPATTERN="(^($ROOTDIRS))"
+    # Add a user-defined pattern to the cygpath arguments
+    if [ "$GRADLE_CYGPATTERN" != "" ] ; then
+        OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)"
+    fi
+    # Now convert the arguments - kludge to limit ourselves to /bin/sh
+    i=0
+    for arg in "$@" ; do
+        CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -`
+        CHECK2=`echo "$arg"|egrep -c "^-"`                                 ### Determine if an option
+
+        if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then                    ### Added a condition
+            eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"`
+        else
+            eval `echo args$i`="\"$arg\""
+        fi
+        i=`expr $i + 1`
+    done
+    case $i in
+        0) set -- ;;
+        1) set -- "$args0" ;;
+        2) set -- "$args0" "$args1" ;;
+        3) set -- "$args0" "$args1" "$args2" ;;
+        4) set -- "$args0" "$args1" "$args2" "$args3" ;;
+        5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;;
+        6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;;
+        7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;;
+        8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;;
+        9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;;
+    esac
+fi
+
+# Escape application args
+save () {
+    for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done
+    echo " "
+}
+APP_ARGS=`save "$@"`
+
+# Collect all arguments for the java command, following the shell quoting and substitution rules
+eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS"
+
+exec "$JAVACMD" "$@"

spring-boot/thymeleaf-vue/gradlew.bat

@@ -0,0 +1,104 @@
+@rem
+@rem Copyright 2015 the original author or authors.
+@rem
+@rem Licensed under the Apache License, Version 2.0 (the "License");
+@rem you may not use this file except in compliance with the License.
+@rem You may obtain a copy of the License at
+@rem
+@rem      https://www.apache.org/licenses/LICENSE-2.0
+@rem
+@rem Unless required by applicable law or agreed to in writing, software
+@rem distributed under the License is distributed on an "AS IS" BASIS,
+@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+@rem See the License for the specific language governing permissions and
+@rem limitations under the License.
+@rem
+
+@if "%DEBUG%" == "" @echo off
+@rem ##########################################################################
+@rem
+@rem  Gradle startup script for Windows
+@rem
+@rem ##########################################################################
+
+@rem Set local scope for the variables with windows NT shell
+if "%OS%"=="Windows_NT" setlocal
+
+set DIRNAME=%~dp0
+if "%DIRNAME%" == "" set DIRNAME=.
+set APP_BASE_NAME=%~n0
+set APP_HOME=%DIRNAME%
+
+@rem Resolve any "." and ".." in APP_HOME to make it shorter.
+for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
+
+@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
+
+@rem Find java.exe
+if defined JAVA_HOME goto findJavaFromJavaHome
+
+set JAVA_EXE=java.exe
+%JAVA_EXE% -version >NUL 2>&1
+if "%ERRORLEVEL%" == "0" goto init
+
+echo.
+echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+echo.
+echo Please set the JAVA_HOME variable in your environment to match the
+echo location of your Java installation.
+
+goto fail
+
+:findJavaFromJavaHome
+set JAVA_HOME=%JAVA_HOME:"=%
+set JAVA_EXE=%JAVA_HOME%/bin/java.exe
+
+if exist "%JAVA_EXE%" goto init
+
+echo.
+echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
+echo.
+echo Please set the JAVA_HOME variable in your environment to match the
+echo location of your Java installation.
+
+goto fail
+
+:init
+@rem Get command-line arguments, handling Windows variants
+
+if not "%OS%" == "Windows_NT" goto win9xME_args
+
+:win9xME_args
+@rem Slurp the command line arguments.
+set CMD_LINE_ARGS=
+set _SKIP=2
+
+:win9xME_args_slurp
+if "x%~1" == "x" goto execute
+
+set CMD_LINE_ARGS=%*
+
+:execute
+@rem Setup the command line
+
+set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
+
+
+@rem Execute Gradle
+"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS%
+
+:end
+@rem End local scope for the variables with windows NT shell
+if "%ERRORLEVEL%"=="0" goto mainEnd
+
+:fail
+rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
+rem the _cmd.exe /c_ return code!
+if  not "" == "%GRADLE_EXIT_CONSOLE%" exit 1
+exit /b 1
+
+:mainEnd
+if "%OS%"=="Windows_NT" endlocal
+
+:omega

spring-boot/thymeleaf-vue/server/build.gradle

@@ -0,0 +1,39 @@
+plugins {
+	id 'org.springframework.boot' version '2.3.0.RELEASE'
+	id 'io.spring.dependency-management' version '1.0.9.RELEASE'
+	id 'java'
+}
+
+group = 'io.reflectoring'
+version = '0.0.1-SNAPSHOT'
+sourceCompatibility = '1.8'
+
+repositories {
+	mavenCentral()
+}
+
+dependencies {
+	project(':client')
+	implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
+	implementation 'org.springframework.boot:spring-boot-starter-web'
+	testImplementation('org.springframework.boot:spring-boot-starter-test') {
+		exclude group: 'org.junit.vintage', module: 'junit-vintage-engine'
+	}
+}
+
+test {
+	useJUnitPlatform()
+}
+
+task copyJavascriptComponents(type: Copy) {
+	from '../client/dist'
+	include '**/*.umd.min.js'
+	into 'src/main/resources/static/js/vue-components'
+}
+
+task cleanJavascriptComponents(type: Delete) {
+	delete 'src/main/resources/static/js/vue-components'
+}
+
+processResources.dependsOn copyJavascriptComponents
+clean.dependsOn cleanJavascriptComponents

spring-boot/thymeleaf-vue/server/src/main/java/io/reflectoring/thymeleafvue/HelloVueController.java

@@ -0,0 +1,22 @@
+package io.reflectoring.thymeleafvue;
+
+import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.servlet.ModelAndView;
+
+import java.util.Arrays;
+import java.util.HashMap;
+import java.util.Map;
+
+@Controller
+class HelloVueController {
+
+    @GetMapping("/hello")
+    ModelAndView showHelloPage() {
+        Map<String, Object> model = new HashMap<>();
+        model.put("title", "Hello Vue!");
+        model.put("chartData", Arrays.asList(7,6,5,4,3,2,1));
+        return new ModelAndView("hello-vue.html", model);
+    }
+
+}

spring-boot/thymeleaf-vue/server/src/main/java/io/reflectoring/thymeleafvue/ThymeleafVueApplication.java

@@ -0,0 +1,13 @@
+package io.reflectoring.thymeleafvue;
+
+import org.springframework.boot.SpringApplication;
+import org.springframework.boot.autoconfigure.SpringBootApplication;
+
+@SpringBootApplication
+public class ThymeleafVueApplication {
+
+	public static void main(String[] args) {
+		SpringApplication.run(ThymeleafVueApplication.class, args);
+	}
+
+}

spring-boot/thymeleaf-vue/server/src/main/resources/application.properties

@@ -0,0 +1 @@
+

spring-boot/thymeleaf-vue/server/src/main/resources/templates/hello-vue.html

@@ -0,0 +1,23 @@
+<html>
+<body>
+<h1 th:text="${title}">This title will be replaced</h1>
+<p> Here comes a Vue component!</p>
+
+<div id="chart">
+    <chart th:v-bind:chart-data="${chartData}"></chart>
+</div>
+
+<script src="https://unpkg.com/vue"></script>
+<script th:src="@{/js/vue-components/WeekChart/WeekChart.umd.min.js}"></script>
+<script>
+  (function() {
+      new Vue({
+        components: {
+          chart: WeekChart
+        }
+      }).$mount('#chart')
+  })();
+</script>
+
+</body>
+</html>

spring-boot/thymeleaf-vue/server/src/test/java/io/reflectoring/thymeleafvue/ThymeleafVueApplicationTests.java

@@ -0,0 +1,13 @@
+package io.reflectoring.thymeleafvue;
+
+import org.junit.jupiter.api.Test;
+import org.springframework.boot.test.context.SpringBootTest;
+
+@SpringBootTest
+class ThymeleafVueApplicationTests {
+
+	@Test
+	void contextLoads() {
+	}
+
+}

spring-boot/thymeleaf-vue/settings.gradle

@@ -0,0 +1,4 @@
+rootProject.name = 'thymeleaf-vue'
+
+include 'client'
+include 'server'