0
error: Unknown custom element: - Did you Register the Component correctly? For recursive Components, make sure to provide the "name" option I am trying to register a component containing a form but gives this error above.
import formClienteComponent from "./partials/formClienteComponent";
export default {
components: {
'form-cliente': formClienteComponent
},
Component.Vue //complete code
<template>
<div>
<div class="element-wrapper">
<div class="element-actions">
<a class="btn btn-success btn-large" href="#">
<i class="os-icon os-icon-ui-22"></i>
<span>Salvar</span>
</a>
</div>
<h1 class="element-header">Novo Cliente</h1>
<div class="row">
<div class="col-sm-12">
<div class="element-wrapper">
<div class="element-box">
<form-cliente></form-cliente>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { TheMask } from "vue-the-mask";
import formClienteComponent from "./partials/formClienteComponent";
export default {
components: {
'form-cliente': formClienteComponent
},
computed: {
bancos() {
return this.$store.state.bancos.items.data;
}
},
data() {
return {
errors: {}
};
},
components: { TheMask },
methods: {
submitForm() {
this.$store
.dispatch("storeClientes", this.cliente)
.then(() => this.$router.push({ name: "admin.clientes" }))
.catch();
}
}
};
</script>
formClienteComponent.Vue
<template>
<div>
<form id="formValidate" novalidate="true" @submit.prevent="submitForm">
<h5 class="form-header">Form Validation</h5>
<div class="form-desc">
Validation of the form is made possible using powerful validator plugin for bootstrap.
<a
href="http://1000hz.github.io/bootstrap-validator/"
target="_blank"
>Learn more about Bootstrap Validator</a>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for>Nome</label>
<input
name="nome"
v-model="cliente.nome"
class="form-control"
data-error="Insira um nome válido"
placeholder="Insira um nome válido"
required="required"
type="text"
/>
<div class="help-block form-text with-errors form-control-feedback"></div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for>CPF</label>
<input
v-model="cliente.cpf"
v-mask="'###.###.###-##'"
name="cpf"
class="form-control"
data-error="Digite um CPF Válido"
placeholder="Digite um CPF Válido"
required="required"
type="text"
/>
<div class="help-block form-text with-errors form-control-feedback"></div>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label for>CEP</label>
<input
v-model="cliente.cep"
v-mask="'#####-###'"
class="form-control"
data-error="CEP"
placeholder="Insira um CEP válido"
required="required"
type="text"
/>
<div class="help-block form-text with-errors form-control-feedback"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label for>Endereço</label>
<input
v-model="cliente.endereco"
name="endereco"
class="form-control"
data-error="Digite um Endereço"
placeholder="Digite um Endereço"
required="required"
type="text"
/>
<div class="help-block form-text with-errors form-control-feedback"></div>
</div>
</div>
<div class="col-sm-1">
<div class="form-group">
<label for>Número</label>
<input
v-model="cliente.numero"
name="numero"
class="form-control"
data-error="Digite um numero"
placeholder="Nº"
required="required"
type="text"
/>
<div class="help-block form-text with-errors form-control-feedback"></div>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label for>Bairro</label>
<input
v-model="cliente.bairro"
name="bairro"
class="form-control"
data-error="Digite um Bairro"
placeholder="Digite um Bairro"
required="required"
type="text"
/>
<div class="help-block form-text with-errors form-control-feedback"></div>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label for>Cidade</label>
<input
v-model="cliente.cidade"
name="cidade"
class="form-control"
data-error="Digite uma cidade"
placeholder="Digite uma cidade"
required="required"
type="text"
/>
<div class="help-block form-text with-errors form-control-feedback"></div>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label for>UF</label>
<select
class="form-control"
v-model="cliente.estado"
name="estado"
data-error="Digite um Estado"
placeholder="Digite uma Estado"
required="required"
>
<option value>Selecione</option>
<option value="AC">Acre</option>
<option value="AL">Alagoas</option>
<option value="AP">Amapá</option>
<option value="AM">Amazonas</option>
<option value="BA">Bahia</option>
<option value="CE">Ceará</option>
<option value="DF">Distrito Federal</option>
<option value="ES">Espirito Santo</option>
<option value="GO">Goiás</option>
<option value="MA">Maranhão</option>
<option value="MS">Mato Grosso do Sul</option>
<option value="MT">Mato Grosso</option>
<option value="MG">Minas Gerais</option>
<option value="PA">Pará</option>
<option value="PB">Paraíba</option>
<option value="PR">Paraná</option>
<option value="PE">Pernambuco</option>
<option value="PI">Piauí</option>
<option value="RJ">Rio de Janeiro</option>
<option value="RN">Rio Grande do Norte</option>
<option value="RS">Rio Grande do Sul</option>
<option value="RO">Rondônia</option>
<option value="RR">Roraima</option>
<option value="SC">Santa Catarina</option>
<option value="SP">São Paulo</option>
<option value="SE">Sergipe</option>
<option value="TO">Tocantins</option>
</select>
<div class="help-block form-text with-errors form-control-feedback"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for>Telefone</label>
<input
class="form-control"
placeholder="Telefone"
required="required"
v-model="cliente.telefone"
v-mask="'(##) #####-####'"
name="telefone"
/>
<div
class="help-block form-text text-muted form-control-feedback"
>Minimum of 6 characters</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for>Confirm Password</label>
<input
class="form-control"
data-match-error="Passwords don't match"
placeholder="Confirm Password"
required="required"
type="text"
/>
<div class="help-block form-text with-errors form-control-feedback"></div>
</div>
</div>
</div>
<fieldset class="form-group">
<legend>
<span>Bancos</span>
</legend>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label for>Banco</label>
<select name="banco" class="form-control" v-model="cliente.banco">
<option value>Selecione o Banco</option>
<option
v-for="banco in bancos"
:key="banco.id"
:value="banco.id"
>{{ banco.codigo }}-{{ banco.nome }}</option>
</select>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for>Agência</label>
<input
class="form-control"
data-match-error="Agência"
name="agencia"
v-model="cliente.agencia"
placeholder="Agência"
required="required"
type="text"
/>
<div class="help-block form-text with-errors form-control-feedback"></div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for>Conta</label>
<input
class="form-control"
data-match-error="Conta"
placeholder="Nº da Conta"
name="conta"
v-model="cliente.conta"
required="required"
type="text"
/>
<div class="help-block form-text with-errors form-control-feedback"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label for>Banco</label>
<select name="banco2" class="form-control" v-model="cliente.banco2">
<option value>Selecione o Banco</option>
<option
v-for="banco in bancos"
:key="banco.id"
:value="banco.id"
>{{ banco.codigo }}-{{ banco.nome }}</option>
</select>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for>Agência</label>
<input
class="form-control"
data-match-error="Agência"
name="agencia2"
v-model="cliente.agencia2"
placeholder="Agência"
required="required"
type="text"
/>
<div class="help-block form-text with-errors form-control-feedback"></div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for>Conta</label>
<input
class="form-control"
data-match-error="Conta"
placeholder="Nº da Conta"
name="conta2"
v-model="cliente.conta2"
required="required"
type="text"
/>
<div class="help-block form-text with-errors form-control-feedback"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label for>Banco</label>
<select name="banco3" class="form-control" v-model="cliente.banco3">
<option value>Selecione o Banco</option>
<option
v-for="banco in bancos"
:key="banco.id"
:value="banco.id"
>{{ banco.codigo }}-{{ banco.nome }}</option>
</select>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for>Agência</label>
<input
class="form-control"
data-match-error="Agência"
name="agencia3"
v-model="cliente.agencia3"
placeholder="Agência"
required="required"
type="text"
/>
<div class="help-block form-text with-errors form-control-feedback"></div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for>Conta</label>
<input
class="form-control"
data-match-error="Conta"
placeholder="Nº da Conta"
name="conta3"
v-model="cliente.conta3"
required="required"
type="text"
/>
<div class="help-block form-text with-errors form-control-feedback"></div>
</div>
</div>
</div>
</fieldset>
<fieldset class="form-group">
<legend>
<span>Section Example</span>
</legend>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for>First Name</label>
<input
class="form-control"
data-error="Please input your First Name"
placeholder="First Name"
required="required"
type="text"
/>
<div class="help-block form-text with-errors form-control-feedback"></div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for>Last Name</label>
<input
class="form-control"
data-error="Please input your Last Name"
placeholder="Last Name"
required="required"
type="text"
/>
<div class="help-block form-text with-errors form-control-feedback"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for>Date of Birth</label>
<input
class="single-daterange form-control"
placeholder="Date of birth"
type="text"
value="04/12/1978"
/>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for>Twitter Username</label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">@</div>
</div>
<input class="form-control" placeholder="Twitter Username" type="text" />
</div>
</div>
</div>
</div>
<div class="form-group">
<label for>Date Range Picker</label>
<input class="multi-daterange form-control" type="text" value="03/31/2017 - 04/06/2017" />
</div>
<div class="form-group">
<label>Example textarea</label>
<textarea class="form-control" rows="3"></textarea>
</div>
</fieldset>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" />I agree to terms and conditions
</label>
</div>
<div class="form-buttons-w">
<button class="btn btn-primary disabled" type="submit">Submit</button>
</div>
</form>
</div>
</template>
<script>
export default {
props: {
cliente: {
require: false,
type: Object,
default: () => {
return {
id:"",
nome: "",
cpf: "",
cep: "",
endereco: "",
numero: "",
bairro: "",
cidade: "",
estado: "",
telefone: "",
banco: "",
agencia: "",
conta: "",
banco2: "",
agencia2: "",
conta2: "",
banco3: "",
agencia3: "",
conta3: ""
};
}
},
updating: {
require: false,
type: Boolean,
default: false
}
},
computed: {
bancos() {
return this.$store.state.bancos.items.data;
}
},
methods: {
submitForm() {
const action = this.updating ? "updateCliente" : "storeClientes";
this.$store
.dispatch(action, this.cliente)
.then(() => this.$router.push({ name: "admin.clientes" }))
.catch();
}
}
};
</script>
<style scoped>
</style>
You can show the contents of that
./partials/formClienteComponent? you must use.vuein the file name...– Sergio
Yeah, I just put!
– André Cabral
The first code pad you have here in the question is what?
– Sergio
and the main component, and the second is partial. In this case formClienteComponent.Vue is imported within the.Vue Component
– André Cabral
So you have components nestled with the same name? I mean you have
<form-cliente>inside<form-cliente>?– Sergio
No, form-client is an alias of formClienteComponent. I am trying to import formClienteComponent.Vue >>>>>> Component.
– André Cabral