VueJS plugin rendering problems. Vue Formulate - forms

Question

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
can you please help me to find what i miss? :3

Answer 1

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

Answer 2

try this working code:
App.js
<template>
<div id="app">
<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"
/></div>
</template>
<script>
import Vue from "vue";
import VueFormulate from '#braid/vue-formulate';
Vue.use(VueFormulate);
export default {
name: "App",
};
</script>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
and Main.js must be like this:
import Vue from "vue";
import App from "./App.vue";
new Vue({
render: h => h(App)
}).$mount("#app");
It actually render component but without style! if you want to use component style, write :
#import '../node_modules/#braid/vue-formulate/themes/snow/snow.scss';
in your scss style file or import https://github.com/wearebraid/vue-formulate/blob/master/dist/snow.min.css in your project!