Get 2024 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
Get for 99$
Light
Dark
System
Ask  Question

Badge in left side menu


Hello,

Is there any example of adding a badge in the vue sidebar for all pages and the count will be from the API call?

I saw an example in the HTML demo in Inbox > Messages menu, I want the same as that.


P
Priyank Patel 2 years ago
Metronic Vue HTML
3 Answers
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)

user
Lauris Stepanovs Author2 years ago

Hi,

Since Vue 3 bootstrap 5 isn't released officially in we are using a plain bootstrap 5, you can add badges in the same way as we are doing this in the HTML version.


<span class="menu-badge">
 <span class="badge badge-success">3</span>
</span>


Check out our badges doc for more info:
https://preview.keenthemes.com/metronic8/demo1/documentation/base/badges.html

Regards,
Lauris Stepanovs,
Keenthemes Support Team


P
Priyank Patel 2 years ago

Hello,

Thank you for the quick response, I have integrated mentioned badge but I am facing an issue with updating count when a record gets deleted from the listing page it is not dynamically getting updated so is there any way where I can refresh badge count also?


user
Lauris Stepanovs Author2 years ago

I think you can use a vuex state to share values between a few different components.

Check vuex official doc:
https://vuex.vuejs.org/


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