1

I am a bit new to Vue and it keeps getting harder for me to crack. I'm using Vue 3 I want to use Vue-Formulate to create a registration form on my vue app. Here's how far I've come following Vue-Formulate official documentation:

// main.js

import { createApp } from 'vue'
import App from './App.vue'

import VueFormulate from '@braid/vue-formulate'

createApp(App).use(VueFormulate).mount('#app')

Then on Register.vue:

<template>
  <formulate-form v-model="formValues" @submit="registerUser">
     <formulate-input name="first_name" label="First Name" placeholder="First Name" type="text"></formulate-input>
  </formulate>
</template>

<script>
export default {
    name: 'RegisterLogin',
    methods: {
        registerUser () {
            // call back here
        }
    }
}
</script>

But I get [Vue warn]: Failed to resolve component: formulate-form and [Vue warn]: Failed to resolve component: formulate-input error from the console and the form refuses to render. I can't really tell why. Answers from here: [Vue warn]: Failed to resolve component: Step1Item: are not helping as well.

Ajayi Olamide
  • 29
  • 7

2 Answers2

0

In Register.vue import all the components that you are using:

import { FormulateForm, FormulateInput } from '@braid/vue-formulate';

And then in the export method try adding components object and list the names of all the components that you are using, like this:

export default {
   components: {
     FormulateForm,
     FormulateInput,
     another-component-here
   },
   * the rest of the code here *
}
edytajordan
  • 3
  • 5
-1

Well, I had to create my own form components as I could not resolve this.

Ajayi Olamide
  • 29
  • 7