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?

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

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

Thank you.

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