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

Explanatory for assets compiling Metronic 8


So I have a Laravel Metronic 8 app and I'm trying to understand how the asset compiling works. There are a lot of folders and a lot of code and directories in resources/assets:

- core
- demo8 (chosen demo)
- extended

Questions:
1. What are all these folders?
2. Why are core and demo folders so similar?
3. How are they being compiled exactly?

For eg. according to webpack.mix.js in line 51 it says "build Metronic css/js". What does this mean? Are these the main js assets? In line 54 it loads the following script:

.scripts(require(`./resources/assets/${demo}/js/scripts.js`), `public/${demo}/js/scripts.bundle.js`);


But 'resources/assets/demo8/js/scripts.js' in its turn loads components from 'resources/assets/core' directory. Why is this?

Lastly, I'm asking this because I would like to use Vue, but I have no clue how to install it? I do not want to use it as a SPA, some Vue components would just come in handy for some stuff. Any pointers?

I would appreciate some actual help. 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  :(

Replies (2)


I found some extra documentation, which I will read thoroughly.



Hi,

1. Those folders are the assets folder from the HTML version as the core. We do this way easier to update.

2. Demo folder is a demo level folder, while the core folder assets are shared assets being used by all demos.

3. Core and demo level assets will be combined.

style.scss and scripts.js are the demo level assets.

'resources/assets/demo8/js/scripts.js' is in the demo8 folder.

You can try to use the Inertia plugin to integrate with Vue. It has been made specifically for Laravel.
https://laravel.com/docs/9.x/frontend#using-vue-react

Thanks


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