How To Use Java And Vue.js Together?

Introduction

Java and Vue.js form a strong full stack combination. Java handles the backend. Vue.js handles the frontend. Java manages data, security, and business rules. Vue.js manages the user interface and user interaction. Developers use Java frameworks like Spring Boot to build REST APIs. Vue.js consumes these APIs through HTTP calls. This approach follows a clear client server model. It improves scalability. It improves maintainability. A Java Online Course helps learners build strong backend development skills using real-time projects and industry tools. In this guide, you will learn how to use Java and Vue.js together. You will understand architecture, API creation, frontend integration, authentication, and deployment.

System Architecture

Java runs on the server. Vue.js runs in the browser. The browser sends HTTP requests. The Java backend processes the request. The backend sends JSON responses. Vue.js updates the UI using reactive data binding.

The architecture usually follows this pattern:

Frontend → REST API → Service Layer → Repository Layer → Database

Spring Boot handles API exposure. Vue.js handles rendering and state updates. JSON is the communication format here.

Setting Up the Java Backend

Most projects use Spring Boot for backend development. Spring Boot simplifies configuration. It provides embedded Tomcat and also offers support for REST.

Step 1: Creating Spring Boot Project

Use Spring Initializr and add the following dependencies:

·         Spring Web

·         Spring Data JPA

·         H2 or MySQL

·         Spring Security if required

Step 2: Creating Entity

import jakarta.persistence.*;

@Entity

public class User {

    @Id

    @GeneratedValue(strategy = GenerationType.IDENTITY)

    private Long id;

    private String name;

    private String email;

    // Getters and Setters

}

Step 3: Repository Generation

import org.springframework.data.jpa.repository.JpaRepository;

public interface UserRepository extends JpaRepository<User, Long> {

}

Step 4: Creating REST Controller

import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController

@RequestMapping("/api/users")

@CrossOrigin(origins = "http://localhost:5173")

public class UserController {

    private final UserRepository repository;

    public UserController(UserRepository repository) {

        this.repository = repository;

    }

    @GetMapping

    public List<User> getAllUsers() {

        return repository.findAll();

    }

    @PostMapping

    public User createUser(@RequestBody User user) {

        return repository.save(user);

    }

}

Professionals use the @CrossOrigin annotation. This enables Vue.js to access the backend at the time of development.

Setting Up the Vue.js Frontend

The first step involves installing Vue using Vite.

npm create vue@latest

cd project-name

npm install

npm run dev

Component-based architecture is an integral part in Vue.js. Each component manages its own template, logic, and style, etc.

Connecting Vue.js to Java Backend

Vue relies on Axios or Fetch API to call the backend services. Axios provides better control over HTTP requests.

Install Axios

npm install axios

Create a Service File:

Create api.js:

import axios from 'axios';

const API = axios.create({

  baseURL: 'http://localhost:8080/api'

});

export default API;

Fetch Data in a Vue Component

<script setup>

import { ref, onMounted } from 'vue'

import API from './api'

const users = ref([])

onMounted(async () => {

  const response = await API.get('/users')

  users.value = response.data

})

</script>

<template>

  <div>

    <h2>User List</h2>

    <ul>

      <li v-for="user in users" :key="user.id">

        {{ user.name }} - {{ user.email }}

      </li>

    </ul>

  </div>

</template>         

Vue has a reactive system. This system automatically updates the DOM when user changes. The Vue JS Course follows every industry-relevant trend to offer the best guidance to learners.

Sending Data from Vue to Java

Use POST requests to send data.

<script setup>

import { ref } from 'vue'

import API from './api'

const name = ref('')

const email = ref('')

const saveUser = async () => {

  await API.post('/users', {

    name: name.value,

    email: email.value

  })

}

</script>

<template>

  <div>

    <input v-model="name" placeholder="Name" />

    <input v-model="email" placeholder="Email" />

    <button @click="saveUser">Save</button>

  </div>

</template>

Input values and reactive state stay together with v-model. Vue sends JSON to the backend. Spring Boot maps JSON to the User object.

Handling CORS

CORS blocks cross origin requests. You must enable CORS in Spring Boot.

Global configuration example:

import org.springframework.context.annotation.Bean;

import org.springframework.context.annotation.Configuration;

import org.springframework.web.servlet.config.annotation.*;

@Configuration

public class WebConfig {

    @Bean

    public WebMvcConfigurer corsConfigurer() {

        return new WebMvcConfigurer() {

            @Override

            public void addCorsMappings(CorsRegistry registry) {

                registry.addMapping("/**")

                        .allowedOrigins("http://localhost:5173")

                        .allowedMethods("*");

            }

        };

    }

}

This configuration allows Vue development server to communicate with Java backend.

Implementing Authentication

Most applications require authentication. Spring Security handles authentication. Vue stores tokens.

Backend JWT Example

Add dependency for JWT. Generate token after login.

@PostMapping("/login")

public ResponseEntity<?> login(@RequestBody AuthRequest request) {

    String token = jwtService.generateToken(request.getUsername());

    return ResponseEntity.ok(new AuthResponse(token));

}

Vue Token Storage

localStorage.setItem('token', response.data.token);

Attach Token to Requests

API.interceptors.request.use(config => {

  const token = localStorage.getItem('token');

  if (token) {

    config.headers.Authorization = `Bearer ${token}`;

  }

  return config;

});

Tokens get validated by Spring Security. Token validation is an important step as it proceses the backend process.

Production Deployment

Build Vue application:

npm run build

This creates a dist folder.

Place the static files inside Spring Boot resources/static directory. Spring Boot serves the Vue build as static content. Alternative approach uses separate deployment. Backend must be Deployed on a server. CDN or Nginx  can be used to deploy frontend. Additionally, professionals must configure reverse proxy for effective API routing.

Best Practices

Instead of directly exposing entities, professionals are suggested to use DTO objects. @Valid can be used to validate input. In addition, developers must use global exception handlers and also ensure proper logging processes. Secure endpoints using role-based access. Use environment variables for API URLs. These practices improve performance and security.

Conclusion

Java and Vue.js work well together in modern web applications. Java handles data processing, validation, and security. One can join Java Coaching in Noida for complete guidance and hands-on learning opportunities. Vue.js handles UI rendering and user interaction. Backend development gets simple with Spring Boot. Vue makes reactive frontend design a lot easier for developers. REST APIs and JSON communication make this integration possible.  

Professionals can effectively manage HTTP calls with Axios. Spring Security manages authentication. Proper CORS configuration ensures smooth development. This stack supports scalability and clean architecture. It fits enterprise systems and startup products. Developers gain flexibility and performance. Thus, the right process makes full stack application development easier using Java and Vue.js.