VueJS

Overview

The VueJS generator creates a modern Vue 3 application structure using Pinia for state management.

Configuration

Add "vuets" to your front-end in config.json:

{
  "front-end": ["vuets"]
}

Generated Structure

The Generator will output the following in the vuets/src/shared/ directory:

  • Interface/Model/: TypeScript Interfaces.
  • Store/Model/: Pinia Stores for each model.
  • Service/Model/: API Service files for performing CRUD operations.

Pinia Store Example

Stores are generated using the defineStore syntax:

export const useUserStore = defineStore({
    id: "User",
    state: () => ({
        rawItems: [],
    }),
    actions: {
        addItem(User) { ... },
        removeItem(id) { ... },
        // ...
    }
})

Service Pattern

Services encapsulate fetch calls and automatically dispatch actions to the corresponding Pinia store upon success.

// Service/Model/User.js
import { useUserStore } from "/src/Store/Model/User.js";

function all() {
    fetch("/api/user")
      .then(r => r.json())
      .then(i => { useUserStore().upsertItem(i) });
}
← Golang
Java Spring →