Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now
Light
Dark
System
Ask  Question

How to strip and use demo4 html menu in VueJs?


Hi, I want to use the aside menu from demo4 in a vue project. I will be converting the html code, css from the src folder and JS into a Vue component. The CSS is a 40k lines of code and so is the JS. I see that in the html/src folder I get separate SCSS files.

Which files will I need? _init.css, plugins.scss, style.scss, components/menu/_base.scss,components/menu/theme.scss? Do I have to pick specific CSS classes from init, plugins, style? I cannot use all of it as it will disturb the rest of my application layout which is not using bootstrap.

I then plan to convert the js/components/menu/menu.js file from HTML demo to a JS6 module compatible for Vue. Do I need any other JS code to port? I hope there is no jquery dependency required in the menu.js code.

Will this be successful at all to extract the exact menu code from html demo and port it to a Vue component?


user
Amod 4 years ago
Bootstrap 5 Vue HTML
2 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 (2)

user
Sean Author 4 years ago

Hi,

You can refer to demo 1 vue version in the download package and use the typescript version of core components including KTMenu. the aside menu requires bootstrap sass and custom core sass components as well. I would suggest you get the aside menu working first and you can try to exclude other unused components. You can refer to the html/css classes to determine which sass component is mandatory for the aside menu. jQuery is required for the aside menu.

Regard


user
Amod 4 years ago

Thank you.


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