Get 2024 Templates Mega Bundle!19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets
Get for 99$

Metronic 9 Vue Integration


Hi, I have tried using Metronic 9. It works very well and meets my preferences. I successfully used it through Composer with HTML. However, when I switched to Nuxt.js (Vue) following the implementation instructions shown to me, I found some of your guidance to be inaccurate, and I encountered errors in running it. Specifically, the demo1.js script has several template scripts that are not properly declared, such as KTDom, KTToggle, and KTMenu. Could you provide a default package or starter pack for VueJs?


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 (12)


Hi,

We are thinking now of providing a seed project for all framework integration docs so you can just clone it from a public GitHub repo, drop the metronic core ts code from the purchased page and just run it.

We will announce it soon.

Regards.



Hi,

Thank you for your feedback.

Yes, we are currently working on a starter kit/seed app for React/Vue/Angular and we will provide it asap in the v9.0.2 update.

In the meantime if you have any other feedback or suggestions please let us know and we will try to take them into account in the upcoming updates.

Regards.



Hi,

Thank you for your prompt response.

I appreciate that you're working on a starter kit/seed app for React/Vue/Angular and that it will be included in the v9.0.2 update. That sounds very promising.

The idea of providing a seed project for all framework integration docs, which we can clone from a public GitHub repo and drop the Metronic core TS code, is excellent. It would certainly streamline the integration process and help avoid the issues I've encountered.

Looking forward to the upcoming updates. I'll keep an eye out for the announcement.

Thanks again for your support.

Regards,



Hi happy,

Sure, we will try to update the docs and release the repo within 24-48 hours. I appreciate your suggestion on this.

Regards,



Hi,

Thank you for the update. I appreciate your efforts to update the documentation and release the repository within 24-48 hours. This will be very helpful.

Looking forward to the release. If I have any further suggestions, I'll be sure to let you know.

Regards,



Hi,

We have already added a repo with Tailwind source code. Since it is a public repo, it doesn't contain theme assets. To run the application follow the steps below:

  1. Open the repo at https://github.com/KeenthemesHub/metronic-tailwind-html-integration.
  2. Download the metronic-tailwind-vue folder.
  3. Copy the src folder from the metronic-tailwind-html package and paste it into the metronic-tailwind-vue/src directory.
  4. Rename the copied folder to theme. The directory structure should now look like this: metronic-tailwind-vue/src/theme.
  5. Copy the media folder from metronic-tailwind-html/dist/assets and paste it into metronic-tailwind-vue/public.
  6. Install dependencies with npm install and serve the project with npm run dev.


Please let us know if you need any help on this topic or anything else.

Regards,
Lauris Stepanovs,
Keenthemes Support Team

Hi Lauris,

Thank you for the detailed instructions and for adding the repo with the Tailwind source code. I appreciate the effort your team has put into this.

I'll follow the steps provided and let you know if I encounter any issues or need further assistance.

Thanks again for your support.

Regards,



Hi Lauris,

Here my update.

I encountered an issue with Demo1.js, so I split it into four separate files: KTLayout.js, KTDom.js, KTToggle.js, and KTMenu.js to make it work. After making these changes, I ran into a problem with KTSticky, which can't access the beforeInit method. I haven't fixed this yet, but after removing it, the template works for viewing the theme.

Please let me know if there's a recommended solution for the KTSticky issue or if you have any other suggestions.

Thank you for your assistance.



HI,

To fix issue with src/theme/app/layouts/demo1.js you should change


KTDom.ready(() => {
KTLayout.init();
});


to


export default KTLayout;


We could not reproduce the error with our KTSticky component, can you attach the entire error message?

Regards,
Lauris Stepanovs,
Keenthemes Support Team



Hi,

here the error message
https://imgur.com/a/YjuDwBe



just found out the problem.

this line on index.ts need to be remove.

KTDom.ready(() => {
KTComponents.init();
});



Hi,

Do you import KTComponents from theme/core/index?

The correct file you should use is core/index.spa.ts which doesn't contain KTDom.ready code part.

Regards,
Lauris Stepanovs,
Keenthemes Support Team


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  :(