Vue 3 Development with the PrimeVue Framework — Textarea, Checkbox with Three States, and Button

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.

Textarea

PrimeVue comes with the Textarea component to let us add a text area into our Vue 3 app.

To add it, we write:

main.js

import { createApp } from "vue";
import App from "./App.vue";
import PrimeVue from "primevue/config";
import Textarea from 'primevue/textarea';
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("Textarea", Textarea);
app.mount("#app");

App.vue

<template>
  <div>
    <Textarea v-model="value" autoResize rows="5" cols="30" />
  </div>
</template>

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

The autoResize prop will make it auto resize according to the text entered.

rows and cols sets the number of rows and columns to display respectively.

Toggle Button

We can add the ToggleButton component to let us add a toggle button into our Vue 3 app.

For example, we can write:

<template>
  <div>
    <ToggleButton
      v-model="checked"
      onLabel="yes"
      offLabel="no"
      onIcon="pi pi-check"
      offIcon="pi pi-times"
    />
  </div>
</template>

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

to add a toggle button that binds to the checked reactive property.

onLabel has the text that’s displayed when checked is true .

offLabel has the text that’s displayed when checked is false .

onIcon has the icon classes that’s applied when checked is true .

offIcon has the icon classes that’s applied when checked is false.

Checkbox with Three States

We can add a checkbox with an indeterminate state in addition to the checked and unchecked states with the TriStateCheckbox component.

To add it, we write:

main.js

import { createApp } from "vue";
import App from "./App.vue";
import PrimeVue from "primevue/config";
import TriStateCheckbox from 'primevue/tristatecheckbox';
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("TriStateCheckbox", TriStateCheckbox);
app.mount("#app");

App.vue

<template>
  <div>
    <TriStateCheckbox v-model="value" />
  </div>
</template>

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

to add it.

Buttons

PrimeVue comes with buttons in a variety of styles.

To add a basic button, we can write:

main.js

import { createApp } from "vue";
import App from "./App.vue";
import PrimeVue from "primevue/config";
import Button from 'primevue/button';
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("Button", Button);
app.mount("#app");

App.vue

<template>
  <div>
    <Button label="Submit" />
  </div>
</template>

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

The label prop is the text that’s displayed to the user.

We can add icons to the button by writing:

<template>
  <div>
    <Button label="Submit" icon="pi pi-check" iconPos="right" />
  </div>
</template>

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

icon has the classes for the icon we want to add.

iconPos has the position of the icon.

Conclusion

We can add text areas, toggle buttons, 3 state check boxes, and buttons into our Vue 3 app with PrimeVue.