Vue.js + Spring Boot + H2 Database [embedded mode] example | Spring Data JPA + RestAPIs CRUD example

H2 database is an open source that provides JDBC API to connect to Java applications. It also provides browser based console for convenient use. In this Vue.js Spring Boot tutorial, we show you Vue.js Http Client & Spring Boot Server example that uses Spring JPA to do CRUD with H2 Database and Vue.js as a front-end technology to make request and receive response.

Related Posts:
Integrate H2 database with SpringBoot & Spring JPA in Embedded mode
Vue Router example – with Nav Bar, Dynamic Route & Nested Routes

[Continue reading…] “Vue.js + Spring Boot + H2 Database [embedded mode] example | Spring Data JPA + RestAPIs CRUD example”

Vue.js + Spring Boot example | Spring Data JPA + REST + MariaDB CRUD

In this Vue.js Spring Boot tutorial, we show you Vue.js Http Client & Spring Boot Server example that uses Spring JPA to do CRUD with MariaDB and Vue.js as a front-end technology to make request and receive response.

Related Posts:
MariaDB – How to use Spring JPA MariaDB | Spring Boot
Vue Router example – with Nav Bar, Dynamic Route & Nested Routes

[Continue reading…] “Vue.js + Spring Boot example | Spring Data JPA + REST + MariaDB CRUD”

Vue.js + Spring Boot example | Spring Data Cassandra + RestApi CRUD example

In this Vue.js Spring Boot tutorial, we show you Vue.js Http Client & Spring Boot Server example that uses Spring Data to do CRUD with Cassandra and Vue.js as a front-end technology to make request and receive response.

Related Posts:
How to start Spring Data Cassandra with SpringBoot
Vue Router example – with Nav Bar, Dynamic Route & Nested Routes

[Continue reading…] “Vue.js + Spring Boot example | Spring Data Cassandra + RestApi CRUD example”

Spring Boot + Vue.js example | Spring Data MongoDB + RestApi CRUD

In this Spring Boot Vue.js tutorial, we show you Vue.js Http Client & Spring Boot Server example that uses Spring Data to do CRUD with MongoDB and Vue.js as a front-end technology to make request and receive response.

Related Posts:
Spring MongoOperations to access MongoDB
How to use SpringData MongoRepository to interact with MongoDB
How to build SpringBoot MongoDb RestfulApi

Vue Router example – with Nav Bar, Dynamic Route & Nested Routes

[Continue reading…] “Spring Boot + Vue.js example | Spring Data MongoDB + RestApi CRUD”

Spring Boot + Vue.js example | Spring Data JPA + REST + MySQL CRUD

In this tutorial, we show you Vue.js Http Client & Spring Boot Server example that uses Spring JPA to do CRUD with MySQL and Vue.js as a front-end technology to make request and receive response.

Related Posts:
How to use Spring JPA MySQL | Spring Boot
Vue Router example – with Nav Bar, Dynamic Route & Nested Routes

[Continue reading…] “Spring Boot + Vue.js example | Spring Data JPA + REST + MySQL CRUD”

Spring Boot + Vue.js example | Spring Data JPA + REST + PostgreSQL CRUD

In this tutorial, we show you Vue.js Http Client & Spring Boot Server example that uses Spring JPA to do CRUD with PostgreSQL and Vue.js as a front-end technology to make request and receive response.

Related Posts:
How to use Spring JPA with PostgreSQL | Spring Boot
Vue Router example – with Nav Bar, Dynamic Route & Nested Routes

[Continue reading…] “Spring Boot + Vue.js example | Spring Data JPA + REST + PostgreSQL CRUD”

Vue Router example – with Nav Bar, Dynamic Route & Nested Routes

Vue Router deeply integrates with Vue.js that we can use to build single-page Vue Application in simple way. In this tutorial, we’re gonna look at a Vue Router example that allows us to navigate among tabs and dynamically show item details from a item list with Nav bar, Dynamic Route and Nested Routes.

More Practice:
Spring Boot + Vue.js example | Spring Data JPA + REST + PostgreSQL CRUD
Spring Boot + Vue.js example | Spring Data JPA + REST + MySQL CRUD

[Continue reading…] “Vue Router example – with Nav Bar, Dynamic Route & Nested Routes”

Vue.js Firestore example – Vue.js CRUD serverless with Firebase Cloud Firestore

Cloud Firestore helps us store data in the cloud. It supports offline mode so our app will work fine (write, read, listen to, and query data) whether device has internet connection or not, it automatically fetches changes from our database to Firebase Server. We can structure data in our ways to improve querying and fetching capabilities. This tutorial shows you a Vue.js app that can do Firebase Firestore CRUD Operations.

Related Post: Vue.js CRUD example – a simple Note App

[Continue reading…] “Vue.js Firestore example – Vue.js CRUD serverless with Firebase Cloud Firestore”

Vue.js Firebase Database example – CRUD Operations

In previous post, we had built a simple Note App that represents Vue.js CRUD example with Vue CLI 3 for building project. This tutorial shows you how to integrate the Vue.js Project with Firebase Database and do CRUD operations.

Related Post: Vue.js CRUD example – a simple Note App

[Continue reading…] “Vue.js Firebase Database example – CRUD Operations”

Angular Built-in Pipe Uppercase Pipe + Lowercase Pipe + Titlecase Pipe Example

In the tutorial, we show how to work with Angular Built-in Uppercase, Lowercase and Titlecase pipes.

Related posts:
Angular 6 KeyValue Pipe
Angular Built-in DatePipe
Angular Custom Pipe | Pure & Impure Pipes
Angular Built-in SlicePipe

Related pages:

[Continue reading…] “Angular Built-in Pipe Uppercase Pipe + Lowercase Pipe + Titlecase Pipe Example”

Vue.js CRUD example – a simple Note App

In this tutorial, we’re gonna create a simple Note App that represents Vue.js CRUD example with Vue CLI 3 for building project.

More Practice:
Vue.js Firebase Database example – CRUD Operations
Vue.js Firestore example – Vue.js CRUD serverless with Firebase Cloud Firestore

[Continue reading…] “Vue.js CRUD example – a simple Note App”

Angular built-in Slice Pipe | Array SlicePipe + String SlicePipe Example

In the tutorial, we show how to work with Angular impure built-in SlicePipe to create a new Array or String containing a subset of the elements.

Related posts:
Angular Built-in KeyValue Pipe
Angular Built-in DatePipe
Angular Custom Pipe | Pure Pipe + Impure Pipe
Angular 6 Service – with Observable Data for Asynchronous Operation

Related pages:

[Continue reading…] “Angular built-in Slice Pipe | Array SlicePipe + String SlicePipe Example”

Angular 6 Custom Pipe | with Parameterizing a pipe | Angular Pure pipes + Impure pipes

In the tutorial, we show how to create an Angular Custom Pipe with Angular Pure Pipe, and Angular Impure Pipe.

Related posts:
Angular Built-in DatePipe Example | Pre-defined Format + Timezone + Locale + Custom Format
Angular 6 – KeyValue Pipe – *ngFor Loop through Object, Map example
How to Integrate Bootstrap with Angular (Angular 6)
Angular 6 Component – How to create & integrate New Angular 6 Component
Angular NgFor Repeater Directive – Loop over a Collection (Angular 6)

Related pages:

[Continue reading…] “Angular 6 Custom Pipe | with Parameterizing a pipe | Angular Pure pipes + Impure pipes”

Angular Built-in DatePipe Example | Pre-defined Format + Timezone + Locale + Custom Format

In the tutorial, we show how to work with Angular Built-in DatePipe to display Date object in UI.

Related posts:
Angular 6 – KeyValue Pipe – *ngFor Loop through Object, Map example
Angular 6 Service – with Observable Data for Asynchronous Operation
Angular 6 Routing/Navigation – with Angular Router Service
Angular 6 Template Driven Form – NgModel for Two-Way Data Binding

Related pages:

[Continue reading…] “Angular Built-in DatePipe Example | Pre-defined Format + Timezone + Locale + Custom Format”

Angular 6 – KeyValue Pipe – *ngFor Loop through Object, Map example

Angular 6.1 provides a new KeyValue pipe transforms Object or Map into an array of key value pairs. In the tutorial, we will guide how to iterate through Object, Map with KeyValue pipe.

Related posts:
Angular 6 Service – with Observable Data for Asynchronous Operation
Angular 6 Routing/Navigation – with Angular Router Service
Angular 6 Template Driven Form – NgModel for Two-Way Data Binding

Related pages:

[Continue reading…] “Angular 6 – KeyValue Pipe – *ngFor Loop through Object, Map example”

Angular 6 WebSocket example with Spring Boot WebSocket Server | SockJS + STOMP

The WebSocket protocol provides new capability for web applications: full-duplex, two-way communication. So in the system where the client and server need to exchange data at high frequency and with low latency, WebSocket is the best solution. In this tutorial, we’re gonna create an Angular 6 WebSocket Client to send/receive message with a Spring Boot Server.

[Continue reading…] “Angular 6 WebSocket example with Spring Boot WebSocket Server | SockJS + STOMP”

Angular 6 + Node.js + Amazon S3 | Upload Files + Download Files + List Files | using Express RestAPI, Multer, AWS-SDK

In the tutorial, we show how to use Angular 6 Client to download files/ upload files from Amazon S3 by Node.js RestAPIs server using Multer middleware and AWS-SDK.

Related posts:
Node.js RestAPIs Download File from Amazon S3
Node.js RestAPIs Upload file to Amazon S3
Node.js RestAPIs – Angular 6 HttpClient – Get/Post/Put/Delete requests + Bootstrap 4
Amazon S3 – Upload/download large files to S3 with SpringBoot Amazon S3

Related pages:

[Continue reading…] “Angular 6 + Node.js + Amazon S3 | Upload Files + Download Files + List Files | using Express RestAPI, Multer, AWS-SDK”

Angular 6 NGXS example – Angular State Management

NGXS Store is a state management solution for Angular apps that helps us build applications by working around our app’s data (state). In this tutorial, we’re gonna look at how to work with NGXS Store, custom Actions, handle dispatched Actions with @Action and @Select/@Selector decorator. Then we will practice to understand all of them in a simple practical Angular 6 example.

Related Posts:
– NgRx: Angular 6 NgRx Store example – Angular State Management
– State Management with Redux:

– Reactive Streams:

[Continue reading…] “Angular 6 NGXS example – Angular State Management”