Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now
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 3 years ago
Metronic Vue HTML
3 Answers
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (3)

user
Lauris Stepanovs Author 3 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 3 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 Author 3 years ago

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

Check vuex official doc:


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(