I'd like to add a contact form using one of the plugins but I don't know how to integrate them. I tried using one of the widgets but they are not compatible with components and when trying to add them from the main page it doesn't render properly.

So far I tried Magic Forms and Custom Forms.

Basically it. I was trying to find the main file where all components are declared and couldn't find it.

What's the right way to create a custom component? I guess someone has to modify theme.yaml to add the component but will that be enough? What about adding a component that includes plugins or server code?

How can I enable this Vuejs code in my project?
jQuery(document).ready(function(t) {
t("[data-form-phone-field]").mask("+7 (999) 999-99-99"), t("[data-form-time-field]").mask("99:99"), t("[data-form-btn]").click(function() {
var e = t(this),
i = t(this).parents("[data-form]"),
o = i.find("[data-form-status]"),
a = {},
n = e.text(),
s = i.attr("data-form-template"),
r = i.attr("data-form-recipient"),
l = i.attr("data-reachGoal"),
c = ["Пожалуйста, укажите номер телефона", "Спасибо, сообщение отправлено", "При отправке сообщения возникли проблемы. Пожалуйста, отправьте письмо на ящик " + r];
return i.find("[required]").each(function() {
t(this).removeAttr("data-form-field-invalid"), "" != t(this).val() && t(this).val() != t(this).attr("placeholder") || (t(this).attr("data-form-field-invalid", ""), i.find("input[data-form-field-invalid], textarea[data-form-field-invalid]").addClass("shake animated"), setTimeout(function() {
i.find("input[data-form-field-invalid], textarea[data-form-field-invalid]").removeClass("shake animated")
}, 1e3))
}), i.find("[data-form-field-invalid]").length ? (o.html(c[0]).slideDown(500), !1) : (i.find("input, textarea, select").each(function(e) {
var i = t(this).attr("name"),
o = t(this).attr("placeholder") || t(this).prev().html();
o = t.trim(o.replace(/[:]/g, "")), a[i] = {
label: o,
value: t(this).val()
}
}), t.ajax({
url: "/themes/" + s + "/assets/forms/send-form.php",
type: "POST",
data: {
send: "do",
to: r,
subj: i.attr("title"),
data: a
},
beforeSend: function() {
e.text("Отправка...")
},
success: function(t) {
var a = parseInt(t);
return e.text(n), o.html(c[a]).slideUp(500), 1 == a && (i.attr("data-form-success", ""), i.find("input, textarea, select").val("")), yaCounter39444945.reachGoal(l), !0
},
error: function(t, e, i) {
alert(e + "," + i + "," + t.responseText)
}
}), !1)
})
})

Can you please share how this code works, and what should be modified from default template?
Thanks in advance.

after yarn install, how do i make october can parse dist/pages/*.htm