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

Tabs, drop down menu not working vue+laravel


i am using the latest version of metronic theme vue in laravel.

Most of the things are working fine and I have even including
import { initializeComponents } from "@/core/plugins/keenthemes";
in app.vue

but many components such as tab, drop down are not working.

For example, if I try to open next tab, it shows 404 page

seems like I am missing something.

I am working under management folder under ts/src/views.

I saw there is also a crafted folder and seems like tabs in some of the pages like profile which are used inside components are working. But if I create anything under management folder or a new page even crafted tabs do no seem to work.

I am confused.
Any help?

Please see the image below for the details
https://i.ibb.co/hBkYHfN/Screen-Shot-2023-03-24-at-4-02-07-pm.png


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


Hi Denis,

Thank you for reaching out to us.

Could you please specify which integration is it?

Did you use our Vue + Larave integration post or it is your custom integration?

initializeComponents function initializes our custom components, for tabs you need to include bootstrap styles.

Regards,
Lauris Stepanovs,
Keenthemes Support Team



Yes, I did use that one.
So,bit new to this, so where am I suppose to call which css file?

The other bootstrap styles seems to be working for button, menu etc so bit confused?

Also, I am just using documentation from there
https://preview.keenthemes.com/metronic8/vue/docs/#/doc-overview

so, basically these should for work for all right?
or if it does not then why don't you please update above tutorials as well.

I saw element plus tab is working but it has very limited functionality and designs.

It has been more than one year people have been asking for laravel+vue stater kit that is fully working and maintained. But it still has not come. It is not good for vue+laravel developer like us (i can see lots of comments here) that we have to maintain things ourself. It is even too late to change the template now as lots of our works have been already done now. So, for html and other react developers the template maybe good, but for vue+laravel developer it has been struggle...hope some day the starter kit will come out...



Hi,

I'm sorry for the inconvenience.

We rechecked this in more detail in the latest Metronic version and it is a bug, right now only bootstrap styles are imported inside style.css, and those examples are broken due to missing js file imports.

We will include a fix for this bug in the next release, for now, as a temporary solution you can import js files below to your main.ts file.

import "bootstrap/dist/js/bootstrap";


There are many ways how to combine those two frameworks and different users use different approaches regarding their requirements, we still have a task for such Starterkit but we didn't find the most in-demand way at the moment. Once our developers will have time we will return to this and provide Vue + Laravel Starterkit in the next Metronic releases.

Stay tuned for updates via https://twitter.com/keenthemes and https://www.instagram.com/keenthemes/

Regards,
Lauris Stepanovs,
Keenthemes Support Team



Thank you.
I just realized that I was putting it in wrong place in app.vue rather than main.ts
anyways looks like working.

Regarding,starting kit, well I can see more than 10-15 comments in theme forest asking for starter kit. So, since it was ignored people don't bother to ask now. But this does not mean their is no demand. May be many people are avoiding using it or not buying it because they don't see laravel+vue starter kit. So, when you release it people will start using it.
I have heard that it will be available soon almost from year now so hope it will come out in real soon.

Also, another problem is, the html version is so good and loaded but i found vue version is very limited. And since it does not use jquery we cannot use any bootstrap thing as well.
For example, I need a draggable or kanban view in my vue+laravel app but even element-plus does not have that. So, I may have to bring in new package now and maintain it manually on top of theme (which will be problem during updates). So, would have been great if you can make most of the things available in html available in vue as well(at least somewhere near). Otherwise many demo in others are useless for vue.

thank you anyways. Great theme.



Hi,

Thank you for your feedback. We will revise those things and will try to improve them in the near future.

If you want to use draggable or kanban view then you can easily reuse them from our HTML version, let me know if you will need any additional help on this.

Regards,
Lauris Stepanovs,
Keenthemes Support Team



I end up installing additional package for it... and make it working...I found the template is very powerful for html version but not much for vue.....and most of the elements are limited to element plus.....also for non html version whole focus seems to be on react and angular...



Hi,

Right now, our SPA versions contain fewer available functionalities compared to our HTML version but you can reuse most of the plugins from our HTML version by referring to our documentation.
https://preview.keenthemes.com/html/metronic/docs/index

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