Vue3 Inplace

Vue3 Inplace provides an easy to do editing and display at the same time where clicking the output displays the actual content. It supports Vue 3 with PrimeVue 3 and Vue 2 with PrimeVue 2.

Setup

Refer to PrimeVue setup documentation for download and installation steps for your environment such as Vue CLI, Vite or browser.

Import

import Inplace from 'primevue/inplace';

Getting Started

Inplace requires display and content templates to define the content of each state.

<Inplace>
    <template #display>
        <span class="pi pi-search" style="vertical-align: middle"></span>
        <span style="margin-left:.5rem; vertical-align: middle">View Picture</span>
    </template>
    <template #content>
        <img src="demo/images/nature/nature1.jpg" />
    </template>
</Inplace>

Closable

closable property is handy within forms as it enables to switch back to output mode after editing is completed using a button displayed next to the form field.

<Inplace :closable="true">
    <template #display>
        {{text || 'Click to Edit'}}
    </template>
    <template #content>
        <InputText v-model="text" autoFocus />
    </template>
</Inplace>

Lazy Data

Inplace allows lazy loading content so that the content gets initialized after getting opened instead of on load. Here is an example that loads, data of a table if the user decides to open the inplace.

<Inplace @open="loadData">
    <template #display>
        View Data
    </template>
    <template #content>
        <DataTable :value="cars">
            <Column field="vin" header="Vin"></Column>
            <Column field="year" header="Year"></Column>
            <Column field="brand" header="Brand"></Column>
            <Column field="color" header="Color"></Column>
        </DataTable>
    </template>
</Inplace>

import CarService from '../../service/CarService';

export default {
     data() {
        return {
            cars: null
        }
    },
    carService: null,
    created() {
        this.carService = new CarService();
    },
    methods: {
        loadData() {
             this.carService.getCarsSmall().then(data => this.cars = data);
        }
    }
}

Theming

Inplace supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeVue Inplace showcase for demos and documentation.