Блог

Я использую Vue 3.x и Primevue. Когда я добавляю компонент текстовой области, он появляется, но он не оформлен.

В консоли появится сообщение:

 [Vue warn]: Failed to resolve component: Textarea 
at <ArtworkCreate> 
at <App>
 

Я попробовал пустой проект и стилизуемый компонент.

Поэтому я считаю, что это моя ошибка. Кто-нибудь может мне помочь?

main.js (внутри папки src):

 import { createApp } from "vue";
import App from "./App.vue";

import PrimeVue from "primevue/config";
import Button from "primevue/button";
import InputText from "primevue/inputtext";
import Calendar from "primevue/calendar";
import Textarea from "primevue/textarea";

import "primevue/resources/themes/saga-blue/theme.css";
import "primevue/resources/primevue.min.css";
import "primeicons/primeicons.css";

const app = createApp(App);
app.use(PrimeVue);

app.component("Button", Button);
app.component("InputText", InputText);
app.component("Calendar", Calendar);
app.component("TextArea", Textarea);

app.mount("#app");
 

App.vue (внутри папки src):

 <template>
  <div class="create-container">
    <ArtistCreate />
    <ArtworkCreate />
  </div>
</template>

<script>
import ArtistCreate from "./components/ArtistCreate.vue";
import ArtworkCreate from "./components/ArtworkCreate.vue";

export default {
  name: "App",
  components: {
    ArtistCreate,
    ArtworkCreate,
  },
};
</script>

<style>
body {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

.create-container {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  align-content: center;
}
</style>
 

ArtworkCreate.vue (внутри src / components)

 <template>
  <div class="artwork-create-container">
    <h1>Create Artwork</h1>
    <InputText type="text" placeholder="Title" v-model="artworkTitle" />
    <InputText type="text" placeholder="Type" v-model="artworkType" />
    <Textarea v-model="artworkDescription" rows="5" cols="30" />
    <Button label="Submit" />
  </div>
</template>

<script>
export default {
  name: "ArtworkCreate",
  data() {
    return {
      artworkTitle: "",
      artworkType: "",
      artworkDescription: "",
    };
  },
};
</script>

<style scoped>
.artwork-create-container {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-evenly;
  align-items: center;
}
.artwork-create-container input,
.artwork-create-container button {
  margin: 5px;
}
</style>
 

РЕДАКТИРОВАТЬ: решено.
app.component("TextArea", Textarea);
«Текстовое поле» -> «Текстовое поле»