Introducing ReUI:Open-source UI components and apps built with React, Next.js and Tailwind CSS
Browse ReUI

KTComponents.init() not working on SPA


hello, I'm just learning front end design. I encountered problems when integrating the metronic 8 template which is Backend Console with my Vue project. I have added KTComponents.init(); onMounted on each of my pages, but when moving to a new page some components don't work, for example the search bar.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (3)


Med Spa in Little Elm offers a wide range of high-quality deep cleansing facial services and treatments tailored to rejuvenate and revitalize your skin. Known for providing the best facial treatments in Little Elm, Malkaspa beauty culture med spa specializes in deep cleansing facials that thoroughly purify your skin, removing impurities and leaving you with a refreshed and glowing complexion. Their expert team ensures a luxurious and personalized experience, making it the perfect destination for all your skincare needs.



Hi,

Thank you for reaching out to us.

KTComponents.init() contains initialization for primary global components. However, it doesn't include initialization for KTSearch component, you can find examples of how to use KTSearch in js/custom/apps/subscriptions/add/customer-select.js and our documentation https://preview.keenthemes.com/html/metronic/docs/general/search.

Regards,
Lauris Stepanovs,
Keenthemes Support Team



div class="m-0">
<div class="d-flex mb-10">
<div

class="d-flex align-items-center w-lg-400px"
data-kt-search-keypress="true"
data-kt-search-min-length="2"
data-kt-search-enter="enter"
data-kt-search-layout="menu"
data-kt-menu-trigger="auto"
data-kt-menu-permanent="true"
data-kt-menu-placement="bottom-start"
data-kt-menu-flip="bottom"
data-kt-search="true"
>


This quick search cannot be initiated


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(