I made it work the following way:
First, create file with your component template, methods and style, for example:
<template>
<div class="item-content item-input {{$props.status}}">
<div class="item-input-wrap">
<input {{#if $props.id}}id="{{$props.id}}"{{/if}}
{{#if $props.placeholder}}placeholder="{{$props.placeholder}}"{{/if}}
{{#if $props.required}}required{{/if}}
{{#js_if "this.$props.valid =='true'"}}validate{{/js_if}}
{{#js_if "this.$props.status =='readonly'"}}readonly{{/js_if}}
{{#if $props.type}}type="{{$props.type}}"{{else}}type="text"{{/if}}
{{#if $props.name}}name="{{$props.name}}"{{/if}}
{{#if $props.value}}value="{{$props.value}}"{{/if}}
class="myproject-input"
autocomplete="off"
value="{{escape $props.value}}"
>
</div>
</div>
</template>
<script>
export default {
data () {
return {
}
},
methods: {
},
on: {
}
}
</script>
<style>
input.myproject-input {
padding-left: 15px;
}
</style>
Then you should register your component in app.js like so:
import myprojectInput from '../pages/components/widgets/myproject-input.f7.html';
Framework7.registerComponent('myproject-input', myprojectInput);
Where myproject-input.f7.html is name of your component file.
Then you can use your component in layout of your app, for example:
<div class="row">
<div class="col-100">
<myproject-input
id="client-card-address"
status="readonly"
placeholder="Enter your address"
value="{{this.currentItemData['address']}}"
></myproject-input>
</div>
</div>