FAQ

• npm install or yarn install errors
• Error: [plugin:vite:css] [sass] Can't find stylesheet to import
• npm install or yarn install warnings or installation warnings
• Why reproduce issue/bug in starter-kit?
• ACL - I have role based system for access control instead ability based
• How to check what frontend expects in API response
• How to update logo and text
• How to update navbar or footer
• Route transition is not working
• How to integrate your theme in our existing project
• Laravel and InertiaJs support?
• What is a CORS error?
• How to set title for each Individual page
• Nuxt Terminal Warnings

TIP

If you can't find your problem. Try searching related term as well.

Why breaking change was introduced?

As you already know, Vue 2 was using options API and vue 3 introduced composition API and people are loving the new composition API more. Moreover, Vue 3 introduced some nice features and added some breaking changes.

Vue core team achieved this by rewriting vue's codebase from the scratch 😱. As UI framework is built on top of Vue 3, UI framework also needs complete rewrite to adopt vue 3. Hence, we also have to rebuild the admin template from the scratch. Due to these factors, we got breaking changes that are hard to handle 🙁

npm install or yarn install errors

Causes of npm install or yarn install issue can be due to various things which include:

• Missing or inappropriate dependencies like node or some other environmental issues
• Dependency resolved by package manager (npm/yarn) conflict with other installed dependency
• The dependency of the package we use has an internal issue or that dependency has some issue with your environment
• Package or dependency of the package requires some additional step or configuration to work in your environment
• Downloaded package is broken or is got tampered

To resolve such installation issues:

• Please try again downloading the fresh package/zip from the purchased site and perform the installation again.
• Please make sure you are using the LTS version of a node that is recommended and not one with the latest features.
• run yarn cache clean or npm cache clean
• Try using yarn if possible (Recommended).

After following about steps still, you are getting the error please raise support at our support portal with the below details:

• Your OS information, Node version, npm/yarn version, Template/Package version
• Mention if you can run the fresh VueJS project using Vue CLI without our template
• Attache log file of the error you are getting in your console (Provide full log)
• Mention which command you are running
• Mention If you have any other machine, are you able to run our template on that machine

Error: [plugin:vite:css] [sass] Can't find stylesheet to import

Please refer to the danger note at installation section of the documentation.

npm install or yarn install warnings or installation warnings

You might get some warnings while running npm install or yarn install like below:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: materio-vuejs-admin-template@2.0.0
npm ERR! Found: video.js@8.10.0
npm ERR! node_modules/video.js
npm ERR!   dev video.js@"8.10.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer video.js@"7.x" from @videojs-player/vue@1.0.0
npm ERR! node_modules/@videojs-player/vue
npm ERR!   dev @videojs-player/vue@"1.0.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

The warnings you are receiving while installing are from library/packages we used.

We always keep our packages up to date when we make major releases. However, the writer of that package may use an older dependency that is no longer maintained for backward compatibility or any other code-related issue. But, that's not an issue. Those packages will work fine with our template.

Even if you like to try you can install these packages in fresh VueJS project without our template and you will get the same.

To resolve this using npm, while installing, please use the following command:

npm install --legacy-peer-deps

Why reproduce issue/bug in starter-kit?

Reproducing the issue/bug in our starter-kit with minimal dependencies can help in resolving issue/bug as quickly as possible rather than asking to try various things which will cost you valuable time.

If your bug/issue is related to UI and doesn't include laravel/any-other-backend and your issue/bug needs to show some dummy data please provide an example with dummy data via JSON file rather than providing full database and other backend related stuff.

I hope you will understand reproducing the issue in starter-kit as Q&A for technical issue/bug is a matter of trial and error. With the reproduced issue in the starter-kit, we will be able to provide you a worthy response in a single response.

TIP

If your issue is not related to laravel, please reproduce the issue in vue only starter-kit even if you are using Laravel + Vue.

NOTE

Please do not upload source code to public GitHub repo or any publicly available sources.

ACL - I have role based system for access control instead ability based

If you are using our ACL provided in our template then it is ability-based ACL not role-based. You can learn more about using role-based system using the same package we used. Please read in their official docs:

CASL - Roles With Static Permissions

How to check what frontend expects in API response

To determine what the frontend expects in API responses, you can refer to the fake API responses located in the src/plugins/fake-api/ folder.

For a specific list of fake API response endpoints related to a particular page, you can inspect the index.ts file within the corresponding page's directory. For instance, if you need the endpoints for the Invoice app, you can find them in the index.ts file located in the apps/invoice directory.

TIP

You can find authentication related fake responses in src/plugins/fake-api/handlers/auth/index.ts file.

How to update logo and text

You can update the logo and text from themeConfig.ts file. Please update themeConfig variable's app.name and app.logo to update the text and logo.

Article: How to change logo

How to update navbar or footer

You can use layout slots to add your custom navbar or footer. Please refer to layout docs for example with code snippet.

Route transition is not working

Please make sure to wrap a page with a single div so there are no multiple root elements.

<!-- Multiple root nodes -->
<template>
  <span>First paragraph</span>
  <span>Second paragraph</span>
</template>

Convert above code to below code:

<!-- Single root node by wrapping content with div -->
<template>
  <div>
    <span>First paragraph</span>
    <span>Second paragraph</span>
  </div>
</template>

How to integrate your theme in our existing project

1. First of all, you have to copy our @core into your project's src folder.
2. If you want to use our layouts including the vertical nav menu & appbar please extend our layouts from @core folder just like we did in our code (you can find them in src/layouts) and use them accordingly in your router. Please refer src/layouts and src/router folders for usage. As you are going to use our vertical nav or horizontal nav menu you also have to add navigation items placed in src/navigation. The last thing you have to do is update the App.vue.
3. The next thing is the src/plugins directory. In this, you have to grab vuetify plugin as our template is built upon this framework. Later, Add other plugins according to your requirement.

You can always reference our codebase for information & HowTo.

TIP

This FAQ will improve over time so please let us know your feedback if we missed anything.

Laravel and InertiaJs support?

Our template is primarily focused on utilizing Laravel as an API backend, and while we have not included explicit support for InertiaJs, it can be integrated with the template using the official documentation or tutorial guides provided by InertiaJs. Please keep in mind that we have not extensively tested the compatibility of our template with InertiaJs and we do not provide customer support for inertiaJs.

What is a CORS error?

CORS stands for Cross-Origin Resource Sharing. It is a security mechanism implemented in web browsers that controls access to resources (such as fonts, images, scripts, or API endpoints) on a web page from different domains.

CORS errors can be caused by either the frontend or the backend. On the frontend, the error can be caused by a misconfiguration of the browser's CORS settings. On the backend, the error can be caused by a misconfiguration of the server's CORS settings.

To troubleshoot a CORS error, you can use the following steps:

1. Check the browser's CORS settings. Make sure that the browser is configured to allow cross-origin requests.
2. Check the server's CORS settings. Make sure that the server is configured to allow cross-origin requests.
3. If the browser and server are both configured to allow cross-origin requests, then the error is likely caused by a misconfiguration of the browser or server. In this case, you will need to consult the documentation for the browser or server to find out how to fix the error.

Here are some common causes of CORS errors:

• The browser is not configured to allow cross-origin requests.
• The server is not configured to allow cross-origin requests.
• The request is using a method that is not allowed by the server.
• The request is using a header that is not allowed by the server.
• The request is using a cookie that is not allowed by the server.

In most cases, CORS errors occur because the server is not configured to allow cross-origin requests. Therefore, it is important to ensure that your server is properly configured to handle such requests. To diagnose and address the issue, you can attempt to replicate it in a blank Vue project. If the error persists in the blank project, it indicates that the server needs to be configured correctly. By resolving the server's CORS configuration, you can ensure that the issue will be resolved not only in the template but also in your specific project.

How to set title for each Individual page

For nuxt users, please refer to their official guide here.

For vue users typically, there is no need to modify the title in admin panels. However, if you still wish to make changes, you can achieve this by integrating the unhead/vue library into your project.

For detailed instructions regarding implementation, please visit the following link: Unhead Setup

Nuxt Terminal Warnings

Why am I seeing warnings related to Vuetify components when running nuxt?

The warnings you are encountering are due to the fact that Vuetify components are not fully Nuxt-ready by default. These warnings are typically triggered when you override Sass variables while using Vuetify components in a Nuxt.js project.

Are these warnings harmful, and do they affect the functionality of my Admin Dashboard?

No, these warnings are not harmful and do not impact the core functionality of your Admin Dashboard. They are primarily informational and are intended to alert you to potential compatibility issues between Vuetify and Nuxt.js when customizing the styling.

How can I resolve or suppress these warnings during development?

While the warnings can be safely ignored, there are a couple of approaches you can take to suppress them:

Turn off SSR (Server-Side Rendering): This approach can suppress the warnings, but it may not be ideal if SSR is essential for your development. Disabling SSR can help alleviate the warnings but may impact the overall development experience.

Vuetify Nuxt Module: Implementing the Vuetify Nuxt module can resolve the warnings. However, it's important to note that this approach may introduce some other issues, such as limitations with handling icon libraries other than the default Material Design Icons (MDI) used by Vuetify and potential challenges with the internationalization (i18n) setup for Vuetify components. Given these limitations, our development team has decided to wait for an official solution.

When can I expect these warnings to be resolved?

Both Vuetify and Nuxt.js communities are actively working towards improving compatibility. These warnings are expected to be addressed in future releases of either Vuetify or Nuxt.js.

We apologize for any inconvenience caused in the meantime and are committed to resolving this issue as soon as a fix is available from either party.

How can I stay updated on the progress of this issue?

You can keep an eye on the official repositories and release notes for both Vuetify and Nuxt.js for updates on this issue. Additionally, we will also notify users through our official communication channels once a resolution is available.

We would like to share few important reference links on this issue to keep track of this issue:

https://github.com/vuetifyjs/vuetify-loader/pull/313

https://github.com/nuxt/nuxt/issues/14124

https://github.com/vuetifyjs/vuetify-loader/issues/290

https://github.com/nuxt/nuxt/issues/15412

Is the warning related to Vuetify components a barrier to using my Admin Dashboard in production?

No, the warning related to Vuetify components is not a barrier to using your Admin Dashboard in production. This warning is purely a development-time informational message and does not affect the functionality, performance, or stability of your Admin Dashboard in a production environment.

Rest assured that your Admin Dashboard is fully functional and reliable for use in production scenarios. You can confidently deploy and utilize your Dashboard without any concerns related to the warnings seen during development.

We appreciate your understanding and patience as we work towards a smoother integration between Vuetify and Nuxt.js. In the meantime, if you have any other questions or encounter any issues, please don't hesitate to reach out to our support team for assistance.

Thank you for choosing our Admin Dashboard, and we apologize for any inconvenience caused by these warnings.