Assistance with the Editor PrimeVue Component

[kitrin]

Hi everyone,

I can't seem to get the Editor PrimeVue component working. Not sure what I'm missing? Please help.

It seems to completely ignore the component on the display, and if I use the InputText (which is commented out), it displays perfectly.

Copy of <template> code...
<template>
<div class="p-grid">
<div class="p-col-12">
<div class="card p-fluid">
<h5>Your Profile</h5>
<p>Information related to the logged in user.</p>

<div class="p-field">
<label for="id">ID</label>
<InputText id="id" :disabled="true" v-model.trim="profile.id" required="true"
:class="{'p-invalid': submitted && !profile.id}"/>
<small class="p-invalid" v-if="submitted && !profile.id">ID is required.</small>
</div>

<div class="p-field">
<label for="username">Username</label>
<InputText id="username" :disabled="true" v-model.trim="profile.username" required="true"
:class="{'p-invalid': submitted && !profile.username}"/>
</div>

<div class="p-field">
<label for="email">Email</label>
<InputText id="email" :disabled="false" v-model.trim="profile.email" required="true" autofocus
:class="{'p-invalid': submitted && !profile.email}"/>
<small class="p-invalid" v-if="submitted && !profile.email">Email is required.</small>

</div>

<div class="p-field">
<label for="mobile">Mobile</label>
<InputText id="mobile" :disabled="false" v-model.trim="profile.mobile" required="true"
:class="{'p-invalid': submitted && !profile.mobile}"/>
<small class="p-invalid" v-if="submitted && !profile.mobile">Mobile is required.</small>
</div>

<div class="p-field">
<label for="firstName">First Name</label>
<Editor v-model="profile.firstName" editorStyle="height: 320px"/>

<!-- <InputText id="firstName" :disabled="false" v-model.trim="profile.firstName" required="true"-->
<!-- :class="{'p-invalid': submitted && !profile.firstName}"/>-->
<!-- <small class="p-invalid" v-if="submitted && !profile.firstName">First Name is required.</small>-->
</div>
...

[kitrin]

This was a silly mistake. This is now resolved.

All I needed to do was include the imports in the main.js file.

import Editor from 'primevue/editor';
..
app.component('Editor', Editor);
...

[tugce.kucukoglu]

Thanks for the feedback.