Discussion on Materialize - Next.js, Vuejs, Nuxt, HTML, Laravel, Django, Asp.Net Material Design Admin Template

Discussion on Materialize - Next.js, Vuejs, Nuxt, HTML, Laravel, Django, Asp.Net Material Design Admin Template

Cart 12,636 sales
Recently Updated
Well Documented

PIXINVENT supports this item

Supported

This author's response time can be up to 1 business day.

566 comments found.

I changed the primary colour from blue to my brand colour but I also want to retail the blue colour as a colour theme on my app, How do I go about it? Thanks

We kindly request that you open a support ticket through our support portal: https://pixinvent.ticksy.com.

Regards.

Please note that this link is returning http error 500

Apology for the extra . In the link, use https://pixinvent.ticksy.com/

How can I change the background colours of both the vertical menu and the pages in the dark mode of the next.js version

We kindly request that you open a support ticket through our support portal: https://pixinvent.ticksy.com.

Regards.

I was a dropdown button with a form in it in the demo under dropdowns but there is no component for it on nextjs. How do I achieve it? I want to create a button that when clicked, it displays a form in it.

Hi tommysyn,

Thanks for getting in touch with us.

To achieve the desired behavior of displaying a form upon clicking a button, you can use a dialog component and embed the form within it. This approach is demonstrated in our Dialog Examples page, which you may find helpful: https://demos.pixinvent.com/materialize-nextjs-admin-template/demo-1/en/pages/dialog-examples. Using a dialog provides a clean and user-friendly way to handle interactive forms triggered by button clicks.

If you require a different approach or have any additional questions, we kindly recommend opening a support ticket through our support portal: https://pixinvent.ticksy.com.

Regards.

KLA6 Purchased

A very well made startkit for Laravel! I hope “View All Notification” page would be added in the next update.

Hello KLA6,

Thanks for your valuable feedback & suggestion.

frainzy

frainzy Purchased

​The vertical nav menu is unstable, I have tested and tried on different mobile phone and same issue. It keeps scrolling down on it own when I scroll up and shaky sometimes and this is from your demo website. I have same issue on mine site while using this template. How do i fix this issue. Very important. Materialize – Nuxt

Hi frainzy,

Thank you for bringing the sidebar sliding issue to our attention. We want to assure you that we are aware of this issue and we are working on it, which might be fixed in an upcoming release. This issue stems from the `perfectScrollbar` library we are utilizing. We might replace the `perfectScrollbar` with `Browser Native scrollbar` in a future update.

In the meantime, you can replace the `perfectScrollbar` with `Browser Native scrollbar`.

Regards.

frainzy

frainzy Purchased

Noted. Should it matter, the issue arise from @ps-scroll-y=”handleNavScroll” of in @layout/component/VerticalNav.vue

Hello Frainzy,

Thank you for the detailed investigation! You’re absolutely right – the issue is related to the @ps-scroll-y=”handleNavScroll” event handler in VerticalNav.vue. The handleNavScroll function is likely causing the instability due to how perfectScrollbar handles scroll events on mobile devices.

As suggested, if you’re replacing perfectScrollbar with the native browser scrollbar, you’ll need to replace @ps-scroll-y with the native @scroll event and adjust the handler accordingly.

If you need any further assistance implementing the workaround, please let us know.

For technical support, we request you to create a support ticket here: https://pixinevnt.ticksy.com/

do you provide all the demos in vue-laravel with data in download zip especially ecommerce one?

Hello Theawesomecoder,

We do not provide the demos in a zip file, but we provide all the fake data used for display in the full version of the project.

AxiomaX Purchased

Hello,

I’m currently using Materialize v8.1 with Next.js 12 for my project. I see the template is now at v13.11.0.

I purchased this template in 2022, but my support period has expired. If I purchase extended support now, would you be able to help me migrate/update from v8.1 to the latest version (v13.11.0)?

Specifically, I’d like to know: - What’s included in the support package for migration assistance? - Are there breaking changes between v8.1 and v13.11.0 I should be aware of? - What version of Next.js does v13.11.0 use?

Thank you!

Hi AxiomaX,

Thank you for reaching out to us.

Regarding your query about migrating from Materialize v8.1 to the latest version (v13.11.0), I would like to provide the following information:

1. Next.js Version and Router Changes:

- In Materialize v8.1, we used Next.js v12 with the pages router. - Starting with Materialize v13.1.0, as outlined in our changelog (https://demos.pixinvent.com/materialize/changelog.html), we have deprecated the pages router in favor of the app router. We continued to support the pages router until the end of 2024. - The latest version, Materialize v13.11.0, uses Next.js v16 along with the app router.

2. Migration Considerations:

- It is important to note that migrating directly from the pages router to the app router is not a straightforward process. Unfortunately, a direct migration path is not available. - To upgrade to the latest version of Materialize with the app router, you would need to recreate your project from scratch using the new app router structure. This is due to the significant changes introduced in Next.js and our template since v8.1.

3. Continued Use of v8.1:

- If you do not require the new features or changes in the latest template version and are content with the pages router, you may continue using your existing template with Next.js v12 and the pages router. This would not require an immediate update.

Regarding extended support, we generally assist with addressing bugs and resolving issues. However, please note that migration from the pages router to the app router falls outside the scope of our support.

Please let us know if you have any other queries.

there should be an option to make UI more compact in case we are looking to build a SAAS ui. Current UI works for most purposes but need to have even tighter padding/margins to have a compact UI

Hello partners85,

Thanks for purchasing our theme and getting in touch with us. Could you please let us know for which version you are asking about?i.e, HTML, Next

BTW, you make it compact, you can change the CSS variable—bs-root-font-size: 14px; or less to it.

i am using nextjs version.. not only the font.. but all textbox, dropdown, card etc.. i want to reduce spacing everywhere so that i can give a more compact SaaS look and feel

Hi partners85,

Thank you for providing the details regarding your use of the Next.js version.

We understand your need for a more compact layout to suit a SaaS application. While we acknowledge that adjusting the spacing can help achieve this goal, we would like to advise caution when making such changes, as modifying the default spacing may impact the overall visual appeal and user experience of the template.

If you still wish to proceed with customizing the spacing, please note the following:

The spacing throughout the template is defined using a function-based approach, which can be found in the `src/@core/theme/spacing.ts` file. However, we recommend refraining from making changes directly in this file, as it resides within the `src/@core` folder. Instead, you can override the spacing values in the `src/components/theme/mergedTheme.ts` file, which provides a safer and more flexible method to adjust the layout.

Additionally, you will need to update the `src/components/theme/index.tsx` file as outlined here: https://demos.pixinvent.com/materialize-nextjs-admin-template/documentation/docs/guide/development/theming/overview/#common-customization-steps.

Please let us know if you have any further queries.

For Nextjs Template, does it have backend & database configure? If yes, which one? If no, any guides on this?

Hi minyu9,

We have utilized Prisma to store data for users who authenticate via Google. You can refer to the `src/prisma` folder for the same.

If you would like to remove Prisma from the template, please refer to the following documentation: https://demos.pixinvent.com/materialize-nextjs-admin-template/documentation/docs/guide/authentication/remove-auth#remove-google-provider-from-the-full-version

If you are not using Google authentication, NextAuth.js is involved by default for authentication. The documentation below provides additional details regarding authentication within the template: https://demos.pixinvent.com/materialize-nextjs-admin-template/documentation/docs/guide/authentication/intro

Please let us know if you have any further queries.

Regards.

Hello how do I change the site icon in the next js version

smit_bs

smit_bs Author Team

Hello Tommysyn,

Thank you for your message and for using our theme!

For changing site logo in next.js version, Please refer our https://demos.pixinvent.com/materialize-nextjs-admin-template/documentation/docs/guide/logo#customizing-the-logo docs

intoara

intoara Purchased

Hello, I launched a new website using your theme. Also I purchased additionally a regular license for a new website. For using this license, should I announce this license in website ? If yes, how do i notice this license ? Thanks,

Hello,

Thank you for your message and for using our theme!

There’s no need to announce or display the license publicly on your website. The important thing is that the person or entity who owns the platform/domain holds a valid license for its use.

If you’ve already purchased a separate regular license for your new website, that’s perfectly sufficient.

Best regards, Team PixInmvent

Hello, I am new to react and nextJS, I added a forgot password page to my next starter kit project. How to I create a link for the page and make it visible on my browser?

Hello tommysyn,

Thanks for purchasing our theme!

Our project uses the Next.js App Router, so you can create a page as usual in Next.js. You can check the docs here: Next.js Project Structure.

You may also refer to our full version, which includes several ready-to-use pages (like the Forgot Password page). To add your page to the menu, see: Menu Examples. For technical issues, please open a support ticket next time at https://pixinvent.ticksy.com/ so our team can assist you better.

Thanks!

Hi, I’m planning to purchase the Materialize Next.js template, but I only want to work with plain JavaScript, not TypeScript. Does the template include a JavaScript-only version, or is it entirely written in TypeScript? I just want to make sure before buying.

Hi gulsah_sabanci,

Thanks for getting in touch with us.

Yes, we offer both JavaScript and TypeScript versions. You are welcome to use either one and switch between them as needed in the future.

Please do not hesitate to contact us if you have any further questions.

I just tried to build a fresh download of the latest version and it’s spitting a ReferenceError: require is not defined in ES module scope, you can use import instead “require.resolve(’@iconify-json/ri/icons.json’)” in file \src\plugins\iconify\build-icons.ts Can you please provide a link to fix?

Hello jorgemorando,

Thank you for purchasing our theme.

Could you please specify the version where you’re encountering the issue? Are you using Vue or Nuxt with TypeScript or JavaScript? Additionally, is the error occurring in the Full Version or the Starter Kit version? Providing these details will help us reproduce the issue on our end.

For technical support, please create a support ticket on https://pixinvent.ticksy.com/. Our technical team will assist you in resolving the issue, and you’ll be able to track its progress.

Thanks

I am using Vue, and when running pnpm install to install dependencies, I get an error related to the iconify declaration:

ReferenceError: require is not defined in ES module scope, you can use import instead “require.resolve(’@iconify-json/ri/icons.json’)” in file \src\plugins\iconify\build-icons.ts

I am currently using Node.js version 22. What should I do to fix this issue?

Hello Quocdat254,

For technical support, please create a support ticket on https://pixinvent.ticksy.com/. Our technical team will help you to resolve the your issue.

Why does assigning an ability with a value other than action as manage and subject as all always return false when using can(...)?

I’ve identified the issue: in the navigation menu, items are not displayed if action and subject are not defined correctly according to CASL. As a suggestion, it might be more user-friendly if menu groups without action and subject defined were always visible, even when they are not specified in CASL.

Hello quocdat254,

There is no need to define action and subject with each navigation menu item. The condition is that you should be logged in as a user that has access to see the navigation item. We request you to carefully go through the casl docs for our template: https://demos.pixinvent.com/materialize-vuejs-admin-template/documentation/guide/access-control.html#access-control

This will give you a clear view on how casl is implemented in our template. If you have any other issue, please feel free to create support ticket on: https://pixinvent.ticksy.com/. Our technical team will help you to resolve the your issue.

intoara

intoara Purchased

Hello, I have used your theme in a my website by one license. And I plan to launch a new website using your theme. Do I again purchase a regular license for a new website ? Or Do i need any license ?

Thanks,

Hi intoara,

Thanks for getting in touch with us.

Yes, you will need to purchase an additional license for each separate website, as this is the only type of license provided by ThemeForest. As stated in the license terms: “Use, by you or one client, in a single end product”.

If you have any further queries, feel free to ask.

Regards.

According to the initialization flow, the router is registered before the pinia store. However, inside my router configuration (e.g., in additional-routes.ts), I need to call a store to check values (auth) and trigger an API call. This causes an error because the store has not been initialized yet when the router is set up. How should I handle this so that I can keep the proper initialization order while still being able to use the store inside the router?

In the HTML version I see there is a toasts component, but in the Vue version I don’t see it. Is there a way to use toast in the Vue version?

Hello Quocdat254,

In Vue version, We are using the Vuetify as a component library. In Vuetify, we have snackbar component to use for toast. You can see the more details here: https://demos.pixinvent.com/materialize-vuejs-admin-template/demo-1/components/snackbar

For more technical support, we request you to create a support ticket at: https://pixinvent.ticksy.com/. Our technical team will help you to resolve the issue.

I want the close modal button at the top right to behave like in the Vuexy template. How can I make it stay visible (not hidden) when scrolling the modal content?

smit_bs

smit_bs Author Team

Hello quocdat254,

Thank you for reaching out!

Please note that the Vuexy and Materialize templates use different design systems, so achieving the exact same behavior for the close button will require some customization on your part. However, to make the close modal button stay visible while scrolling the modal content, we have provided an example in the modals section of our demo.

You can refer to this code example for guidance on implementing this functionality: https://demos.pixinvent.com/materialize-html-admin-template/html/vertical-menu-template/ui-modals.html

If you have any additional questions or need further assistance, please feel free to reach out, and I’ll be happy to help!

Thank you for your support!

ebsen

ebsen Purchased

Hi,

What are the differences between the Vuexy template and the Materialize template?

Hi ebsen,

Thanks for getting in touch with us.

The main distinction between these themes is the UI, in addition to the varying frameworks we provide.

If you have any more questions or need further information, please feel free to ask.

Regards.

ebsen

ebsen Purchased

Hi neel_brahma,

I had developed with Materialize. Bu Vuexy seems more popular. I would like to swith to a more popular one.

COuld you please write down a comparison table showing the important distinctions?

Hi ebsen,

The primary difference between Vuexy and Materialize lies in the UI, specifically, the styling of the template. Regarding the framework, I was referring to the possibility that the template’s styling may vary slightly depending on the framework and libraries used.

If you have further queries, please feel free to ask.

Regards.

by
by
by
by
by
by

Tell us what you think!

We'd like to ask you a few questions to help improve ThemeForest.

Sure, take me to the survey