Before we look at the generated code, let's talk about the technical stack. We looked at Vue.js in Chapter 2, Getting Started with JHipster, but let's recap.
Vue.js (https://vuejs.org) is a progressive JavaScript framework. It is open source and community-driven. Vue.js borrows concepts from both AngularJS (older version) and React. It has a similar syntax to AngularJS, but has the speed and performance of React. Like React, Vue.js is also a UI framework that can be combined with other libraries to build single-page applications. Vue.js can be written in JavaScript or TypeScript and can be used to write small web components or full-fledged SPA applications.
For example, the following is a simple Vue.js app:
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'Hello Vue Hipster!'
}
})
</script>
</body>
</html>
Generally, for Vue.js components, we will use vue as the file extension.
Similar to React, Vue also uses the virtual DOM concept to improve rendering efficiency. It also provides composable components and maintains its focus on rendering of the view layer, while other concepts such as routing and state management are left to other libraries. This is the major difference between React/Vue and Angular, where the latter is a full-fledged MVVM framework.
Due to this, when building Vue applications, we would always have to add a few more libraries for things such as state management and routing. Unlike React, Vue provides official libraries for state management and routing.