Vue 3 Development with the PrimeVue Framework — Switch, Text Input, and Float Label

PrimeVue is a UI framework that’s compatible with Vue 3.

In this article, we’ll look at how to get started with developing Vue 3 apps with PrimeVue.

Switch

PrimeVue comes with the InputSwitch component that renders a switch.

To add it, we can write:

main.js

import { createApp } from "vue";
import App from "./App.vue";
import PrimeVue from "primevue/config";
import InputSwitch from 'primevue/inputswitch';
import 'primevue/resources/primevue.min.css'
import 'primevue/resources/themes/saga-blue/theme.css'
import 'primeicons/primeicons.css'
import 'primeflex/primeflex.css';

const app = createApp(App);
app.use(PrimeVue);
app.component("InputSwitch", InputSwitch);
app.mount("#app");

App.vue

<template>
  <div>
    <InputSwitch v-model="checked" />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      checked: false,
    };
  },
  methods: {},
};
</script>

We bind the switch’s value to a reactive property with v-model .

Text Input

We can add the text input by using the InputText component.

To add it, we write:

main.js

import { createApp } from "vue";
import App from "./App.vue";
import PrimeVue from "primevue/config";
import InputText from 'primevue/inputtext';
import 'primevue/resources/primevue.min.css'
import 'primevue/resources/themes/saga-blue/theme.css'
import 'primeicons/primeicons.css'
import 'primeflex/primeflex.css';

const app = createApp(App);
app.use(PrimeVue);
app.component("InputText", InputText);
app.mount("#app");

App.vue

<template>
  <div>
    <InputText type="text" v-model="value" />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      value: '',
    };
  },
  methods: {},
};
</script>

We bind the entered value to a reactive property v-model .

Also, we can add icons beside the input with the i element with a few classes:

<template>
  <div>
    <span class="p-input-icon-left">
      <i class="pi pi-search" />
      <InputText type="text" v-model="value" placeholder="Search" />
    </span>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      value: "",
    };
  },
  methods: {},
};
</script>

The p-input-icon-left class lets us add an icon to the left side of the input box.

p-input-icon-right lets us add an icon to the right side of the input box.

The p-input-filled class lets us add a gray background to the input box:

<template>
  <div class="p-input-filled">
    <InputText type="text" v-model="value" placeholder="Search" />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      value: "",
    };
  },
  methods: {},
};
</script>

Float Label

We can add float labels into our app.

For example, we can write:

<template>
  <div class="p-fluid p-grid">
    <div class="p-m-6">
      <span class="p-float-label">
        <InputText id="inputtext" type="text" v-model="value" />
        <label for="inputtext">InputText</label>
      </span>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      value: "",
    };
  },
  methods: {},
};
</script>

to add it.

We add the p-float-label class to the container to let us add the float label.

Then we add the label element inside the container to make it a float label.

This also works with the Chips , InputMask , InputNumber , MultiSelect , and Textarea components.

Conclusion

We can add switches, text inputs, and float labels into our Vue 3 app with PrimeVue.