{"id":13571694,"url":"https://github.com/jonashackt/spring-boot-vuejs","last_synced_at":"2025-05-14T02:07:30.741Z","repository":{"id":37910280,"uuid":"103118188","full_name":"jonashackt/spring-boot-vuejs","owner":"jonashackt","description":"Example project showing how to build a Spring Boot App providing a GUI with Vue.js","archived":false,"fork":false,"pushed_at":"2025-05-12T23:22:00.000Z","size":25767,"stargazers_count":2106,"open_issues_count":26,"forks_count":680,"subscribers_count":63,"default_branch":"master","last_synced_at":"2025-05-13T00:26:20.738Z","etag":null,"topics":["axios","backend","docker","frontend","heroku","jest","nightwatch","rest-api","rest-backend","spring-boot","vue","vue-cli","vue-cli-3","vue-cli-plugin","vue-frontend","vuejs","vuejs2","webpack"],"latest_commit_sha":null,"homepage":"https://spring-boot-vuejs.herokuapp.com","language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jonashackt.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2017-09-11T09:42:52.000Z","updated_at":"2025-05-11T01:40:20.000Z","dependencies_parsed_at":"2023-10-30T19:39:01.647Z","dependency_job_id":"b2a2108d-ad0f-455e-a6c7-9bb0a4a8143e","html_url":"https://github.com/jonashackt/spring-boot-vuejs","commit_stats":{"total_commits":784,"total_committers":24,"mean_commits":"32.666666666666664","dds":"0.42219387755102045","last_synced_commit":"7902f43326b18c7fb394ee48dd3dede0e2e6978f"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonashackt%2Fspring-boot-vuejs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonashackt%2Fspring-boot-vuejs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonashackt%2Fspring-boot-vuejs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonashackt%2Fspring-boot-vuejs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jonashackt","download_url":"https://codeload.github.com/jonashackt/spring-boot-vuejs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254052849,"owners_count":22006717,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["axios","backend","docker","frontend","heroku","jest","nightwatch","rest-api","rest-backend","spring-boot","vue","vue-cli","vue-cli-3","vue-cli-plugin","vue-frontend","vuejs","vuejs2","webpack"],"created_at":"2024-08-01T14:01:05.045Z","updated_at":"2025-05-14T02:07:25.717Z","avatar_url":"https://github.com/jonashackt.png","language":"Java","readme":"# spring-boot-vuejs\n\n[![Build Status](https://github.com/jonashackt/spring-boot-vuejs/workflows/build/badge.svg)](https://github.com/jonashackt/spring-boot-vuejs/actions)\n[![codecov](https://codecov.io/gh/jonashackt/spring-boot-vuejs/branch/master/graph/badge.svg?token=gMQBTyKuKS)](https://codecov.io/gh/jonashackt/spring-boot-vuejs)\n[![License](http://img.shields.io/:license-mit-blue.svg)](https://github.com/jonashackt/spring-boot-vuejs/blob/master/LICENSE)\n[![renovateenabled](https://img.shields.io/badge/renovate-enabled-yellow)](https://renovatebot.com)\n[![versionspringboot](https://img.shields.io/badge/dynamic/xml?color=brightgreen\u0026url=https://raw.githubusercontent.com/jonashackt/spring-boot-vuejs/master/pom.xml\u0026query=%2F%2A%5Blocal-name%28%29%3D%27project%27%5D%2F%2A%5Blocal-name%28%29%3D%27parent%27%5D%2F%2A%5Blocal-name%28%29%3D%27version%27%5D\u0026label=springboot)](https://github.com/spring-projects/spring-boot)\n[![versionjava](https://img.shields.io/badge/jdk-8,_11,_15-brightgreen.svg?logo=java)](https://github.com/spring-projects/spring-boot)\n[![versionvuejs](https://img.shields.io/badge/dynamic/json?color=brightgreen\u0026url=https://raw.githubusercontent.com/jonashackt/spring-boot-vuejs/master/frontend/package.json\u0026query=$.dependencies.vue\u0026label=vue\u0026logo=vue.js)](https://vuejs.org/)\n[![versiontypescript](https://img.shields.io/badge/dynamic/json?color=blue\u0026url=https://raw.githubusercontent.com/jonashackt/spring-boot-vuejs/master/frontend/package.json\u0026query=$.devDependencies.typescript\u0026label=typescript\u0026logo=typescript)](https://www.typescriptlang.org/)\n[![versionbootstrap](https://img.shields.io/badge/dynamic/json?color=blueviolet\u0026url=https://raw.githubusercontent.com/jonashackt/spring-boot-vuejs/master/frontend/package.json\u0026query=$.dependencies.bootstrap\u0026label=bootstrap\u0026logo=bootstrap.js)](https://getbootstrap.com/)\n[![versionnodejs](https://img.shields.io/badge/dynamic/xml?color=brightgreen\u0026url=https://raw.githubusercontent.com/jonashackt/spring-boot-vuejs/master/frontend/pom.xml\u0026query=%2F%2A%5Blocal-name%28%29%3D%27project%27%5D%2F%2A%5Blocal-name%28%29%3D%27build%27%5D%2F%2A%5Blocal-name%28%29%3D%27plugins%27%5D%2F%2A%5Blocal-name%28%29%3D%27plugin%27%5D%2F%2A%5Blocal-name%28%29%3D%27executions%27%5D%2F%2A%5Blocal-name%28%29%3D%27execution%27%5D%2F%2A%5Blocal-name%28%29%3D%27configuration%27%5D%2F%2A%5Blocal-name%28%29%3D%27nodeVersion%27%5D\u0026label=nodejs\u0026logo=node.js)](https://nodejs.org/en/)\n[![versionwebpack](https://img.shields.io/badge/dynamic/json?color=brightgreen\u0026url=https://raw.githubusercontent.com/jonashackt/spring-boot-vuejs/master/frontend/package-lock.json\u0026query=$.dependencies.webpack.version\u0026label=webpack\u0026logo=webpack)](https://webpack.js.org/)\n[![versionaxios](https://img.shields.io/badge/dynamic/json?color=brightgreen\u0026url=https://raw.githubusercontent.com/jonashackt/spring-boot-vuejs/master/frontend/package.json\u0026query=$.dependencies.axios\u0026label=axios)](https://github.com/axios/axios)\n[![versionjest](https://img.shields.io/badge/dynamic/json?color=brightgreen\u0026url=https://raw.githubusercontent.com/jonashackt/spring-boot-vuejs/master/frontend/package-lock.json\u0026query=$.dependencies.jest.version\u0026label=jest\u0026logo=jest)](https://jestjs.io/)\n[![versionnightwatch](https://img.shields.io/badge/dynamic/json?color=brightgreen\u0026url=https://raw.githubusercontent.com/jonashackt/spring-boot-vuejs/master/frontend/package-lock.json\u0026query=$.dependencies.nightwatch.version\u0026label=nightwatch)](http://nightwatchjs.org/)\n[![Deployed on Heroku](https://img.shields.io/badge/heroku-deployed-blueviolet.svg?logo=heroku)](https://spring-boot-vuejs.herokuapp.com/)\n[![Pushed to Docker Hub](https://img.shields.io/badge/docker_hub-released-blue.svg?logo=docker)](https://hub.docker.com/r/jonashackt/spring-boot-vuejs)\n \n\u003e **If you´re a JavaMagazin / blog.codecentric.de / Softwerker reader**, consider switching to [vue-cli-v2-webpack-v3](https://github.com/jonashackt/spring-boot-vuejs/tree/vue-cli-v2-webpack-v3)\n\n![localhost-first-run](screenshots/localhost-first-run.png)\n\nA live deployment is available on Heroku: https://spring-boot-vuejs.herokuapp.com\n\nThis project is used as example in a variety of articles \u0026 as eBook:\n\n[![java-magazin-8.2018](screenshots/java-magazin-8.2018.png)](https://jaxenter.de/ausgaben/java-magazin-8-18)\n[![entwickler-press-092018](screenshots/entwickler-press-092018.jpg)](https://www.amazon.com/Vue-js-f%C3%BCr-alle-Wissenswertes-Einsteiger-ebook/dp/B07HQF9VX4/ref=sr_1_1?ie=UTF8\u0026qid=1538484852\u0026sr=8-1\u0026keywords=Vue-js-f%C3%BCr-alle-Wissenswertes-Einsteiger-ebook)\n[![softwerker-vol12](screenshots/softwerker-vol12.png)](https://info.codecentric.de/softwerker-vol-12)\n\n[blog.codecentric.de/en/2018/04/spring-boot-vuejs](https://blog.codecentric.de/en/2018/04/spring-boot-vuejs) | [JavaMagazin 8.2018](https://jaxenter.de/ausgaben/java-magazin-8-18) | [entwickler.press shortcuts 229](https://www.amazon.com/Vue-js-f%C3%BCr-alle-Wissenswertes-Einsteiger-ebook/dp/B07HQF9VX4/ref=sr_1_1?ie=UTF8\u0026qid=1538484852\u0026sr=8-1\u0026keywords=Vue-js-f%C3%BCr-alle-Wissenswertes-Einsteiger-ebook) | [softwerker Vol.12](https://info.codecentric.de/softwerker-vol-12)\n\n## Upgrade procedure\n\nGet newest node \u0026 npm:\n```shell\nbrew upgrade node\nnpm install -g npm@latest\n```\n\nUpdate vue-cli\n```shell\nnpm install -g @vue/cli\n```\n\nUpdate Vue components/plugins (see https://cli.vuejs.org/migrating-from-v3/#upgrade-all-plugins-at-once)\n```shell\nvue upgrade\n```\n\n## In Search of a new Web Frontend-Framework after 2 Years of absence...\n\nWell, I’m not a Frontend developer. I’m more like playing around with Spring Boot, Web- \u0026 Microservices \u0026 Docker, automating things with Ansible and Docker, Scaling things with Spring Cloud, Docker Compose, and Traefik... And the only GUIs I’m building are the \"new JS framework in town\"-app every two years... :) So the last one was Angular 1 - and it felt, as it was a good choice! I loved the coding experience and after a day of training, I felt able to write awesome Frontends...\n\nBut now we’re 2 years later and I heard from afar, that there was a complete rewrite of Angular (2), a new kid in town from Facebook (React) and lots of ES201x stuff and dependency managers like bower and Co. So I’m now in the new 2-year-cycle of trying to cope up again - and so glad I found this article: https://medium.com/reverdev/why-we-moved-from-angular-2-to-vue-js-and-why-we-didnt-choose-react-ef807d9f4163\n\nKey points are:\n* Angular 2 isn’t the way to go if you know version 1 (complete re-write, only with Typescript, loss of many of 1’s advantages, Angular 4 is coming)\n* React (facebookish problems (licence), need to choose btw. Redux \u0026 MObX, harder learning curve, slower coding speed)\n\n![comparison-angular-react-vuejs](screenshots/comparison-angular-react-vuejs.png)\n\nAnd the [introduction phrase](https://vuejs.org/v2/guide/index.html) sounds really great:\n\n\u003e Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.\n\nSo I think, it could be a good idea to invest a day or so into Vue.js. Let’s have a look here!\n\n\n\n## Setup Vue.js \u0026 Spring Boot\n\n### Prerequisites\n\n#### MacOSX\n\n```\nbrew install node\nnpm install -g @vue/cli\n```\n\n#### Linux\n\n```\nsudo apt update\nsudo apt install node\nnpm install -g @vue/cli\n```\n\n#### Windows\n\n```\nchoco install npm\nnpm install -g @vue/cli\n```\n\n## Project setup\n\n```\nspring-boot-vuejs\n├─┬ backend → backend module with Spring Boot code\n│ ├── src\n│ └── pom.xml\n├─┬ frontend → frontend module with Vue.js code\n│ ├── src\n│ └── pom.xml\n└── pom.xml → Maven parent pom managing both modules\n```\n\n## Backend\n\nGo to https://start.spring.io/ and initialize a Spring Boot app with `Web` and `Actuator`. Place the zip’s contents in the backend folder.\n\nCustomize pom to copy content from Frontend for serving it later with the embedded Tomcat:\n\n```xml\n\u003cbuild\u003e\n \u003cplugins\u003e\n \u003cplugin\u003e\n \u003cgroupId\u003eorg.springframework.boot\u003c/groupId\u003e\n \u003cartifactId\u003espring-boot-maven-plugin\u003c/artifactId\u003e\n \u003c/plugin\u003e\n \u003cplugin\u003e\n \u003cartifactId\u003emaven-resources-plugin\u003c/artifactId\u003e\n \u003cexecutions\u003e\n \u003cexecution\u003e\n \u003cid\u003ecopy Vue.js frontend content\u003c/id\u003e\n \u003cphase\u003egenerate-resources\u003c/phase\u003e\n \u003cgoals\u003e\n \u003cgoal\u003ecopy-resources\u003c/goal\u003e\n \u003c/goals\u003e\n \u003cconfiguration\u003e\n \u003coutputDirectory\u003esrc/main/resources/public\u003c/outputDirectory\u003e\n \u003coverwrite\u003etrue\u003c/overwrite\u003e\n \u003cresources\u003e\n \u003cresource\u003e\n \u003cdirectory\u003e${project.parent.basedir}/frontend/target/dist\u003c/directory\u003e\n \u003cincludes\u003e\n \u003cinclude\u003estatic/\u003c/include\u003e\n \u003cinclude\u003eindex.html\u003c/include\u003e\n \u003cinclude\u003efavicon.ico\u003c/include\u003e\n \u003c/includes\u003e\n \u003c/resource\u003e\n \u003c/resources\u003e\n \u003c/configuration\u003e\n \u003c/execution\u003e\n \u003c/executions\u003e\n \u003c/plugin\u003e\n \u003c/plugins\u003e\n\u003c/build\u003e\n```\n\n\n## Frontend\n\nCreating our `frontend` project is done by the slightly changed (we use `--no-git` here, because our parent project is already a git repository and otherwise vue CLI 3 would initialize an new one):\n\n```\nvue create frontend --no-git\n```\n\nsee https://cli.vuejs.org/guide/\n\nThis will initialize a project skeleton for Vue.js in /frontend directory - it, therefore, asks some questions in the cli:\n\n![vuejs-cli3-create](screenshots/vuejs-cli3-create.png)\n\n__Do not__ choose the default preset with `default (babel, eslint)`, because we need some more plugins for our project here (choose the Plugins with the __space bar__):\n\n![vuejs-cli3-select-plugins](screenshots/vuejs-cli3-select-plugins.png)\n\nYou can now also use the new `vue ui` command/feature to configure your project:\n\n![vue-ui](screenshots/vue-ui.png)\n\nIf you want to learn more about installing Vue.js, head over to the docs: https://vuejs.org/v2/guide/installation.html\n\n\n### Use frontend-maven-plugin to handle NPM, Node, Bower, Grunt, Gulp, Webpack and so on :)\n\nIf you’re a backend dev like me, this Maven plugin here https://github.com/eirslett/frontend-maven-plugin is a great help for you - because, if you know Maven, that’s everything you need! Just add this plugin to the frontend’s `pom.xml`:\n\n```xml\n\u003cbuild\u003e\n \u003cplugins\u003e\n \u003cplugin\u003e\n \u003cgroupId\u003ecom.github.eirslett\u003c/groupId\u003e\n \u003cartifactId\u003efrontend-maven-plugin\u003c/artifactId\u003e\n \u003cversion\u003e${frontend-maven-plugin.version}\u003c/version\u003e\n \u003cexecutions\u003e\n \u003c!-- Install our node and npm version to run npm/node scripts--\u003e\n \u003cexecution\u003e\n \u003cid\u003einstall node and npm\u003c/id\u003e\n \u003cgoals\u003e\n \u003cgoal\u003einstall-node-and-npm\u003c/goal\u003e\n \u003c/goals\u003e\n \u003cconfiguration\u003e\n \u003cnodeVersion\u003ev10.10.0\u003c/nodeVersion\u003e\n \u003c/configuration\u003e\n \u003c/execution\u003e\n \u003c!-- Install all project dependencies --\u003e\n \u003cexecution\u003e\n \u003cid\u003enpm install\u003c/id\u003e\n \u003cgoals\u003e\n \u003cgoal\u003enpm\u003c/goal\u003e\n \u003c/goals\u003e\n \u003c!-- optional: default phase is \"generate-resources\" --\u003e\n \u003cphase\u003egenerate-resources\u003c/phase\u003e\n \u003c!-- Optional configuration which provides for running any npm command --\u003e\n \u003cconfiguration\u003e\n \u003carguments\u003einstall\u003c/arguments\u003e\n \u003c/configuration\u003e\n \u003c/execution\u003e\n \u003c!-- Build and minify static files --\u003e\n \u003cexecution\u003e\n \u003cid\u003enpm run build\u003c/id\u003e\n \u003cgoals\u003e\n \u003cgoal\u003enpm\u003c/goal\u003e\n \u003c/goals\u003e\n \u003cconfiguration\u003e\n \u003carguments\u003erun build\u003c/arguments\u003e\n \u003c/configuration\u003e\n \u003c/execution\u003e\n \u003c/executions\u003e\n \u003c/plugin\u003e\n \u003c/plugins\u003e\n\u003c/build\u003e\n```\n\n### Tell Webpack to output the dist/ contents to target/\n\nCommonly, node projects will create a dist/ directory for builds which contains the minified source code of the web app - but we want it all in `/target`. Therefore we need to create the optional [vue.config.js](https://cli.vuejs.org/config/#vue-config-js) and configure the `outputDir` and `assetsDir` correctly: \n\n```javascript\nmodule.exports = {\n ...\n // Change build paths to make them Maven compatible\n // see https://cli.vuejs.org/config/\n outputDir;: 'target/dist',\n assetsDir;: 'static';\n}\n```\n\n\n## First App run\n\nInside the root directory, do a: \n\n```\nmvn clean install\n```\n\nRun our complete Spring Boot App:\n\n```\nmvn --projects backend spring-boot:run\n```\n\nNow go to http://localhost:8098/ and have a look at your first Vue.js Spring Boot App.\n\n\n\n## Faster feedback with webpack-dev-server\n\nThe webpack-dev-server, which will update and build every change through all the parts of the JavaScript build-chain, is pre-configured in Vue.js out-of-the-box! So the only thing needed to get fast feedback development-cycle is to cd into `frontend` and run:\n\n```\nnpm run serve\n```\n\nThat’s it! \n\n\n## Browser developer tools extension\n\nInstall vue-devtools Browser extension https://github.com/vuejs/vue-devtools and get better feedback, e.g. in Chrome:\n\n![vue-devtools-chrome](screenshots/vue-devtools-chrome.png)\n\n\n## IntelliJ integration\n\nThere's a blog post: https://blog.jetbrains.com/webstorm/2018/01/working-with-vue-js-in-webstorm/\n\nEspecially the `New... Vue Component` looks quite cool :)\n\n\n\n## HTTP calls from Vue.js to (Spring Boot) REST backend\n\nPrior to Vue 2.0, there was a build in solution (vue-resource). But from 2.0 on, 3rd party libraries are necessary. One of them is [Axios](https://github.com/mzabriskie/axios) - also see blog post https://alligator.io/vuejs/rest-api-axios/\n\n```\nnpm install axios --save\n```\n\nCalling a REST service with Axios is simple. Go into the script area of your component, e.g. Hello.vue and add:\n\n```js\nimport axios from 'axios'\n\ndata ();{\n return {\n response: [],\n errors: []\n }\n},\n\ncallRestService ();{\n axios.get(`api/hello`)\n .then(response =\u003e {\n // JSON responses are automatically parsed.\n this.response = response.data\n })\n .catch(e =\u003e {\n this.errors.push(e)\n })\n}\n}\n```\n\nIn your template area you can now request a service call via calling `callRestService()` method and access `response` data:\n\n```html\n\u003cbutton class=”Search__button” @click=\"callRestService()\"\u003eCALL Spring Boot REST backend service\u003c/button\u003e\n\n\u003ch3\u003e{{ response }}\u003c/h3\u003e\n```\n\n### The problem with SOP\n\nSingle-Origin Policy (SOP) could be a problem if we want to develop our app. Because the webpack-dev-server runs on http://localhost:8080 and our Spring Boot REST backend on http://localhost:8098.\n\nWe need to use Cross-Origin Resource Sharing Protocol (CORS) to handle that (read more background info about CORS here https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS)\n\n\n#### Enabling Axios CORS support\n\nCreate a central Axios configuration file called `http-commons.js`:\n\n```js\nimport axios from 'axios'\n\nexport const AXIOS = axios.create({\n baseURL: `http://localhost:8098`,\n headers: {\n 'Access-Control-Allow-Origin': 'http://localhost:8080'\n }\n})\n```\n\nHere we allow requests to the base URL of our Spring Boot App on port 8098 to be accessible from 8080.\n\nNow we could use this configuration inside our Components, e.g. in `Hello.vue`:\n```js\nimport {AXIOS} from './http-common'\n\nexport default {\n name: 'hello',\n\n data () {\n return {\n posts: [],\n errors: []\n }\n },\n methods: {\n // Fetches posts when the component is created.\n callRestService () {\n AXIOS.get(`hello`)\n .then(response =\u003e {\n // JSON responses are automatically parsed.\n this.posts = response.data\n })\n .catch(e =\u003e {\n this.errors.push(e)\n })\n }\n }\n```\n\n#### Enabling Spring Boot CORS support\n\nAdditionally, we need to configure our Spring Boot backend to answer with the appropriate CORS HTTP Headers in its responses (there's a good tutorial here: https://spring.io/guides/gs/rest-service-cors/). Therefore we add the annotation `@CrossOrigin` to our BackendController:\n\n```java\n@CrossOrigin(origins = \"http://localhost:8080\")\n@RequestMapping(path = \"/hello\")\npublic @ResponseBody String sayHello() {\n LOG.info(\"GET called on /hello resource\");\n return HELLO_TEXT;\n}\n```\n\nNow our Backend will respond CORS-enabled and will accept requests from 8080. But as this only enables CORS on one method, we have to repeatedly add this annotation to all of our REST endpoints, which isn’t a nice style. We should use a global solution to allow access with CORS enabled to all of our REST resources. This could be done in the `SpringBootVuejsApplication.class`:\n\n```java\n// Enable CORS globally\n@Bean\npublic WebMvcConfigurer corsConfigurer() {\n return new WebMvcConfigurerAdapter() {\n @Override\n public void addCorsMappings(CorsRegistry registry) {\n registry.addMapping(\"/api/*\").allowedOrigins(\"http://localhost:8080\");\n }\n };\n}\n```\n\nNow all calls to resources behind `api/` will return the correct CORS headers. \n\n\n#### But STOP! Webpack \u0026 Vue have something much smarter for us to help us with SOP!\n\nThanks to my colleague [Daniel](https://www.codecentric.de/team/dre/) who pointed me to the nice proxying feature of Webpack dev-server, we don't need to configure all the complex CORS stuff anymore!\n\nAccording to the [Vue CLI 3 docs](https://cli.vuejs.org/config) the only thing we need to [configure is a devserver-proxy](https://cli.vuejs.org/config/#devserver-proxy) for our webpack devserver requests. This could be done easily in the optional [vue.config.js](https://cli.vuejs.org/config/#vue-config-js) inside `devServer.proxy`: \n\n```js\nmodule.exports = {\n // proxy all webpack dev-server requests starting with /api\n // to our Spring Boot backend (localhost:8098) using http-proxy-middleware\n // see https://cli.vuejs.org/config/#devserver-proxy\n devServer: {\n proxy: {\n '/api': {\n target: 'http://localhost:8098',\n ws: true,\n changeOrigin: true\n }\n }\n },\n ...\n}\n```\n\nWith this configuration in place, the webpack dev-server uses the [http-proxy-middleware](https://github.com/chimurai/http-proxy-middleware), which is a really handy component, to proxy all frontend-requests from http://localhost:8080 --\u003e http://localhost:8098 - incl. Changing the Origin accordingly.\n\nThis is used in the webpack build process to configure the proxyMiddleware (you don't need to change something here!):\n\n```js\n// proxy api requests\nObject.keys(proxyTable).forEach(function (context) {\n var options = proxyTable[context];\n if (typeof options === 'string') {\n options = { target: options }\n }\n app.use(proxyMiddleware(options.filter || context, options))\n})\n```\n\n## Using history mode for nicer URLs\n\nIf we use the default configuration of the generated Vue.js template, we see URLs with a `#` inside them - like this:\n\n```\nhttp://localhost:8098/#/bootstrap\n\nor\n\nhttp://localhost:8098/#/user\n```\n\nWith the usage of __[HTML5 history mode](https://router.vuejs.org/guide/essentials/history-mode.html#html5-history-mode)__, we can achieve much nicer URLs without the `#` in them. Only thing to do in the Vue.js frontend is to configure our router accordingly inside the [router.js](frontend/src/router.js):\n\n```\n...\n\nVue.use(Router);\n\nconst router = new Router({\n mode: 'history', // uris without hashes #, see https://router.vuejs.org/guide/essentials/history-mode.html#html5-history-mode\n routes: [\n { path: '/', component: Hello },\n { path: '/callservice', component: Service },\n ...\n```\n\nThat's nearly everything. BUT only nearly! If one clicks on a link inside our frontend, the user is correctly send to the wished component. \n\nBut if the user enters the URL directly into the Browser, we get a `Whitelabel Error Page` because our Spring Boot backend gives us a __HTTP 404__ - since this URL isn't present in the backend:\n\n![html5-history-mode-whitelabel-error-page-404](screenshots/html5-history-mode-whitelabel-error-page-404.gif)\n\nThe solution is to redirect or better forward the user to the frontend (router) again. The [Vue.js docs don't provide an example configuration for Spring Boot](https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations), but luckily [there are other resources](https://www.baeldung.com/spring-redirect-and-forward). In essence we have to implement a forwarding controller in our [BackendController](backend/src/main/java/de/jonashackt/springbootvuejs/controller/BackendController.java):\n\n```\n // Forwards all routes to FrontEnd except: '/', '/index.html', '/api', '/api/**'\n // Required because of 'mode: history' usage in frontend routing, see README for further details\n @RequestMapping(value = \"{_:^(?!index\\\\.html|api).$}\")\n public String redirectApi() {\n LOG.info(\"URL entered directly into the Browser, so we need to redirect...\");\n return \"forward:/\";\n }\n```\n\nThis controller will forward every request other then `'/', '/index.html', '/api', '/api/**'` to our Vue.js frontend.\n\n\n## Bootstrap \u0026 Vue.js\n\nThere’s a nice integration of Bootstrap in Vue.js: https://bootstrap-vue.js.org/\n\n```\nnpm install bootstrap-vue\n```\n\nNow you can use all the pretty Bootstrap stuff with ease like:\n\n```\n\u003cb-btn @click=\"callRestService()\"\u003eCALL Spring Boot REST backend service\u003c/b-btn\u003e\n```\n\ninstead of\n\n```\n\u003cbutton type=\"button\" class=”btn” @click=\"callRestService()\"\u003eCALL Spring Boot REST backend service\u003c/button\u003e\n```\n\nThe docs contain all the possible components: https://bootstrap-vue.js.org/docs/components/alert/\n\nSee some elements, when you go to http://localhost:8080/#/bootstrap/ - this should look like this:\n\n![bootstrap-styled-vuejs](screenshots/bootstrap-styled-vuejs.png)\n\nA good discussion about various UI component frameworks: http://vuetips.com/bootstrap\n\n\n## Heroku Deployment\n\nAs you may already read, the app is automatically deployed to Heroku on https://spring-boot-vuejs.herokuapp.com/.\n\nThe project makes use of the nice Heroku Pipelines feature, where we do get a full Continuous Delivery pipeline with nearly no effort:\n\n![heroku-pipeline](screenshots/heroku-pipeline.png)\n\nAnd with the help of super cool `Automatic deploys`, we have our GitHub Actions build our app after every push to master - and with the checkbox set to `Wait for CI to pass before deploy` - the app gets also automatically deployed to Heroku - but only, if the GitHub Actions (and Codegov...) build succeeded:\n\n![heroku-automatic-deploys](screenshots/heroku-automatic-deploys.png)\n\nYou only have to connect your Heroku app to GitHub, activate Automatic deploys and set the named checkbox. That's everything!\n\n\n#### Accessing Spring Boot REST backend on Heroku from Vue.js frontend\n\nFrontend needs to know the Port of our Spring Boot backend API, which is [automatically set by Heroku every time, we (re-)start our App](https://stackoverflow.com/a/12023039/4964553).\n\n\u003e You can [try out your Heroku app locally](https://devcenter.heroku.com/articles/heroku-local)! Just create a .env-File with all your Environment variables and run `heroku local`! \n\nTo access the Heroku set port, we need to use relative paths inside our Vue.js application instead of hard-coded hosts and ports! \n\nAll we need to do is to configure Axios in such a way inside our [frontend/src/components/http-common.js](https://github.com/jonashackt/spring-boot-vuejs/blob/master/frontend/src/components/http-common.js):\n\n```\nexport const AXIOS = axios.create({\n baseURL: `/api`\n})\n```\n\n#### Using Heroku's Postgres as Database for Spring Boot backend and Vue.js frontend\n\nFirst, add [Heroku Postgres database](https://elements.heroku.com/addons/heroku-postgresql) for your Heroku app. \n\nThen follow these instructions on Stackoverflow to configure all needed Environment variables in Heroku: https://stackoverflow.com/a/49978310/4964553\n\nMind the addition to the backend's [pom.xml](backend/pom.xml) described here: https://stackoverflow.com/a/49970142/4964553\n\nNow you're able to use Spring Data's magic - all you need is an Interface like [UserRepository.java](backend/src/main/java/de/jonashackt/springbootvuejs/repository/UserRepository.java):\n\n```java\npackage de.jonashackt.springbootvuejs.repository;\n\nimport de.jonashackt.springbootvuejs.domain.User;\nimport org.springframework.data.repository.CrudRepository;\nimport org.springframework.data.repository.query.Param;\n\nimport java.util.List;\n\npublic interface UserRepository extends CrudRepository\u003cUser, Long\u003e {\n\n List\u003cUser\u003e findByLastName(@Param(\"lastname\") String lastname);\n\n List\u003cUser\u003e findByFirstName(@Param(\"firstname\") String firstname);\n\n}\n\n```\n\nNow write your Testcases accordingly like [UserRepositoryTest.java](backend/src/test/java/de/jonashackt/springbootvuejs/repository/UserRepositoryTest.java):\n\n```java\npackage de.jonashackt.springbootvuejs.repository;\n\nimport de.jonashackt.springbootvuejs.domain.User;\nimport org.junit.Before;\nimport org.junit.Test;\nimport org.junit.runner.RunWith;\nimport org.springframework.beans.factory.annotation.Autowired;\nimport org.springframework.boot.test.autoconfigure.orm.jpa.DataJpaTest;\nimport org.springframework.boot.test.autoconfigure.orm.jpa.TestEntityManager;\nimport org.springframework.test.context.junit4.SpringRunner;\n\nimport java.util.List;\n\nimport static org.hamcrest.Matchers.contains;\nimport static org.junit.Assert.*;\n\n@RunWith(SpringRunner.class)\n@DataJpaTest\npublic class UserRepositoryTest {\n\n @Autowired\n private TestEntityManager entityManager;\n\n @Autowired\n private UserRepository users;\n\n private final User norbertSiegmund = new User(\"Norbert\", \"Siegmund\");\n private final User jonasHecht = new User(\"Jonas\", \"Hecht\");\n\n @Before\n public void fillSomeDataIntoOurDb() {\n // Add new Users to Database\n entityManager.persist(norbertSiegmund);\n entityManager.persist(jonasHecht);\n }\n\n @Test\n public void testFindByLastName() throws Exception {\n // Search for specific User in Database according to lastname\n List\u003cUser\u003e usersWithLastNameSiegmund = users.findByLastName(\"Siegmund\");\n\n assertThat(usersWithLastNameSiegmund, contains(norbertSiegmund));\n }\n\n\n @Test\n public void testFindByFirstName() throws Exception {\n // Search for specific User in Database according to firstname\n List\u003cUser\u003e usersWithFirstNameJonas = users.findByFirstName(\"Jonas\");\n\n assertThat(usersWithFirstNameJonas, contains(jonasHecht));\n }\n\n}\n```\n\nThen include this functionality in your REST-API - see [BackendController.java](backend/src/main/java/de/jonashackt/springbootvuejs/controller/BackendController.java):\n\n```java\n @RequestMapping(path = \"/user\", method = RequestMethod.POST)\n @ResponseStatus(HttpStatus.CREATED)\n public @ResponseBody long addNewUser (@RequestParam String firstName, @RequestParam String lastName) {\n User user = new User(firstName, lastName);\n userRepository.save(user);\n\n LOG.info(user.toString() + \" successfully saved into DB\");\n\n return user.getId();\n }\n```\n \nand use it from the Vue.js frontend, see [User.vue](frontend/src/components/User.vue):\n\n```html\n\u003ctemplate\u003e\n\u003cdiv class=\"user\"\u003e\n \u003ch1\u003eCreate User\u003c/h1\u003e\n\n \u003ch3\u003eJust some database interaction...\u003c/h3\u003e\n\n \u003cinput type=\"text\" v-model=\"user.firstName\" placeholder=\"first name\"\u003e\n \u003cinput type=\"text\" v-model=\"user.lastName\" placeholder=\"last name\"\u003e\n\n \u003cbutton @click=\"createUser()\"\u003eCreate User\u003c/button\u003e\n\n \u003cdiv v-if=\"showResponse\"\u003e\u003ch6\u003eUser created with Id: {{ response }}\u003c/h6\u003e\u003c/div\u003e\n\n \u003cbutton v-if=\"showResponse\" @click=\"retrieveUser()\"\u003eRetrieve user {{user.id}} data from database\u003c/button\u003e\n\n \u003ch4 v-if=\"showRetrievedUser\"\u003eRetrieved User {{retrievedUser.firstName}} {{retrievedUser.lastName}}\u003c/h4\u003e\n\n\u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n// import axios from 'axios'\nimport {AXIOS} from './http-common'\n\nexport default {\n name: 'user',\n\n data () {\n return {\n response: [],\n errors: [],\n user: {\n lastName: '',\n firstName: '',\n id: 0\n },\n showResponse: false,\n retrievedUser: {},\n showRetrievedUser: false\n }\n },\n methods: {\n // Fetches posts when the component is created.\n createUser () {\n var params = new URLSearchParams();\n params.append('firstName', this.user.firstName);\n params.append('lastName', this.user.lastName);\n\n AXIOS.post(`/user`, params)\n .then(response =\u003e {\n // JSON responses are automatically parsed.\n this.response = response.data;\n this.user.id = response.data;\n console.log(response.data);\n this.showResponse = true\n })\n .catch(e =\u003e {\n this.errors.push(e)\n })\n },\n retrieveUser () {\n AXIOS.get(`/user/` + this.user.id)\n .then(response =\u003e {\n // JSON responses are automatically parsed.\n this.retrievedUser = response.data;\n console.log(response.data);\n this.showRetrievedUser = true\n })\n .catch(e =\u003e {\n this.errors.push(e)\n })\n }\n }\n}\n\n\u003c/script\u003e\n```\n\n\n## Testing \n\n### Install vue-test-utils\n\nhttps://github.com/vuejs/vue-test-utils\n\n`npm install --save-dev @vue/test-utils`\n\n### Jest\n\nJest is a new shooting star in the sky of JavaScript testing frameworks: https://facebook.github.io/jest/\n\nIntro-Blogpost: https://blog.codecentric.de/2017/06/javascript-unit-tests-sind-schwer-aufzusetzen-keep-calm-use-jest/\n\nExamples: https://github.com/vuejs/vue-test-utils-jest-example\n\nVue.js Jest Docs: https://vue-test-utils.vuejs.org/guides/#testing-single-file-components-with-jest\n\nA Jest Unittest looks like [Hello.spec.js](frontend/test/components/Hello.spec.js):\n\n```js\nimport { shallowMount } from '@vue/test-utils';\nimport Hello from '@/components/Hello'\n\ndescribe('Hello.vue', () =\u003e {\n it('should render correct hello message', () =\u003e {\n // Given\n const hellowrapped = shallowMount(Hello, {\n propsData: { hellomsg: 'Welcome to your Jest powered Vue.js App' },\n stubs: ['router-link', 'router-view']\n });\n\n // When\n const contentH1 = hellowrapped.find('h1');\n\n // Then\n expect(contentH1.text()).toEqual('Welcome to your Jest powered Vue.js App');\n })\n})\n```\n\nTo pass Component props while using Vue.js Router, see https://stackoverflow.com/a/37940045/4964553.\n\nHow to test components with `router-view` or `router-link` https://vue-test-utils.vuejs.org/guides/using-with-vue-router.html#testing-components-that-use-router-link-or-router-view.\n\nThe test files itself could be named `xyz.spec.js` or `xyz.test.js` - and could reside nearly everywhere in the project.\n\n##### Jest Configuration \n\nThe Jest run-configuration is done inside the [package.json](frontend/package.json):\n\n```js\n\"scripts\";: {\n ...\n \"test:unit\";: \"vue-cli-service test:unit --coverage\",;\n ....\n },\n```\n\nJest can be configured via `jest.config.js` in your project root, or the `jest` field in [package.json](frontend/package.json). In our case we especially need to configure `coverageDirectory`:\n\n```json\n ],\n \"jest\": {\n ...\n \"coverageDirectory\": \"\u003crootDir\u003e/tests/unit/coverage\",\n \"collectCoverageFrom\": [\n \"src/**/*.{js,vue}\",\n \"!src/main.js\",\n \"!src/router/index.js\",\n \"!**/node_modules/**\"\n ]\n }\n}\n```\n\nJest needs to know the right output directory `/tests/unit/coverage` to show a correct output when `npm run test:unit` is run (or the corresponding Maven build). If you run the Jest Unit tests now with:\n\n`npm run test:unit`\n\n- you´ll recognize the table of test covered files:\n\n![unittestrun-jest](screenshots/unittestrun-jest.png)\n\n\n##### Integration in Maven build (via frontend-maven-plugin)\n\nInside the [pom.xml](pom.xml) we always automatically run the Jest Unittests with the following configuration:\n\n```xml\n\u003c!-- Run Unit tests --\u003e\n \u003cexecution\u003e\n \u003cid\u003enpm run test:unit\u003c/id\u003e\n \u003cgoals\u003e\n \u003cgoal\u003enpm\u003c/goal\u003e\n \u003c/goals\u003e\n \u003c!-- optional: default phase is \"generate-resources\" --\u003e\n \u003cphase\u003etest\u003c/phase\u003e\n \u003c!-- Optional configuration which provides for running any npm command --\u003e\n \u003cconfiguration\u003e\n \u003carguments\u003erun test:unit\u003c/arguments\u003e\n \u003c/configuration\u003e\n \u003c/execution\u003e\n```\n\nThis will integrate the Jest Unittests right after the npm run build command, just you are used to in Java-style projects:\n\n![maven-integration-jest-unittests](screenshots/maven-integration-jest-unittests.png)\n\nAnd don't mind the depiction with `ERROR` - this is just a known bug: https://github.com/eirslett/frontend-maven-plugin/issues/584\n\n\n##### Run Jest tests inside IntelliJ\n\nFirst, we need to install the NodeJS IntelliJ plugin (https://www.jetbrains.com/help/idea/developing-node-js-applications.html), which isn't bundled with IntelliJ by default:\n\n![nodejs-intellij-plugin](screenshots/nodejs-intellij-plugin.png)\n\nIntelliJ Jest integration docs: https://www.jetbrains.com/help/idea/running-unit-tests-on-jest.html\n\nThe automatic search inside the [package.json](frontend/package.json) for the Jest configuration file [jest.conf.js](frontend/test/unit/jest.conf.js) doesn't seem to work right now, so we have to manually configure the `scripts` part of:\n\n```\n\"unit\": \"jest --config test/unit/jest.conf.js --coverage\",\n```\n\ninside the Run Configuration under `Jest` and `All Tests`:\n\n![configure-jest-inside-intellij](screenshots/configure-jest-inside-intellij.png)\n\nNow, when running `All Tests`, this should look like you're already used to Unittest IntelliJ-Integration:\n\n![run-jest-inside-intellij](screenshots/run-jest-inside-intellij.png)\n\n \n\n## End-2-End (E2E) tests with Nightwatch\n\nGreat tooling: http://nightwatchjs.org/ - Nightwatch controls WebDriver / Selenium standalone Server in own child process and abstracts from those, providing a handy DSL for Acceptance tests:\n\nDocs: http://nightwatchjs.org/gettingstarted/#browser-drivers-setup\n\n![http://nightwatchjs.org/img/operation.png](http://nightwatchjs.org/img/operation.png)\n\nNightwatch is configured through the [nightwatch.conf.js](/frontend/test/e2e/nightwatch.conf.js). Watch out for breaking changes in 1.x: https://github.com/nightwatchjs/nightwatch/wiki/Migrating-to-Nightwatch-1.0\n\nMore options could be found in the docs: http://nightwatchjs.org/gettingstarted/#settings-file\n\n\n#### Write Nightwatch tests\n\nAn example Nightwatch test is provided in [HelloAcceptance.test.js](/frontend/test/e2e/specs/HelloAcceptance.test.js):\n\n```js\nmodule.exports = {\n 'default e2e tests': browser =\u003e {\n browser\n .url(process.env.VUE_DEV_SERVER_URL)\n .waitForElementVisible('#app', 5000)\n .assert.elementPresent('.hello')\n .assert.containsText('h1', 'Welcome to your Vue.js powered Spring Boot App')\n .assert.elementCount('img', 1)\n .end()\n }\n}\n```\n\n##### Run E2E Tests\n\n`npm run test:e2e`\n\n\n## Run all tests\n\n `npm test`\n\n\n\n## NPM Security\n\nnpm Security - npm@6\n\nhttps://medium.com/npm-inc/announcing-npm-6-5d0b1799a905\n\n`npm audit`\n\nhttps://blog.npmjs.org/post/173719309445/npm-audit-identify-and-fix-insecure\n\nRun `npm audit fix` to update the vulnerable packages. Only in situations, where nothing else helps, try `npm audit fix --force` (this will also install braking changes)\n\nhttps://nodejs.org/en/blog/vulnerability/june-2018-security-releases/\n\n---\u003e __Update NPM regularly__\n\nhttps://docs.npmjs.com/troubleshooting/try-the-latest-stable-version-of-npm\n\n`npm install -g npm@latest`\n\n---\u003e __Update Packages regularly__\n\nhttps://docs.npmjs.com/getting-started/updating-local-packages\n\n`npm outdated`\n\n`npm update`\n\n\n\n\n## Shift from templates to plugin-based architecture in Vue Cli 3\n\nIn the long run, templates like the main [webpack](https://github.com/vuejs-templates/webpack) are deprecated in the Vue.js universe:\n\nhttps://vuejsdevelopers.com/2018/03/26/vue-cli-3/\n\nPlugins bring the following benefits compared to templates:\n\n* No lock in, as plugins can be added at any point in the development lifecycle\n* Zero config plugins allow you to spend time developing rather than configuring\n* Easy to upgrade, as configuration can be customized without “ejecting”\n* Allows developers to make their own plugins and presets\n\nStarting point: https://cli.vuejs.org/\n\n\n#### OMG! My package.json is so small - Vue CLI 3 Plugins\n\nFrom https://cli.vuejs.org/guide/plugins-and-presets.html:\n\n\u003e Vue CLI uses a plugin-based architecture. If you inspect a newly created project's package.json, you will find dependencies that start with `@vue/cli-plugin-`. Plugins can modify the internal webpack configuration and inject commands to `vue-cli-service`. Most of the features listed during the project creation process are implemented as plugins.\n\nWith plugings, extensions to an existing project could also be made via: `vue add pluginName`. E.g. if you want to add Nightwatch E2E tests to your project, just run `vue add @vue/e2e-nightwatch`. All scoped packages are available here: https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue\n\nThese new Vue CLI 3 plugin architecture cleans our big `package.json` to a really neat compact thing. This was the old big dependency block:\n\n````json\n \"devDependencies\": {\n \"@vue/test-utils\": \"^1.0.0-beta.25\",\n \"autoprefixer\": \"^7.1.2\",\n \"babel-core\": \"^6.26.3\",\n \"babel-helper-vue-jsx-merge-props\": \"^2.0.3\",\n \"babel-jest\": \"^21.0.2\",\n \"babel-loader\": \"^7.1.5\",\n \"babel-plugin-dynamic-import-node\": \"^1.2.0\",\n \"babel-plugin-syntax-jsx\": \"^6.18.0\",\n \"babel-plugin-transform-es2015-modules-commonjs\": \"^6.26.0\",\n \"babel-plugin-transform-runtime\": \"^6.22.0\",\n \"babel-plugin-transform-vue-jsx\": \"^3.5.0\",\n \"babel-preset-env\": \"^1.7.0\",\n \"babel-preset-stage-2\": \"^6.22.0\",\n \"babel-register\": \"^6.22.0\",\n \"chalk\": \"^2.4.1\",\n \"chromedriver\": \"^2.41.0\",\n \"copy-webpack-plugin\": \"^4.5.2\",\n \"cross-spawn\": \"^5.0.1\",\n \"css-loader\": \"^0.28.0\",\n \"extract-text-webpack-plugin\": \"^3.0.0\",\n \"file-loader\": \"^1.1.4\",\n \"friendly-errors-webpack-plugin\": \"^1.6.1\",\n \"html-webpack-plugin\": \"^2.30.1\",\n \"jest\": \"^22.0.4\",\n \"jest-serializer-vue\": \"^0.3.0\",\n \"nightwatch\": \"^1.0.11\",\n \"node-notifier\": \"^5.1.2\",\n \"optimize-css-assets-webpack-plugin\": \"^3.2.0\",\n \"ora\": \"^1.2.0\",\n \"portfinder\": \"^1.0.17\",\n \"postcss-import\": \"^11.0.0\",\n \"postcss-loader\": \"^2.1.6\",\n \"postcss-url\": \"^7.2.1\",\n \"rimraf\": \"^2.6.0\",\n \"selenium-server\": \"^3.14.0\",\n \"semver\": \"^5.5.1\",\n \"shelljs\": \"^0.7.6\",\n \"uglifyjs-webpack-plugin\": \"^1.3.0\",\n \"url-loader\": \"^1.1.1\",\n \"vue-jest\": \"^1.0.2\",\n \"vue-loader\": \"^13.7.3\",\n \"vue-style-loader\": \"^3.0.1\",\n \"vue-template-compiler\": \"^2.5.17\",\n \"webpack\": \"^3.6.0\",\n \"webpack-bundle-analyzer\": \"^2.13.1\",\n \"webpack-dev-server\": \"^2.11.3\",\n \"webpack-merge\": \"^4.1.4\"\n },\n````\n\nAs you can see, we´re not only maintaining our high-level libraries of choice like nightwatch, jest and so on. We´re also maintaining libraries that they use itself. Now this is over with Vue CLI 3. Let´s have a look at the super clean dependency block now:\n\n```json\n\"devDependencies\": {\n \"@vue/cli-plugin-babel\": \"^3.0.3\",\n \"@vue/cli-plugin-e2e-nightwatch\": \"^3.0.3\",\n \"@vue/cli-plugin-unit-jest\": \"^3.0.3\",\n \"@vue/cli-service\": \"^3.0.3\",\n \"@vue/test-utils\": \"^1.0.0-beta.20\",\n \"babel-core\": \"7.0.0-bridge.0\",\n \"babel-jest\": \"^23.0.1\",\n \"node-sass\": \"^4.9.0\",\n \"sass-loader\": \"^7.0.1\",\n \"vue-template-compiler\": \"^2.5.17\"\n },\n``` \n\nAs you dig into the directories like `node_modules/@vue/cli-plugin-e2e-nightwatch`, you´ll find where the used libraries of nightwatch are configured - in the respective `package.json` there:\n\n```json\n \"dependencies\": {\n \"@vue/cli-shared-utils\": \"^3.0.2\",\n \"chromedriver\": \"^2.40.0\",\n \"deepmerge\": \"^2.1.1\",\n \"execa\": \"^0.10.0\",\n \"nightwatch\": \"^0.9.21\",\n \"selenium-server\": \"^3.13.0\"\n },\n```\n\nThis is really cool, I have to admit!\n\n\n#### The vue.config.js file\n\nVue CLI 3 removes the need for explicit configuration files - and thus you wont find any `build` or `config` directories in your projects root any more. This now implements a \"convention over configuration\" approach, which makes it much easier to kick-start a Vue.js project, as it provides widly used defaults to webpack etc. It also eases the upgradeability of Vue.js projects - or even makes it possible. \n\n__But__: How do we configure webpack etc. for CORS handling, the build directories and so on? This could be done with the optional [vue.config.js](https://cli.vuejs.org/config/#vue-config-js):\n\n```javascript\nmodule.exports = {\n // proxy all webpack dev-server requests starting with /api\n // to our Spring Boot backend (localhost:8098) using http-proxy-middleware\n // see https://cli.vuejs.org/config/#devserver-proxy\n devServer: {\n proxy: {\n '/api': {\n target: 'http://localhost:8098',\n ws: true,\n changeOrigin: true\n }\n }\n },\n // Change build paths to make them Maven compatible\n // see https://cli.vuejs.org/config/\n outputDir: 'target/dist'\n}\n```\n\n#### Updating Vue in an existing project\n\nUpdate your local `@vue/cli` to the latest version:\n\n```\nnpm install -g @vue/cli\n```\n\nThen update Vue.js and all your other JS dependencies with:\n\n```\ncd frontend\nnpm update\n```\n\n\n## Upgrade to Vue.js 3.x/4.x next\n\nLet's move from 2.6.x -\u003e 3.x/4.x next here.\n\n\u003e Be aware that [the latest version of vue currently is `2.6.x` and `3.x` is considered `next`](https://www.npmjs.com/package/vue)!\n\nThere are some resources:\n\nhttps://v3.vuejs.org/guide/migration/introduction.html#quickstart\n\nhttps://johnpapa.net/vue2-to-vue3/\n\nAnd if we are using 3.x, we can even migrate to 4.x: https://cli.vuejs.org/migrating-from-v3/\n\n\n#### Upgrade from 2.x to 3.x\n\nThere's a migration tooling, simply use:\n\n```shell\nvue add vue-next\n```\n\nThis took around 3 minutes or more on my MacBook and changed some files:\n\n![vue-js-2.x-to-3.x-next-upgrade](screenshots/vue-js-2.x-to-3.x-next-upgrade.png)\n\nThe [package.json](frontend/package.json) got some new or upgraded deps:\n\n![vue-js-2.x-to-3.x-next-upgrade-dependencies](screenshots/vue-js-2.x-to-3.x-next-upgrade-dependencies.png)\n\n[As John stated in his post](https://johnpapa.net/vue2-to-vue3/) it's strange to find `beta` versions with `vue`, `vue-router` and `vuex`. \n\nSo in order to see what a fresh skeleton would produce, let's also create one in another dir ([I assume you have `npm install -g @vue/cli` installed](https://v3.vuejs.org/guide/migration/introduction.html#quickstart):\n\n```shell\nmkdir vue3test \u0026\u0026 cd vue3test\nvue create hello-vue3\n```\n\nI aligned my project to match the latest skeleton generation much better: So router, store and api got their own directories. The views are now in the correct folder `views` - and I extracted one component to use from the newly introduced `Home.vue` view: the `HelloSpringWorld.vue` component.\n\nI also went over the [package.json](frontend/package.json) and upgraded to the latest release versions instead of alphas (except `@vue/test-utils` which only has a `rc` atm).\n\nAll imports were refactored too. Coming from this style:\n\n```javascript\nimport Vue from 'vue'\nimport Router from 'vue-router'\n```\n\neverything now reads:\n\n```javascript\nimport { createApp } from 'vue';\nimport { createRouter, createWebHistory } from 'vue-router'\n```\n\nAlso check your `router.js` or [router/index.js](frontend/src/router/index.js)! Using a path redirect like this leads to a non working routing configuration:\n\n```javascript\n // otherwise redirect to home\n { path: '*', redirect: '/' }\n```\n\nThe error in the Browser console states:\n\n```shell\nUncaught Error: Catch all routes (\"*\") must now be defined using a param with a custom regexp.\nSee more at https://next.router.vuejs.org/guide/migration/#removed-star-or-catch-all-routes.\n```\n\nI changed it to the new param with regex syntax like this:\n\n```javascript\n // otherwise redirect to home\n { path: '/:pathMatch(.*)*', redirect: '/' }\n```\n\nA crucial point to get jest to work again, was to add the following to the [jest.config.js](frontend/jest.config.js):\n\n```javascript\n transform: {\n '^.+\\\\.vue$': 'vue-jest'\n }\n```\n\nOtherwise my tests ran into the following error:\n\n```shell\nnpm run test:unit\n\n\u003e frontend@4.0.0 test:unit\n\u003e vue-cli-service test:unit --coverage\n\n FAIL tests/unit/views/User.spec.js\n ● Test suite failed to run\n\n Vue packages version mismatch:\n\n - vue@3.0.11 (/Users/jonashecht/dev/spring-boot/spring-boot-vuejs/frontend/node_modules/vue/index.js)\n - vue-template-compiler@2.6.12 (/Users/jonashecht/dev/spring-boot/spring-boot-vuejs/frontend/node_modules/vue-template-compiler/package.json)\n\n This may cause things to work incorrectly. Make sure to use the same version for both.\n If you are using vue-loader@\u003e=10.0, simply update vue-template-compiler.\n If you are using vue-loader@\u003c10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.\n\n at Object.\u003canonymous\u003e (node_modules/vue-template-compiler/index.js:10:9)\n```\n\nLuckily this so answer helped me out: https://stackoverflow.com/a/65111966/4964553\n\nAnd finally Bootstrap Vue doesn't support Vue 3.x right now: https://github.com/bootstrap-vue/bootstrap-vue/issues/5196 - So I temporarily commented out the imports.\n\n\n#### Add TypeScript\n\nVue 3.x is now build with TypeScript: https://v3.vuejs.org/guide/typescript-support.html\n\n\u003e A static type system can help prevent many potential runtime errors as applications grow, which is why Vue 3 is written in TypeScript. This means you don't need any additional tooling to use TypeScript with Vue - it has first-class citizen support.\n\nThere's also a huge documentation of TypeScript itself at https://www.typescriptlang.org/docs/ I can also recommend https://medium.com/js-dojo/adding-typescript-to-your-existing-vuejs-2-6-app-aaa896c2d40a\n\nTo migrate your project there's the command:\n\n```shell\nvue add typescript\n```\n\nThe first question arises: `Use class-style component syntax? (Y/n)` whether to use class-style component syntax or not. I didn't use it. I think the interface definitions of components are concise enough without the class-style. But let's see how this will work out.\n\nSo this was the output:\n\n```shell\nvue add typescript\n WARN There are uncommitted changes in the current repository, it's recommended to commit or stash them first.\n? Still proceed? Yes\n\n📦 Installing @vue/cli-plugin-typescript...\n\n\nadded 59 packages, removed 58 packages, and audited 2219 packages in 6s\n\n85 packages are looking for funding\n run `npm fund` for details\n\n3 low severity vulnerabilities\n\nTo address all issues (including breaking changes), run:\n npm audit fix --force\n\nRun `npm audit` for details.\n✔ Successfully installed plugin: @vue/cli-plugin-typescript\n\n? Use class-style component syntax? No\n? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes\n? Use TSLint? Yes\n? Pick lint features: Lint on save\n? Convert all .js files to .ts? Yes\n? Allow .js files to be compiled? Yes\n? Skip type checking of all declaration files (recommended for apps)? Yes\n\n🚀 Invoking generator for @vue/cli-plugin-typescript...\n📦 Installing additional dependencies...\n\n\nadded 2 packages, and audited 2221 packages in 3s\n...\n✔ Successfully invoked generator for plugin: @vue/cli-plugin-typescript\n```\n\nNow I went through all the componentes and views and extended `\u003cscript\u003e` to `\u003cscript lang=\"ts\"\u003e`.\n\nAlso I changed\n\n```javascript\n export default {\n```\n\nto\n\n```javascript\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n```\n\nNow we need to transform our JavaScript code into TypeScript.\n\nA really good introduction could be found here: https://www.vuemastery.com/blog/getting-started-with-typescript-and-vuejs/\n\n\u003e This process will take a while, depending on your code - and mainly on your knowledge about TypeScript. But I think it's a great path to go!\n\nDon't forget to deactivate source control for `.js` and `.map` files in `src`, because these will now be generated (aka transpiled) from TypeScript and [shouldn't be checked in (anymore)](https://stackoverflow.com/a/26464907/4964553).\n\nI enhanced my [frontend/.gitignore](frontend/.gitignore) like this:\n\n```shell\n# TypeScript\n*.map\nsrc/*.js\ntest/*.js\n```\n\n##### Vuex Store with TypeScript\n\nAccording to https://next.vuex.vuejs.org/guide/typescript-support.html#typing-store-property-in-vue-component in order to use vuex store with TypeScript, we:\n\n\u003e must declare your own module augmentation.\n\nTLDR; we need to create a file [src/vuex.d.ts](frontend/src/vuex.d.ts):\n\n```javascript\nimport { ComponentCustomProperties } from 'vue'\nimport { Store } from 'vuex'\n\ndeclare module '@vue/runtime-core' {\n // declare your own store states\n interface State {\n count: number\n }\n\n // provide typings for `this.$store`\n interface ComponentCustomProperties {\n $store: Store\u003cState\u003e\n }\n}\n```\n\n\n#### Bootstrap support for Vue.js 3/Next\n\nOur View [Bootstrap.vue](frontend/src/views/Bootstrap.vue) is based on the library `bootstrap-vue`, which brings in some nice Bootstrap CSS stylings \u0026 components.\n\nBut bootstrap-vue isn't compatible with Vue.js 3/Next: https://github.com/bootstrap-vue/bootstrap-vue/issues/5196 and it's unclear, when it's going to support it - or even if at all.\n\nWith the upgrade to Vue.js 3.x our `bootstrap-vue` based component view stopped working.\n\nThere's also another change: [Bootstrap 5.x is here to be the next evolutionary step - and it even dropped the need for JQuery](https://blog.getbootstrap.com/2020/06/16/bootstrap-5-alpha/).\n\nBut also Bootstrap 5.x isn't supported by `bootstrap-vue` right now. So let's try to use Bootstrap without it?!\n\nTherefore install bootstrap next (which - as like Vue.js - stands for the new version 5):\n\n```shell\nnpm i bootstrap@next\nnpm i @popperjs/core\n```\n\nSince Bootstrap 5 depends on `popperjs` for tooltips (see https://getbootstrap.com/docs/5.0/getting-started/introduction/#js), we also need to include it.\n\nWe can remove `\"bootstrap-vue\": \"2.21.2\"` and `\"jquery\": \"3.6.0\",` from our `package.json`.\n\nWe also need to import Bootstrap inside our [main.ts](frontend/src/main.ts):\n\n```javascript\nimport \"bootstrap/dist/css/bootstrap.min.css\";\nimport \"bootstrap\";\n```\n\nLet's try to use Bootstrap 5 inside our [Bootstrap.vue](frontend/src/views/Bootstrap.vue).\n\nAnd also inside the `Login.vue` and the `Protected.vue`. Using Bootstrap 5.x components without `bootstrap-vue` seems to be no problem (see docs how to use here: https://getbootstrap.com/docs/5.0/components/badge/).\n\n\n## Build and run with Docker\n\nIn the issue [jonashackt/spring-boot-vuejs/issues/25](https://github.com/jonashackt/spring-boot-vuejs/issues/25) the question on how to build and run our spring-boot-vuejs app with Docker. \n\nAs already stated in the issue there are multiple ways of doing this. One I want to outline here is a more in-depth variant, where you'll know exacltly what's going on behind the scenes.\n\nFirst we'll make use of [Docker's multi-stage build feature](https://docs.docker.com/develop/develop-images/multistage-build/) - in __the first stage__ we'll build our Spring Boot Vue.js app using our established Maven build process. Let's have a look into our [Dockerfile](Dockerfile):\n\n```dockerfile\n# Docker multi-stage build\n\n# 1. Building the App with Maven\nFROM maven:3-jdk-11\n\nADD . /springbootvuejs\nWORKDIR /springbootvuejs\n\n# Just echo so we can see, if everything is there :)\nRUN ls -l\n\n# Run Maven build\nRUN mvn clean install\n```\n\nA crucial part here is to add all necessary files into our Docker build context - but leaving out the underlying OS specific node libraries! As not leaving them out would lead [to errors like](https://stackoverflow.com/questions/37986800/node-sass-could-not-find-a-binding-for-your-current-environment?page=1\u0026tab=active#tab-top):\n\n```\nNode Sass could not find a binding for your current environment: Linux 64-bit with Node.js 11.x\n```\n\nTherefore we create a [.dockerignore](.dockerignore) file and leave out the directories `frontend/node_modules` \u0026 `frontend/node` completely using the `frontend/node*` configuration:\n\n```\n# exclude underlying OS specific node modules\nfrontend/node*\n\n# also leave out pre-build output folders\nfrontend/target\nbackend/target\n```\n\nWe also ignore the pre-build output directories.\n\nIn __the second stage__ of our [Dockerfile](Dockerfile) we use the build output of the first stage and prepare everything to run our Spring Boot powered Vue.js app later:\n\n```dockerfile\n# Just using the build artifact and then removing the build-container\nFROM openjdk:11-jdk\n\nMAINTAINER Jonas Hecht\n\nVOLUME /tmp\n\n# Add Spring Boot app.jar to Container\nCOPY --from=0 \"/springbootvuejs/backend/target/backend-0.0.1-SNAPSHOT.jar\" app.jar\n\nENV JAVA_OPTS=\"\"\n\n# Fire up our Spring Boot app by default\nENTRYPOINT [ \"sh\", \"-c\", \"java $JAVA_OPTS -Djava.security.egd=file:/dev/./urandom -jar /app.jar\" ]\n```\n\nNow we should everything prepared to run our Docker build:\n\n```\ndocker build . --tag spring-boot-vuejs:latest\n```\n\nThis build can take a while, since all Maven and NPM dependencies need to be downloaded for the build.\n\nWhen the build is finished, simply start a Docker container based on the newly build image and prepare the correct port to be bound to the Docker host for easier access later:\n\n```\ndocker run -d -p 8098:8098 --name myspringvuejs spring-boot-vuejs\n```\n\nHave a look into your running Docker containers with `docker ps` and you should see the new container:\n\n```\n$ docker ps\nCONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES\n745e854d7781 spring-boot-vuejs \"sh -c 'java $JAVA_O…\" 12 seconds ago Up 11 seconds 0.0.0.0:8098-\u003e8098/tcp myspringvuejs\n```\n\nIf you want to see the typical Spring Boot startup logs, just use `docker logs 745e854d7781 --follow`:\n\n```\n$ docker logs 745e854d7781 --follow\n\n . ____ _ __ _ _\n /\\\\ / ___'_ __ _ _(_)_ __ __ _ \\ \\ \\ \\\n( ( )\\___ | '_ | '_| | '_ \\/ _` | \\ \\ \\ \\\n \\\\/ ___)| |_)| | | | | || (_| | ) ) ) )\n ' |____| .__|_| |_|_| |_\\__, | / / / /\n =========|_|==============|___/=/_/_/_/\n :: Spring Boot :: (v2.1.2.RELEASE)\n\n2019-01-29 09:42:07.621 INFO 8 --- [ main] d.j.s.SpringBootVuejsApplication : Starting SpringBootVuejsApplication v0.0.1-SNAPSHOT on 745e854d7781 with PID 8 (/app.jar started by root in /)\n2019-01-29 09:42:07.627 INFO 8 --- [ main] d.j.s.SpringBootVuejsApplication : No active profile set, falling back to default profiles: default\n2019-01-29 09:42:09.001 INFO 8 --- [ main] .s.d.r.c.RepositoryConfigurationDelegate : Bootstrapping Spring Data repositories in DEFAULT mode.\n2019-01-29 09:42:09.103 INFO 8 --- [ main] .s.d.r.c.RepositoryConfigurationDelegate : Finished Spring Data repository scanning in 90ms. Found 1 repository interfaces.\n2019-01-29 09:42:09.899 INFO 8 --- [ main] trationDelegate$BeanPostProcessorChecker : Bean 'org.springframework.transaction.annotation.ProxyTransactionManagementConfiguration' of type [org.springframework.transaction.annotation.ProxyTransactionManagementConfiguration$$EnhancerBySpringCGLIB$$bb072d94] is not eligible for getting processed by all BeanPostProcessors (for example: not eligible for auto-proxying)\n2019-01-29 09:42:10.715 INFO 8 --- [ main] o.s.b.w.embedded.tomcat.TomcatWebServer : Tomcat initialized with port(s): 8098 (http)\n2019-01-29 09:42:10.765 INFO 8 --- [ main] o.apache.catalina.core.StandardService : Starting service [Tomcat]\n2019-01-29 09:42:10.765 INFO 8 --- [ main] org.apache.catalina.core.StandardEngine : Starting Servlet engine: [Apache Tomcat/9.0.14]\n2019-01-29 09:42:10.783 INFO 8 --- [ main] o.a.catalina.core.AprLifecycleListener : The APR based Apache Tomcat Native library which allows optimal performance in production environments was not found on the java.library.path: [/usr/java/packages/lib:/usr/lib/x86_64-linux-gnu/jni:/lib/x86_64-linux-gnu:/usr/lib/x86_64-linux-gnu:/usr/lib/jni:/lib:/usr/lib]\n2019-01-29 09:42:10.920 INFO 8 --- [ main] o.a.c.c.C.[Tomcat].[localhost].[/] : Initializing Spring embedded WebApplicationContext\n2019-01-29 09:42:10.921 INFO 8 --- [ main] o.s.web.context.ContextLoader : Root WebApplicationContext: initialization completed in 3209 ms\n2019-01-29 09:42:11.822 INFO 8 --- [ main] com.zaxxer.hikari.HikariDataSource : HikariPool-1 - Starting...\n2019-01-29 09:42:12.177 INFO 8 --- [ main] com.zaxxer.hikari.HikariDataSource : HikariPool-1 - Start completed.\n2019-01-29 09:42:12.350 INFO 8 --- [ main] o.hibernate.jpa.internal.util.LogHelper : HHH000204: Processing PersistenceUnitInfo [\n\tname: default\n\t...]\n2019-01-29 09:42:12.520 INFO 8 --- [ main] org.hibernate.Version : HHH000412: Hibernate Core {5.3.7.Final}\n2019-01-29 09:42:12.522 INFO 8 --- [ main] org.hibernate.cfg.Environment : HHH000206: hibernate.properties not found\n2019-01-29 09:42:12.984 INFO 8 --- [ main] o.hibernate.annotations.common.Version : HCANN000001: Hibernate Commons Annotations {5.0.4.Final}\n2019-01-29 09:42:13.894 INFO 8 --- [ main] org.hibernate.dialect.Dialect : HHH000400: Using dialect: org.hibernate.dialect.H2Dialect\n2019-01-29 09:42:15.644 INFO 8 --- [ main] o.h.t.schema.internal.SchemaCreatorImpl : HHH000476: Executing import script 'org.hibernate.tool.schema.internal.exec.ScriptSourceInputNonExistentImpl@64524dd'\n2019-01-29 09:42:15.649 INFO 8 --- [ main] j.LocalContainerEntityManagerFactoryBean : Initialized JPA EntityManagerFactory for persistence unit 'default'\n2019-01-29 09:42:16.810 INFO 8 --- [ main] o.s.s.concurrent.ThreadPoolTaskExecutor : Initializing ExecutorService 'applicationTaskExecutor'\n2019-01-29 09:42:16.903 WARN 8 --- [ main] aWebConfiguration$JpaWebMvcConfiguration : spring.jpa.open-in-view is enabled by default. Therefore, database queries may be performed during view rendering. Explicitly configure spring.jpa.open-in-view to disable this warning\n2019-01-29 09:42:17.116 INFO 8 --- [ main] o.s.b.a.w.s.WelcomePageHandlerMapping : Adding welcome page: class path resource [public/index.html]\n2019-01-29 09:42:17.604 INFO 8 --- [ main] o.s.b.a.e.web.EndpointLinksResolver : Exposing 2 endpoint(s) beneath base path '/actuator'\n2019-01-29 09:42:17.740 INFO 8 --- [ main] o.s.b.w.embedded.tomcat.TomcatWebServer : Tomcat started on port(s): 8098 (http) with context path ''\n2019-01-29 09:42:17.745 INFO 8 --- [ main] d.j.s.SpringBootVuejsApplication : Started SpringBootVuejsApplication in 10.823 seconds (JVM running for 11.485)\n```\n\nNow access your Dockerized Spring Boot powererd Vue.js app inside your Browser at [http://localhost:8098](http://localhost:8098). \n\nIf you have played enough with your Dockerized app, don't forget to stop (`docker stop 745e854d7781`) and remove (`docker rm 745e854d7781`) it in the end.\n\n\n#### Autorelease to Docker Hub on hub.docker.com\n\nWe also want to have the current version of our code build and released to https://hub.docker.com/. Therefore head to the repositories tab in Docker Hub and click `Create Repository`:\n\n![docker-hub-create-repo](screenshots/docker-hub-create-repo.png)\n\nAs the docs state, there are some config options to [setup automated builds](https://docs.docker.com/docker-hub/builds/).\n\nFinally, we should see our Docker images released on https://hub.docker.com/r/jonashackt/spring-boot-vuejs and could run this app simply by executing:\n\n```\ndocker run -p 8098:8098 jonashackt/spring-boot-vuejs:latest\n```\n\nThis pulls the latest `jonashackt/spring-boot-vuejs` image and runs our app locally:\n\n```\ndocker run -p 8098:8098 jonashackt/spring-boot-vuejs:latest\nUnable to find image 'jonashackt/spring-boot-vuejs:latest' locally\nlatest: Pulling from jonashackt/spring-boot-vuejs\n9a0b0ce99936: Pull complete\ndb3b6004c61a: Pull complete\nf8f075920295: Pull complete\n6ef14aff1139: Pull complete\n962785d3b7f9: Pull complete\ne275e7110d81: Pull complete\n0ce121b6a2ff: Pull complete\n71607a6adeb3: Pull complete\nDigest: sha256:4037576ba5f6c58ed067eeef3ab2870a9de8dd1966a5906cb3d36d0ad98fa541\nStatus: Downloaded newer image for jonashackt/spring-boot-vuejs:latest\n\n . ____ _ __ _ _\n /\\\\ / ___'_ __ _ _(_)_ __ __ _ \\ \\ \\ \\\n( ( )\\___ | '_ | '_| | '_ \\/ _` | \\ \\ \\ \\\n \\\\/ ___)| |_)| | | | | || (_| | ) ) ) )\n ' |____| .__|_| |_|_| |_\\__, | / / / /\n =========|_|==============|___/=/_/_/_/\n :: Spring Boot :: (v2.2.0.RELEASE)\n\n2019-11-02 16:15:37.967 INFO 7 --- [ main] d.j.s.SpringBootVuejsApplication : Starting SpringBootVuejsApplication v0.0.1-SNAPSHOT on aa490bc6ddf4 with PID 7 (/app.jar started by root in /)\n2019-11-02 16:15:37.973 INFO 7 --- [ main] d.j.s.SpringBootVuejsApplication : No active profile set, falling back to default profiles: default\n2019-11-02 16:15:39.166 INFO 7 --- [ main] .s.d.r.c.RepositoryConfigurationDelegate : Bootstrapping Spring Data repositories in DEFAULT mode.\n2019-11-02 16:15:39.285 INFO 7 --- [ main] .s.d.r.c.RepositoryConfigurationDelegate : Finished Spring Data repository scanning in 99ms. Found 1 repository interfaces.\n2019-11-02 16:15:39.932 INFO 7 --- [ main] trationDelegate$BeanPostProcessorChecker : Bean 'org.springframework.transaction.annotation.ProxyTransactionManagementConfiguration' of type [org.springframework.transaction.annotation.ProxyTransactionManagementConfiguration] is not eligible for getting processed by all BeanPostProcessors (for example: not eligible for auto-proxying)\n2019-11-02 16:15:40.400 INFO 7 --- [ main] o.s.b.w.embedded.tomcat.TomcatWebServer : Tomcat initialized with port(s): 8098 (http)\n2019-11-02 16:15:40.418 INFO 7 --- [ main] o.apache.catalina.core.StandardService : Starting service [Tomcat]\n...\n2019-11-02 16:15:54.048 INFO 7 --- [nio-8098-exec-1] o.s.web.servlet.DispatcherServlet : Initializing Servlet 'dispatcherServlet'\n2019-11-02 16:15:54.081 INFO 7 --- [nio-8098-exec-1] o.s.web.servlet.DispatcherServlet : Completed initialization in 32 ms\n```\n\n\nNow head over to [http://localhost:8098/](http://localhost:8098/) and see the app live :)\n\n\n# Run with JDK 8, 9 or 11 ff\n\nAs with Spring Boot, we can define the desired Java version simply by editing our backend's [pom.xml](backend/pom.xml): \n\n```\n\t\u003cproperties\u003e\n\t\t\u003cjava.version\u003e1.8\u003c/java.version\u003e\n\t\u003c/properties\u003e\n```\n\nIf you want to have `JDK9`, place a `\u003cjava.version\u003e9\u003c/java.version\u003e` or other versions just as you like to (see [this stackoverflow answer](https://stackoverflow.com/questions/54467287/how-to-specify-java-11-version-in-spring-spring-boot-pom-xml)).\n\nSpring Boot handles the needed `maven.compiler.release`, which tell's Java from version 9 on to build for a specific target.\n\nWe just set `1.8` as the baseline here, since if we set a newer version as the standard, builds on older versions then 8 will fail (see [this build log for example](https://travis-ci.org/jonashackt/spring-boot-vuejs/builds/547227298).\n\nAdditionally, we use GitHub Actions to run the Maven build on some mayor Java versions - have a look into the [build.yml](.github/workflows/build.yml) workflow:\n\n```yaml\njobs:\n build:\n runs-on: ubuntu-latest\n\n strategy:\n matrix:\n java-version: [ 8, 11, 15 ]\n```\n\n\n# Secure Spring Boot backend and protect Vue.js frontend\n\nSecuring parts of our application must consist of two parts: securing the Spring Boot backend - and reacting on that secured backend in the Vue.js frontend.\n\nhttps://spring.io/guides/tutorials/spring-security-and-angular-js/\n\nhttps://developer.okta.com/blog/2018/11/20/build-crud-spring-and-vue\n\nhttps://auth0.com/blog/vuejs2-authentication-tutorial/\n\nhttps://medium.com/@zitko/structuring-a-vue-project-authentication-87032e5bfe16\n\n\n\n\n\n## Secure the backend API with Spring Security\n\nhttps://spring.io/guides/tutorials/spring-boot-oauth2\n\nhttps://spring.io/guides/gs/securing-web/\n\nhttps://www.baeldung.com/rest-assured-authentication\n\nNow let's focus on securing our Spring Boot backend first! Therefore we introduce a new RESTful resource, that we want to secure specifically:\n\n\n +---+ +---+ +---+\n | | /api/hello | | /api/user | | /api/secured\n +---+ +---+ +---+\n | | |\n +-----------------------------------------------------------------------+\n | |\n | |\n | |\n | |\n | |\n | Spring Boot backend |\n | |\n +-----------------------------------------------------------------------+\n\n\n#### Configure Spring Security\n\nFirst we add a new REST resource `/secured` inside our `BackendController we want to secure - and use in a separate frontend later:\n\n```\n @GetMapping(path=\"/secured\")\n public @ResponseBody String getSecured() {\n LOG.info(\"GET successfully called on /secured resource\");\n return SECURED_TEXT;\n }\n```\n\nWith Spring it is relatively easy to secure our API. Let's add `spring-boot-starter-security` to our [pom.xml](backend/pom.xml):\n\n```xml\n\t\t\u003c!-- Secure backend API --\u003e\n\t\t\u003cdependency\u003e\n\t\t\t\u003cgroupId\u003eorg.springframework.boot\u003c/groupId\u003e\n\t\t\t\u003cartifactId\u003espring-boot-starter-security\u003c/artifactId\u003e\n\t\t\u003c/dependency\u003e\n\n\t\t\u003cdependency\u003e\n\t\t\t\u003cgroupId\u003eorg.springframework.security\u003c/groupId\u003e\n\t\t\t\u003cartifactId\u003espring-security-test\u003c/artifactId\u003e\n\t\t\t\u003cscope\u003etest\u003c/scope\u003e\n\t\t\u003c/dependency\u003e\n```\n\nAlso create a new @Configuration annotated class called [WebSecurityConfiguration.class](backend/src/main/java/de/jonashackt/springbootvuejs/configuration/WebSecurityConfiguration.java):\n\n```java\npackage de.jonashackt.springbootvuejs.configuration;\n\nimport org.springframework.context.annotation.Configuration;\nimport org.springframework.security.config.annotation.authentication.builders.AuthenticationManagerBuilder;\nimport org.springframework.security.config.annotation.web.builders.HttpSecurity;\nimport org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;\nimport org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;\nimport org.springframework.security.config.http.SessionCreationPolicy;\n\n@Configuration\n@EnableWebSecurity\npublic class WebSecurityConfiguration extends WebSecurityConfigurerAdapter {\n\n @Override\n protected void configure(HttpSecurity http) throws Exception {\n\n http\n .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS) // No session will be created or used by spring security\n .and()\n .httpBasic()\n .and()\n .authorizeRequests()\n .antMatchers(\"/api/hello\").permitAll()\n .antMatchers(\"/api/user/**\").permitAll() // allow every URI, that begins with '/api/user/'\n .antMatchers(\"/api/secured\").authenticated()\n .anyRequest().authenticated() // protect all other requests\n .and()\n .csrf().disable(); // disable cross site request forgery, as we don't use cookies - otherwise ALL PUT, POST, DELETE will get HTTP 403!\n }\n\n @Override\n protected void configure(AuthenticationManagerBuilder auth) throws Exception {\n auth.inMemoryAuthentication()\n .withUser(\"foo\").password(\"{noop}bar\").roles(\"USER\");\n }\n}\n\n```\n\nUsing a simple `http.httpBasic()` we configure to provide a Basic Authentication for our secured resources.\n\nTo deep dive into the Matcher configurations, have a look into https://docs.spring.io/spring-security/site/docs/current/reference/htmlsingle/#jc-authorize-requests\n\n#### Be aware of CSRF!\n\n__BUT:__ Be aware of the CSRF (cross site request forgery) part! The defaults will render a [HTTP 403 FORBIDDEN for any HTTP verb that modifies state (PATCH, POST, PUT, DELETE)](https://docs.spring.io/spring-security/site/docs/current/reference/htmlsingle/#csrf-configure):\n\n\u003e by default Spring Security’s CSRF protection will produce an HTTP 403 access denied.\n\nFor now we can disable the default behavior with `http.csrf().disable()`\n\n\n#### Testing the secured Backend\n\nSee https://www.baeldung.com/rest-assured-authentication\n\nInside our [BackendControllerTest](backend/src/test/java/de/jonashackt/springbootvuejs/controller/BackendControllerTest.java) we should check, whether our API reacts with correct HTTP 401 UNAUTHORIZED, when called without our User credentials:\n\n```\n\t@Test\n\tpublic void secured_api_should_react_with_unauthorized_per_default() {\n\n\t\tgiven()\n\t\t.when()\n\t\t\t.get(\"/api/secured\")\n\t\t.then()\n\t\t\t.statusCode(HttpStatus.SC_UNAUTHORIZED);\n\t}\n```\n\nUsing `rest-assured` we can also test, if one could access the API correctly with the credentials included:\n\n```\n\t@Test\n\tpublic void secured_api_should_give_http_200_when_authorized() {\n\n\t\tgiven()\n\t\t\t.auth().basic(\"foo\", \"bar\")\n\t\t.when()\n\t\t\t.get(\"/api/secured\")\n\t\t.then()\n\t\t\t.statusCode(HttpStatus.SC_OK)\n\t\t\t.assertThat()\n\t\t\t\t.body(is(equalTo(BackendController.SECURED_TEXT)));\n\t}\n```\n\nThe crucial point here is to use the `given().auth().basic(\"foo\", \"bar\")` configuration to inject the correct credentials properly.\n\n\n\n#### Configure credentials inside application.properties and environment variables\n\nDefining the users (and passwords) inside code (like our [WebSecurityConfiguration.class](backend/src/main/java/de/jonashackt/springbootvuejs/configuration/WebSecurityConfiguration.java)) that should be given access to our application is a test-only practice!\n\nFor our super simple example application, we could have a solution quite similar - but much more safe: If we would be able to extract this code into configuration and later use Spring's powerful mechanism of overriding these configuration with environment variables, we could then store them safely inside our deployment pipelines settings, that are again secured by another login - e.g. as Heroku Config Vars.\n\nTherefore the first step would be to delete the following code:\n\n```\n@Override\n protected void configure(AuthenticationManagerBuilder auth) throws Exception {\n auth.inMemoryAuthentication()\n .withUser(\"foo\").password(\"{noop}bar\").roles(\"USER\");\n }\n```\n\nand add the following configuration to our [application.properties](backend/src/main/resources/application.properties):\n\n```\nspring.security.user.name=sina\nspring.security.user.password=miller\n```\n\nRunning our tests using the old credentials should fail now. Providing the newer one, the test should go green again.\n\nNow introducing environment variables to the game could also be done locally inside our IDE for example. First change the test `secured_api_should_give_http_200_when_authorized` again and choose some new credentials like user `maik` with pw `meyer`.\n\nDon't change the `application.properties` right now - use your IDE's run configuration and insert two environment variables:\n\n```\nSPRING_SECURITY_USER_NAME=maik\nSPRING_SECURITY_USER_PASSWORD=meyer\n```\n\nNow the test should run green again with this new values.\n\n\n## Protect parts of Vue.js frontend\n\nNow that we have secured a specific part of our backend API, let's also secure a part of our Vue.js frontend:\n\n +-----------------------------------------------------------------------+\n | Vue.js frontend |\n | |\n | +-----------------+ +-----------------+ +-----------------+ |\n | | | | | | | |\n | | | | | | Protected | |\n | | | | | | | |\n | | | | | | Vue.js View | |\n | | | | | | | |\n | +-----------------+ +-----------------+ +-----------------+ |\n | |\n +-----------------------------------------------------------------------+\n\n +---+ +---+ +---+\n | | /api/hello | | /api/user | | /api/secured\n +---+ +---+ +---+\n | | |\n +-----------------------------------------------------------------------+\n | |\n | |\n | |\n | |\n | |\n | |\n | Spring Boot backend |\n +-----------------------------------------------------------------------+\n\n\n#### Create a new Vue Login component\n\nAs there is already a secured Backend API, we also want to have a secured frontend part. \n\nEvery solution you find on the net seems to be quite overengineered for the \"super-small-we-have-to-ship-today-app\". Why should we bother with a frontend auth store like vuex at the beginning? Why start with OAuth right up front? These could be easily added later on!\n\nThe simplest solution one could think about how to secure our frontend, would be to create a simple Login.vue component, that simply accesses the `/api/secured` resource every time the login is used.\n\nTherefore we use [Vue.js conditionals](https://vuejs.org/v2/guide/conditional.html) to show something on our new [Login.vue](frontend/src/components/Login.vue):\n\n```\n\u003ctemplate\u003e\n \u003cdiv class=\"protected\" v-if=\"loginSuccess\"\u003e\n \u003ch1\u003e\u003cb-badge variant=\"success\"\u003eAccess to protected site granted!\u003c/b-badge\u003e\u003c/h1\u003e\n \u003ch5\u003eIf you're able to read this, you've successfully logged in.\u003c/h5\u003e\n \u003c/div\u003e\n \u003cdiv class=\"unprotected\" v-else-if=\"loginError\"\u003e\n \u003ch1\u003e\u003cb-badge variant=\"danger\"\u003eYou don't have rights here, mate :D\u003c/b-badge\u003e\u003c/h1\u003e\n \u003ch5\u003eSeams that you don't have access rights... \u003c/h5\u003e\n \u003c/div\u003e\n \u003cdiv class=\"unprotected\" v-else\u003e\n \u003ch1\u003e\u003cb-badge variant=\"info\"\u003ePlease login to get access!\u003c/b-badge\u003e\u003c/h1\u003e\n \u003ch5\u003eYou're not logged in - so you don't see much here. Try to log in:\u003c/h5\u003e\n\n \u003cform @submit.prevent=\"callLogin()\"\u003e\n \u003cinput type=\"text\" placeholder=\"username\" v-model=\"user\"\u003e\n \u003cinput type=\"password\" placeholder=\"password\" v-model=\"password\"\u003e\n \u003cb-btn variant=\"success\" type=\"submit\"\u003eLogin\u003c/b-btn\u003e\n \u003cp v-if=\"error\" class=\"error\"\u003eBad login information\u003c/p\u003e\n \u003c/form\u003e\n \u003c/div\u003e\n\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport api from './backend-api'\n\nexport default {\n name: 'login',\n\n data () {\n return {\n loginSuccess: false,\n loginError: false,\n user: '',\n password: '',\n error: false\n }\n }\n}\n\n\u003c/script\u003e\n``` \n\nFor now the conditional is only handled by two boolean values: `loginSuccess` and `loginError`.\n\nTo bring those to life, we implement the `callLogin()` method:\n\n```\n,\n methods: {\n callLogin() {\n api.getSecured(this.user, this.password).then(response =\u003e {\n console.log(\"Response: '\" + response.data + \"' with Statuscode \" + response.status)\n if(response.status == 200) {\n this.loginSuccess = true\n }\n }).catch(error =\u003e {\n console.log(\"Error: \" + error)\n this.loginError = true\n })\n }\n }\n```\n\nWith this simple implementation, the Login component asks the Spring Boot backend, if a user is allowed to access the `/api/secured` resource. The [backend-api.js](frontend/src/components/backend-api.js) provides an method, which uses axios' Basic Auth feature:\n\n```\n getSecured(user, password) {\n return AXIOS.get(`/secured/`,{\n auth: {\n username: user,\n password: password\n }});\n }\n``` \n\nNow the Login component works for the first time:\n\n![secure-spring-vue-simple-login](screenshots/secure-spring-vue-simple-login.gif)\n\n\n\n\n#### Protect multiple Vue.js components\n\nNow we have a working Login component. Now let's create a new `Protected.vue` component, since we want to have something that's only accessible, if somebody has logged in correctly:\n\n```\n\u003ctemplate\u003e\n \u003cdiv class=\"protected\" v-if=\"loginSuccess\"\u003e\n \u003ch1\u003e\u003cb-badge variant=\"success\"\u003eAccess to protected site granted!\u003c/b-badge\u003e\u003c/h1\u003e\n \u003ch5\u003eIf you're able to read this, you've successfully logged in.\u003c/h5\u003e\n \u003c/div\u003e\n \u003cdiv class=\"unprotected\" v-else\u003e\n \u003ch1\u003e\u003cb-badge variant=\"info\"\u003ePlease login to get access!\u003c/b-badge\u003e\u003c/h1\u003e\n \u003ch5\u003eYou're not logged in - so you don't see much here. Try to log in:\u003c/h5\u003e\n \u003crouter-link :to=\"{ name: 'Login' }\" exact target=\"_blank\"\u003eLogin\u003c/router-link\u003e\n \u003c/div\u003e\n\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport api from './backend-api'\n\nexport default {\n name: 'protected',\n\n data () {\n return {\n loginSuccess: false,\n error: false\n }\n },\n methods: {\n //\n }\n}\n\n\u003c/script\u003e\n```\n\nThis component should only be visible, if the appropriate access was granted at the Login. Therefore we need to solve 2 problems:\n\n* __Store the login state__\n* __Redirect user from Protected.vue to Login.vue, if not authenticated before__\n\n\n\n#### Store login information with vuex\n\nThe super dooper simple solution would be to simply use `LocalStorage`. But with [vuex](https://github.com/vuejs/vuex) there is a centralized state management in Vue.js, which is pretty popular. So we should invest some time to get familiar with it. There's a full guide available: https://vuex.vuejs.org/guide/ and a great introductory blog post here: https://pusher.com/tutorials/authentication-vue-vuex\n\nYou could also initialize a new Vue.js project with Vue CLI and mark the `vuex` checkbox. But we try to extend the current project here.\n\nFirst we add [the vuex dependency](https://www.npmjs.com/package/vuex) into our [package.json](frontend/package.json):\n\n```\n...\n \"vue\": \"^2.6.10\",\n \"vue-router\": \"^3.0.6\",\n \"vuex\": \"^3.1.1\"\n },\n```\n\n\u003e There are four things that go into a Vuex module: the initial [state](https://vuex.vuejs.org/guide/state.html), [getters](https://vuex.vuejs.org/guide/getters.html), [mutations](https://vuex.vuejs.org/guide/mutations.html) and [actions](https://vuex.vuejs.org/guide/actions.html)\n\n#### Define the vuex state\n\nTo implement them, we create a new [store.js](frontend/src/store.js) file:\n\n```\nimport Vue from 'vue'\nimport Vuex from 'vuex'\n\nVue.use(Vuex)\n\nexport default new Vuex.Store({\n state: {\n loginSuccess: false,\n loginError: false,\n userName: null\n },\n mutations: {\n\n },\n actions: {\n\n },\n getters: {\n \n }\n})\n\n``` \n\nWe only have an initial state here, which is that a login could be successful or not - and there should be a `userName`.\n\n\n#### Define a vuex action login() and the mutations login_success \u0026 login_error\n\nThen we have a look onto __vuex actions: They provide a way to commit mutations to the vuex store.__ \n\nAs our app here is super simple, we only have one action to implement here: `login`. We omit the `logout` and `register` actions, because we only define one admin user in the Spring Boot backend right now and don't need an implemented logout right now. Both could be implemented later!\n\nWe just shift our logic on how to login a user from the `Login.vue` to our vuex action method:\n\n```\n mutations: {\n login_success(state, name){\n state.loginSuccess = true\n state.userName = name\n\n },\n login_error(state){\n state.loginError = true\n state.userName = name\n }\n },\n actions: {\n async login({commit}, user, password) {\n api.getSecured(user, password)\n .then(response =\u003e {\n console.log(\"Response: '\" + response.data + \"' with Statuscode \" + response.status);\n if(response.status == 200) {\n // place the loginSuccess state into our vuex store\n return commit('login_success', name);\n }\n }).catch(error =\u003e {\n console.log(\"Error: \" + error);\n // place the loginError state into our vuex store\n commit('login_error', name);\n return Promise.reject(\"Invald credentials!\")\n })\n }\n },\n```\n\nInstead of directly setting a boolean to a variable, we `commit` a mutation to our store if the authentication request was successful or unsuccessful. We therefore implement two simple mutations: `login_success` \u0026 `login_error`\n\n\n#### Last but not least: define getters for the vuex state\n\nTo be able to access vuex state from within other components, we need to implement getters inside our vuex store. As we only want some simple info, we need the following getters:\n\n```\n getters: {\n isLoggedIn: state =\u003e state.loginSuccess,\n hasLoginErrored: state =\u003e state.loginError\n }\n```\n\n#### Use vuex Store inside the Login component and forward to Protected.vue, if Login succeeded\n\nInstead of directly calling the auth endpoint via axios inside our Login component, we now want to use our vuex store and its actions instead. Therefore we don't even need to import the [store.js](frontend/src/store.js) inside our `Login.vue`, we can simply access it through `$store`. Thy is that? Because we already did that inside our [main.js](frontend/src/main.js):\n\n```\nimport store from './store'\n\n...\n\nnew Vue({\n router,\n store,\n render: h =\u003e h(App)\n}).$mount('#app')\n```\n\nWith that configuration `store` and `router` are accessible from within every Vue component with the `$` prefixed :) \n\nIf we have a look into our `Login.vue` we see that in action:\n\n```\ncallLogin() {\n this.$store.dispatch('login', { user: this.user, password: this.password})\n .then(() =\u003e this.$router.push('/Protected'))\n .catch(error =\u003e {\n this.error.push(error)\n })\n }\n```\n\nHere we access our vuex store action `login` and issue a login request to our Spring Boot backend. If this succeeds, we use the Vue `$router` to forward the user to our `Protected.vue` component.\n\n\n#### Redirect user from Protected.vue to Login.vue, if not authenticated before\n\nNow let's enhance our [router.js](frontend/src/router.js) slightly. We use the Vue.js routers' [meta field](https://router.vuejs.org/guide/advanced/meta.html) feature to check, whether a user is loggin in already and therefore should be able to access our Protected component with the URI `/protected` :\n\n```\n {\n path: '/protected',\n component: Protected,\n meta: { \n requiresAuth: true \n }\n },\n``` \n\nWe also add a new behavior to our router, that checks if it requires authentication every time a route is accessed. If so, it will redirect to our Login component:\n\n```\nrouter.beforeEach((to, from, next) =\u003e {\n if (to.matched.some(record =\u003e record.meta.requiresAuth)) {\n // this route requires auth, check if logged in\n // if not, redirect to login page.\n if (!store.getters.isLoggedIn) {\n next({\n path: '/login'\n })\n } else {\n next();\n }\n } else {\n next(); // make sure to always call next()!\n }\n});\n```\n\nNow if one clicks onto `Protected` and didn't login prior, our application redirects to `Login` automatically:\n\n![secure-spring-redirect-to-login](screenshots/secure-spring-redirect-to-login.gif)\n\nWith this redirect, we also don't need the part with `\u003cdiv class=\"protected\" v-if=\"loginSuccess\"\u003e` inside our Login.vue, since in case of a successful login, the user is directly redirected to the Protected.vue.\n\n\n## Check auth state at secured backend endpoints\n\nWe're now already where we wanted to be at the first place: Our Spring Boot backend has a secured API endpoint, which works with simple user/password authentication. And our Vue.js frontend uses this endpoint to do a Login and protect the `Protected` component, if the user didn't log in before. The login state is held in the frontend, using the `vuex` store.\n\nNow if we want to go a step ahead and call a secured API endpoint in the backend from within our `Protected` frontend component, we need to fully store the credentials inside our `vuex` store, so we could access our secured resource\n\n\n +-----------------------------------------------------------------------+\n | Vue.js frontend |\n | +----------------------------------------+ |\n | | vuex store | |\n | +----------------------------------------+ |\n | | | |\n | +-----------------+ +-----------------+ +-----------------+ |\n | | | | | | | |\n | | | | Login.vue | | Protected | |\n | | | | | | | |\n | +-----------------+ +-----------------+ +-----------------+ |\n | | | |\n +-------------------------------------------|---------------|-----------+\n |-------------| | \n +---+ +---+ +---+\n | | /api/hello | | /api/user | | /api/secured\n +---+ +---+ +---+\n | | |\n +-----------------------------------------------------------------------+\n | |\n | |\n | |\n | |\n | |\n | |\n | Spring Boot backend |\n +-----------------------------------------------------------------------+\n\nTherefore we enhance our [store.js](frontend/src/store.js):\n\n```\nexport default new Vuex.Store({\n state: {\n loginSuccess: false,\n loginError: false,\n userName: null,\n userPass: null,\n response: []\n },\n mutations: {\n login_success(state, payload){\n state.loginSuccess = true;\n state.userName = payload.userName;\n state.userPass = payload.userPass;\n },\n ...\n },\n actions: {\n login({commit}, {user, password}) {\n ...\n // place the loginSuccess state into our vuex store\n commit('login_success', {\n userName: user,\n userPass: password\n });\n ...\n getters: {\n isLoggedIn: state =\u003e state.loginSuccess,\n hasLoginErrored: state =\u003e state.loginError,\n getUserName: state =\u003e state.userName,\n getUserPass: state =\u003e state.userPass\n }\n```\n\n\u003e Be sure to use the current way to define and [interact with vuex mutations](https://vuex.vuejs.org/guide/mutations.html). Lot's of blog posts are using an old way of committing multiple parameters like `commit('auth_success', token, user)`. This DOES NOT work anymore. Only the first parameter will be set, the others are lost! \n\nNow inside our [Protected.vue](frontend/src/components/Protected.vue), we can use the stored credentials to access our `/secured` endpoint:\n\n```\n\u003cscript\u003e\n import api from './backend-api'\n import store from './../store'\n\nexport default {\n name: 'protected',\n\n data () {\n return {\n backendResponse: '',\n securedApiCallSuccess: false,\n errors: null\n }\n },\n methods: {\n getSecuredTextFromBackend() {\n api.getSecured(store.getters.getUserName, store.getters.getUserPass)\n .then(response =\u003e {\n console.log(\"Response: '\" + response.data + \"' with Statuscode \" + response.status);\n this.securedApiCallSuccess = true;\n this.backendResponse = response.data;\n })\n .catch(error =\u003e {\n console.log(\"Error: \" + error);\n this.errors = error;\n })\n }\n }\n}\n```\n\nFeel free to create a nice GUI based on `securedApiCallSuccess`, `backendResponse` and `errors` :)\n\n\n\n# Links\n\nNice introductory video: https://www.youtube.com/watch?v=z6hQqgvGI4Y\n\nExamples: https://vuejs.org/v2/examples/\n\nEasy to use web-based Editor: https://vuejs.org/v2/examples/\n","funding_links":[],"categories":["Java","HarmonyOS","Educational GitHub Projects"],"sub_categories":["Windows Manager"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjonashackt%2Fspring-boot-vuejs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjonashackt%2Fspring-boot-vuejs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjonashackt%2Fspring-boot-vuejs/lists"}