A few question for an Inertia / Vue project

Hello happy

I'm building a CRM and as a developer I wanted to buy an admin template to take care of the visual bits for me. I'm building it with Laravel 9, Inertia and Vue. Bootstrap 5 seems like a good choice as for the CSS side.

I wanted to know a few things before using your template.

1/ As a fullstack dev, I like to customize my dashboards a lot. Is the markup / styling easily customizable? Can I easily take out a component from a page and use it wherever?
2/ Your page on themeforest refers to BootstrapVue, which if I'm not wrong still uses Bootstrap 4. How come?
3/ For an Inertia project, of course I won't be using Vue router, nor Vuex (at least not extensively), and I will mostly build my own business logic on the Laravel side, using Metronics only for the visual and interactions. Are your components easily adaptable to rely on themselves only for these purposes?
4/For example, a element that I would like to paginate and call for the server to get the wanted sets of data according to filters and sorting is something I do easily right now without any visual theme. Would your table templates' components be easily adaptable for this?

Thanks ahead.

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)

I have the same question as well. Would like to use Metronic with Laravel + Intertia + VueJs

We haven't tried Metronic with Inertia yet, we will check it and consider implementing Interia in upcoming releases.

Hi,

1)Yes you can easily customize styles by updating bootstrap variables in our scss files.

The main theme color variables are located in vue/demo1/src/assets/sass/core/components/_variables.scss you can update colors up to your color palette.

For more info, you can check our doc page: https://preview.keenthemes.com/metronic8/vue/docs/#/utilities#overview

2) In Metronic 7 we are using Vue2 and BootstrapVue, in Metronic 8 we are using Vue 3, since the official Bootstrap5 Vue 3 library is not released yet, we are using a plane Bootstrap 5.

3) To use our components separately you have to include bootstrap 5 styles and our custom styles from src/assets/sass/style.scss.

Also for theme interactive parts (Drawers, Menus, Scroll e.t.c) you need to initialize our ts components globally, you can check examples of initialization in the file src/core/plugins/keenthemes.ts.

4) In Vue we are providing a KTDatatable component that you can use to display, paginate, filter, and sort your data.

You can find demo examples on page:
https://preview.keenthemes.com/metronic8/vue/demo1/#/apps/customers/customers-listing

Also, check the component doc page:
https://preview.keenthemes.com/metronic8/vue/docs/#/kt-datatables

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