formsvue.jspluginsvue-formulate

VueJS plugin rendering problems. Vue Formulate


So i am not profeccional in vueJs that`s why if you need some more additional information just write in coments i will try to provide it... This is the way that i intalling this plugin

import VueFormulate from '@braid/vue-formulate';
Vue.use(VueFormulate);

and in my template where i want to use this plugin

<FormulateInput
  type="email"
  name="email"
  label="Enter your email address"
  help="We’ll send you an email when your ice cream is ready"
  validation="required|email"
/>

but on browser page there is nothing and what i see in rendered page tree

<formulateinput 
  type="email" 
  name="email" 
  label="Enter your email address" 
  help="We’ll send you an email when your ice cream is ready" 
  validation="required|email">
</formulateinput>

So as i can see it is not rendered.

A little interting thing. When component where i whant to use plugin mounted then output in console plugin object, and it is exits

mounted() {  
   console.log(VueFormulate); 
}

screen from console screen from console

can you please help me to find what i miss? :3


Solution

  • The main problem was in template tags.

    And VueFormulate component in my template must be lower-cased, hyphen separated and with a closing tag

    <formulate-input
      type="email"
      name="email"
      label="Enter your email address"
      help="We’ll send you an email when your ice cream is ready"
      validation="required|email"
    ></formulate-input>
    

    instead of

    <FormulateInput
      type="email"
      name="email"
      label="Enter your email address"
      help="We’ll send you an email when your ice cream is ready"
      validation="required|email"
    />
    

    More information about syntax style:

    https://v2.vuejs.org/v2/style-guide/#Component-name-casing-in-templates-strongly-recommended

    enter image description here