diff --git a/Koha/Acquisition/Bookseller.pm b/Koha/Acquisition/Bookseller.pm
index 0b8a564767..5041582d93 100644
--- a/Koha/Acquisition/Bookseller.pm
+++ b/Koha/Acquisition/Bookseller.pm
@@ -23,6 +23,8 @@ use Koha::Acquisition::Bookseller::Interfaces;
 use Koha::Acquisition::Bookseller::Issues;
 use Koha::Subscriptions;
 
+use C4::Contract qw( GetContracts );
+
 use base qw( Koha::Object );
 
 =head1 NAME
@@ -63,6 +65,24 @@ sub contacts {
     return Koha::Acquisition::Bookseller::Contacts->_new_from_dbic($contacts_rs);
 }
 
+=head3 contracts
+
+    my $vendor   = Koha::Acquisition::Booksellers->find( $id );
+    my @contracts = $vendor->contracts();
+
+Returns the list of contracts for the vendor
+
+=cut
+
+sub contracts {
+    my ($self) = @_;
+    return GetContracts(
+        {
+            booksellerid => $self->id,
+        }
+    );
+}
+
 =head3 subscriptions
 
     my $vendor        = Koha::Acquisition::Booksellers->find( $id );
diff --git a/api/v1/swagger/definitions/vendor.yaml b/api/v1/swagger/definitions/vendor.yaml
index 5f285dc9bc..e7f1f0d847 100644
--- a/api/v1/swagger/definitions/vendor.yaml
+++ b/api/v1/swagger/definitions/vendor.yaml
@@ -127,6 +127,15 @@ properties:
       - integer
       - "null"
     description: Number of linked subscriptions
+  interfaces:
+    type: array
+    description: List of interfaces
+  contacts:
+    type: array
+    description: List of contacts
+  contracts:
+    type: array
+    description: List of contracts
 additionalProperties: false
 required:
   - name
\ No newline at end of file
diff --git a/api/v1/swagger/paths/acquisitions_vendors.yaml b/api/v1/swagger/paths/acquisitions_vendors.yaml
index 4670ff8125..98980dc757 100644
--- a/api/v1/swagger/paths/acquisitions_vendors.yaml
+++ b/api/v1/swagger/paths/acquisitions_vendors.yaml
@@ -139,6 +139,21 @@
     summary: Get vendor
     parameters:
       - $ref: "../swagger.yaml#/parameters/vendor_id_pp"
+      - name: x-koha-embed
+        in: header
+        required: false
+        description: Embed list sent as a request header
+        type: array
+        items:
+          type: string
+          enum:
+            - aliases
+            - baskets
+            - subscriptions
+            - interfaces
+            - contacts
+            - contracts
+        collectionFormat: csv
     produces:
       - application/json
     responses:
diff --git a/koha-tmpl/intranet-tmpl/prog/js/fetch/acquisition-api-client.js b/koha-tmpl/intranet-tmpl/prog/js/fetch/acquisition-api-client.js
index ee706225bd..e86c184a17 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/fetch/acquisition-api-client.js
+++ b/koha-tmpl/intranet-tmpl/prog/js/fetch/acquisition-api-client.js
@@ -11,7 +11,8 @@ export class AcquisitionAPIClient {
                 this.get({
                     endpoint: "vendors/" + id,
                     headers: {
-                        "x-koha-embed": "aliases",
+                        "x-koha-embed":
+                            "baskets,aliases,subscriptions,interfaces,contacts,contracts",
                     },
                 }),
             getAll: (query, params) =>
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Vendors/VendorContacts.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Vendors/VendorContacts.vue
new file mode 100644
index 0000000000..28e3b97f86
--- /dev/null
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Vendors/VendorContacts.vue
@@ -0,0 +1,97 @@
+<template>
+    <fieldset class="rows">
+        <h2>
+            {{ $__("Contact") }}
+        </h2>
+        <span v-if="vendor.contacts.length === 0">{{
+            $__("No contacts")
+        }}</span>
+        <ol v-for="contact in vendor.contacts" :key="contact.id">
+            <legend>{{ contact.name }}</legend>
+            <li>
+                <label>{{ $__("Position") }}:</label>
+                <span>{{ contact.position }}</span>
+            </li>
+            <li>
+                <label>{{ $__("Phone") }}:</label>
+                <span>{{ contact.phone }}</span>
+            </li>
+            <li>
+                <label>{{ $__("Alternative phone") }}:</label>
+                <span>{{ contact.altphone }}</span>
+            </li>
+            <li>
+                <label>{{ $__("Fax") }}:</label>
+                <span>{{ contact.fax }}</span>
+            </li>
+            <li v-if="contact.email">
+                <label>{{ $__("Email") }}:</label>
+                <span>
+                    <a :href="`mailto:${contact.email}`" target="_blank">{{
+                        contact.email
+                    }}</a>
+                </span>
+            </li>
+            <li v-if="contact.notes">
+                <label>{{ $__("Notes") }}:</label>
+                <span>{{ contact.notes }}</span>
+            </li>
+            <li
+                v-if="
+                    contact.acqprimary ||
+                    contact.orderacquisition ||
+                    contact.claimacquisition
+                "
+            >
+                <span class="label">{{ $__("Acquisitions options") }}:</span>
+                <ol>
+                    <li v-if="contact.acqprimary">
+                        <span
+                            ><i class="fa fa-check"></i>
+                            {{ $__("Primary acquisitions contact") }}</span
+                        >
+                    </li>
+                    <li v-if="contact.orderacquisition">
+                        <span
+                            ><i class="fa fa-check"></i>
+                            {{ $__("Receives orders") }}</span
+                        >
+                    </li>
+                    <li v-if="contact.claimacquisition">
+                        <span
+                            ><i class="fa fa-check"></i>
+                            {{ $__("Receives claims for late orders") }}</span
+                        >
+                    </li>
+                </ol>
+            </li>
+            <li v-if="contact.serialsprimary || contact.claimissues">
+                <span class="label">{{ $__("Serials options") }}:</span>
+                <ol>
+                    <li v-if="contact.serialsprimary">
+                        <span
+                            ><i class="fa fa-check"></i>
+                            {{ $__("Primary serials contact") }}</span
+                        >
+                    </li>
+                    <li v-if="contact.claimissues">
+                        <span
+                            ><i class="fa fa-check"></i>
+                            {{ $__("Receives claims for late issues") }}</span
+                        >
+                    </li>
+                </ol>
+            </li>
+        </ol>
+    </fieldset>
+</template>
+
+<script>
+export default {
+    props: {
+        vendor: Object,
+    },
+};
+</script>
+
+<style></style>
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Vendors/VendorContracts.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Vendors/VendorContracts.vue
new file mode 100644
index 0000000000..141106c365
--- /dev/null
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Vendors/VendorContracts.vue
@@ -0,0 +1,64 @@
+<template>
+    <h2>{{ $__("Contract(s)") }}</h2>
+    <div class="dataTables_wrapper no-footer">
+        <table id="contractst">
+            <thead>
+                <tr>
+                    <th scope="col">{{ $__("Name") }}</th>
+                    <th scope="col">{{ $__("Description") }}</th>
+                    <th scope="col">{{ $__("Start date") }}</th>
+                    <th scope="col">{{ $__("End date") }}</th>
+                    <!-- PERMISSION CAN_user_acquisition_contracts_manage -->
+                    <th v-if="false" scope="col" class="NoSort noExport">
+                        {{ $__("Actions") }}
+                    </th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr v-for="(contract, i) in vendor.contracts" :key="i">
+                    <td>
+                        <a
+                            :href="`/cgi-bin/koha/admin/aqcontract.pl?op=add_form&contractnumber=${contract.contractnumber}&booksellerid=${contract.booksellerid}`"
+                            >{{ contract.contractname }}</a
+                        >
+                    </td>
+                    <td>{{ contract.contractdescription }}</td>
+                    <td :data-order="contract.contractstartdate">
+                        {{ contract.contractstartdate }}
+                    </td>
+                    <td :data-order="contract.contractenddate">
+                        {{ contract.contractenddate }}
+                    </td>
+                    <!-- PERMISSION CAN_user_acquisition_contracts_manage -->
+                    <td class="actions" v-if="false">
+                        <a
+                            class="btn btn-default btn-xs"
+                            :href="`/cgi-bin/koha/admin/aqcontract.pl?op=add_form&contractnumber=${contract.contractnumber}&booksellerid=${contract.booksellerid}`"
+                            ><i
+                                class="fa-solid fa-pencil"
+                                aria-hidden="true"
+                            ></i>
+                            {{ $__("Edit") }}</a
+                        >
+                        <a
+                            class="btn btn-default btn-xs"
+                            :href="`/cgi-bin/koha/admin/aqcontract.pl?op=delete_confirm&contractnumber=${contract.contractnumber}&booksellerid=${contract.booksellerid}`"
+                            ><i class="fa fa-trash-can"></i>
+                            {{ $__("Delete") }}</a
+                        >
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        vendor: Object,
+    },
+};
+</script>
+
+<style></style>
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Vendors/VendorDetails.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Vendors/VendorDetails.vue
new file mode 100644
index 0000000000..042c7465e6
--- /dev/null
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Vendors/VendorDetails.vue
@@ -0,0 +1,78 @@
+<template>
+    <fieldset class="rows">
+        <h2>
+            {{ $__("Vendor details") }}
+        </h2>
+        <ol>
+            <li>
+                <label>{{ $__("Type") }}:</label>
+                <span>
+                    {{ vendor.type }}
+                </span>
+            </li>
+            <li>
+                <label>{{ $__("Company name") }}:</label>
+                <span>
+                    {{ vendor.name }}
+                </span>
+            </li>
+            <li>
+                <label>{{ $__("Postal address") }}:</label>
+                <span>
+                    {{ vendor.postal }}
+                </span>
+            </li>
+            <li>
+                <label>{{ $__("Physical address") }}:</label>
+                <span>
+                    {{ vendor.address1 }}
+                    {{ vendor.address2 }}
+                    {{ vendor.address3 }}
+                    {{ vendor.address4 }}
+                </span>
+            </li>
+            <li>
+                <label>{{ $__("Phone") }}:</label>
+                <span>
+                    {{ vendor.phone }}
+                </span>
+            </li>
+            <li>
+                <label>{{ $__("Fax") }}:</label>
+                <span>
+                    {{ vendor.fax }}
+                </span>
+            </li>
+            <li v-if="vendor.url">
+                <label>{{ $__("Website") }}:</label>
+                <span>
+                    {{ vendor.url }}
+                </span>
+            </li>
+            <li v-if="vendor.accountnumber">
+                <label>{{ $__("Account number") }}:</label>
+                <span>
+                    {{ vendor.accountnumber }}
+                </span>
+            </li>
+            <li v-if="vendor.aliases.count">
+                <label>{{ $__("Aliases") }}:</label>
+                <ul>
+                    <li v-for="alias in vendor.aliases" :key="alias">
+                        {{ alias }}
+                    </li>
+                </ul>
+            </li>
+        </ol>
+    </fieldset>
+</template>
+
+<script>
+export default {
+    props: {
+        vendor: Object,
+    },
+};
+</script>
+
+<style></style>
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Vendors/VendorInterfaces.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Vendors/VendorInterfaces.vue
new file mode 100644
index 0000000000..4bfa8043fc
--- /dev/null
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Vendors/VendorInterfaces.vue
@@ -0,0 +1,54 @@
+<template>
+    <fieldset class="rows">
+        <h2>
+            {{ $__("Interfaces") }}
+        </h2>
+        <ol v-for="vi in vendor.interfaces" :key="vi.id">
+            <legend>{{ vi.name }}</legend>
+            <li>
+                <label>{{ $__("Type") }}:</label>
+                <span> NEED AUTHORISED VALUES </span>
+            </li>
+            <li v-if="vi.uri">
+                <label>{{ $__("URI") }}:</label>
+                <span>
+                    <a :href="vi.uri" target="_blank">{{ vi.uri }}</a>
+                </span>
+            </li>
+            <li v-if="vi.login">
+                <label>{{ $__("Login") }}:</label>
+                <span>
+                    {{ vi.login }}
+                </span>
+            </li>
+            <li v-if="vi.password">
+                <label>{{ $__("Password") }}:</label>
+                <span>
+                    {{ vi.password }}
+                </span>
+            </li>
+            <li v-if="vi.account_email">
+                <label>{{ $__("Account email") }}:</label>
+                <span>
+                    {{ vi.account_email }}
+                </span>
+            </li>
+            <li v-if="vi.notes">
+                <label>{{ $__("Notes") }}:</label>
+                <span>
+                    {{ vi.notes }}
+                </span>
+            </li>
+        </ol>
+    </fieldset>
+</template>
+
+<script>
+export default {
+    props: {
+        vendor: Object,
+    },
+};
+</script>
+
+<style></style>
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Vendors/VendorOrderingInformation.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Vendors/VendorOrderingInformation.vue
new file mode 100644
index 0000000000..916f7bb66c
--- /dev/null
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Vendors/VendorOrderingInformation.vue
@@ -0,0 +1,75 @@
+<template>
+    <fieldset class="rows">
+        <h2>
+            {{ $__("Ordering information") }}
+        </h2>
+        <ol>
+            <li>
+                <label>{{ $__("Vendor is") }}:</label>
+                <span>
+                    {{ vendor.active ? $__("Active") : $__("Inactive") }}
+                </span>
+            </li>
+            <li>
+                <label>{{ $__("List prices are") }}:</label>
+                <span>
+                    {{ vendor.listprice }}
+                </span>
+            </li>
+            <li>
+                <label>{{ $__("Invoice prices are") }}:</label>
+                <span>
+                    {{ vendor.invoiceprice }}
+                </span>
+            </li>
+            <li v-if="vendor.tax_rate">
+                <label>{{ $__("Tax number registered") }}:</label>
+                <span>
+                    {{ vendor.gstreg ? $__("Yes") : $__("No") }}
+                </span>
+            </li>
+            <li v-if="vendor.tax_rate">
+                <label>{{ $__("List item price includes tax") }}:</label>
+                <span>
+                    {{ vendor.listincgst ? $__("Yes") : $__("No") }}
+                </span>
+            </li>
+            <li v-if="vendor.tax_rate">
+                <label>{{ $__("Invoice item price includes tax") }}:</label>
+                <span>
+                    {{ vendor.invoiceincgst ? $__("Yes") : $__("No") }}
+                </span>
+            </li>
+            <li>
+                <label>{{ $__("Discount") }}:</label>
+                <span>
+                    {{ vendor.discount || 0 }}
+                </span>
+            </li>
+            <li>
+                <label>{{ $__("Tax rate") }}:</label>
+                <span>
+                    {{ (vendor.tax_rate || 0) * 100 }}
+                </span>
+            </li>
+            <li v-if="vendor.deliverytime">
+                <label>{{ $__("Delivery time") }}:</label>
+                <span> {{ vendor.deliverytime }} days </span>
+            </li>
+            <li v-if="vendor.notes">
+                <label>{{ $__("Notes") }}:</label>
+                <span> {{ vendor.notes }} days </span>
+            </li>
+        </ol>
+    </fieldset>
+</template>
+
+<script>
+export default {
+    props: {
+        vendor: Object,
+    },
+};
+</script>
+
+<style></style>
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Vendors/VendorShow.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Vendors/VendorShow.vue
new file mode 100644
index 0000000000..56046c19e5
--- /dev/null
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Vendors/VendorShow.vue
@@ -0,0 +1,123 @@
+<template>
+    <div v-if="!initialized">{{ $__("Loading") }}</div>
+    <div v-else id="vendors_show">
+        <Toolbar>
+            <ToolbarButton
+                :to="{ name: 'VendorList' }"
+                icon="plus"
+                :title="$__('New vendor')"
+            />
+            <ToolbarButton
+                :to="{ name: 'VendorList' }"
+                icon="pencil"
+                :title="$__('Edit vendor')"
+            />
+            <ExternalLinkButton
+                :to="{
+                    path: '/cgi-bin/koha/acqui/parcels.pl',
+                    query: { booksellerid: vendor.id },
+                }"
+                icon="plus"
+                :title="$__('Receive shipments')"
+            />
+        </Toolbar>
+        <h1>
+            {{ vendor.name }}
+        </h1>
+        <div class="row">
+            <div class="col-sm-6">
+                <VendorDetails :vendor="vendor" />
+                <VendorOrderingInformation :vendor="vendor" />
+                <VendorInterfaces
+                    :vendor="vendor"
+                    v-if="vendor.interfaces.length > 0"
+                />
+            </div>
+            <div class="col-sm-6">
+                <VendorContacts :vendor="vendor" />
+                <VendorSubscriptions :vendor="vendor" />
+            </div>
+        </div>
+        <div
+            class="page-section rows"
+            v-if="vendor.contracts && vendor.contracts.length > 0"
+        >
+            <VendorContracts :vendor="vendor" />
+        </div>
+    </div>
+</template>
+
+<script>
+import Toolbar from "../Toolbar.vue";
+import ToolbarButton from "../ToolbarButton.vue";
+import { inject } from "vue";
+import { APIClient } from "../../fetch/api-client.js";
+import ExternalLinkButton from "../ExternalLinkButton.vue";
+import VendorDetails from "./VendorDetails.vue";
+import VendorOrderingInformation from "./VendorOrderingInformation.vue";
+import VendorInterfaces from "./VendorInterfaces.vue";
+import VendorContacts from "./VendorContacts.vue";
+import VendorSubscriptions from "./VendorSubscriptions.vue";
+import VendorContracts from "./VendorContracts.vue";
+
+export default {
+    setup() {
+        const format_date = $date;
+        const patron_to_html = $patron_to_html;
+
+        const { setConfirmationDialog, setMessage } = inject("mainStore");
+
+        // const AVStore = inject("AVStore")
+        // const { get_lib_from_av } = AVStore
+
+        return {
+            format_date,
+            patron_to_html,
+            // get_lib_from_av,
+            setConfirmationDialog,
+            setMessage,
+        };
+    },
+    data() {
+        return {
+            vendor: null,
+            initialized: false,
+        };
+    },
+    beforeRouteEnter(to, from, next) {
+        next(vm => {
+            vm.getVendor(to.params.vendor_id);
+        });
+    },
+    methods: {
+        async getVendor(vendor_id) {
+            const client = APIClient.acquisition;
+            client.vendors.get(vendor_id).then(
+                vendor => {
+                    this.vendor = vendor;
+                    this.initialized = true;
+                },
+                error => {}
+            );
+        },
+    },
+    components: {
+        Toolbar,
+        ToolbarButton,
+        ExternalLinkButton,
+        VendorDetails,
+        VendorOrderingInformation,
+        VendorInterfaces,
+        VendorContacts,
+        VendorSubscriptions,
+        VendorContracts,
+    },
+    name: "VendorShow",
+};
+</script>
+
+<style>
+.vendor_info {
+    display: grid;
+}
+</style>
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Vendors/VendorSubscriptions.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Vendors/VendorSubscriptions.vue
new file mode 100644
index 0000000000..99f2b94514
--- /dev/null
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Vendors/VendorSubscriptions.vue
@@ -0,0 +1,27 @@
+<template>
+    <fieldset class="rows">
+        <h2>
+            {{ $__("Subscription details") }}
+        </h2>
+        <!-- PERMISSION -->
+        <p>
+            <strong>{{ $__("Number of subscriptions") }}: </strong>
+            <a
+                v-if="false"
+                :href="`/cgi-bin/koha/serials/serials-search.pl?bookseller_filter=${vendor.name}&searched=1`"
+                >{{ vendor.subscriptions.length }}</a
+            >
+            <span v-if="true">{{ vendor.subscriptions.length }}</span>
+        </p>
+    </fieldset>
+</template>
+
+<script>
+export default {
+    props: {
+        vendor: Object,
+    },
+};
+</script>
+
+<style></style>