GithubHelp home page GithubHelp logo

creativetimofficial / ct-vue-material-kit-pro Goto Github PK

View Code? Open in Web Editor NEW
11.0 6.0 10.0 25 KB

Vue Material Kit Pro - Premium Material Design UI Kit

Home Page: https://demos.creative-tim.com/vue-material-kit-pro

vue vuejs2 vuejs vue-cli vue-components material-ui-kit creative-tim webdesign vue-material ui-kit

ct-vue-material-kit-pro's Introduction

version GitHub issues open GitHub issues closed

Image

Vue Material Kit 2 PRO is our newest premium VueJS Design System. Its amazing design is inspired by Material Design and contains all the components you need for your development. If you’re a developer looking to create good-looking websites, rich with features, and highly customisable, here is your match.

Fully Coded Elements

Vue Material Kit 2 PRO is built with over 100 frontend individual elements, like buttons, inputs, navbars, alerts or cards, giving you the freedom of choosing and combining. All components can take variations in color, which you can easily modify using sass files. You will save a lot of time going from prototyping to full-functional code because all elements are implemented.

This Premium VueJS 3 & Bootstrap 5 template is coming with pre-built design blocks, so the development process is seamless, switching from our pages to the real website is very easy to be done. View all components here.

Documentation built by Developers

Each element is well presented in very complex documentation. You can read more about the documentation here.

Example Pages

If you want to get inspiration or just show something directly to your clients, you can jump-start your development with our pre-built example pages. You will be able to quickly set up the basic structure for your web project.

View example pages here.

HELPFUL LINKS

Special thanks

During the development of this dashboard, we have used many existing resources from awesome developers. We want to thank them for providing their tools open source:

  • VueJS 3 - An approachable, performant and versatile framework for building web user interfaces.
  • Bootstrap 5 - Powerful, extensible, and feature-packed frontend toolkit.
  • Popper.js - Kickass library used to manage poppers
  • Choices JS - A nice plugin that select elements with intuitive multiselection and searching but also for managing tags.
  • Vue Form Slider - A comprehensive form builder for Vue.js that makes form development a breeze.
  • Pinia - The Vue Store that you will enjoy using.
  • PrismJS - A lightweight and extensible syntax highlighter.
  • TypedJS - A JavaScript Typing Animation Library.
  • Vue Clipboard 3 - Easily copy to clipboard in Vue 3.
  • Vue Count To - A dependency-free, lightweight vue component for count up.
  • Vue Flatpickr Component - Vue.js component for Flatpickr date-time picker.
  • Nepcha Analytics for the analytics tool. Nepcha is already integrated with Vue Material Kit 2 PRO. You can use it to gain insights into your sources of traffic.

Let us know your thoughts below. And good luck with development!

Table of Contents

Versions

VueJS

| Vue Material Dashboard 2 PRO

Demo

View More.

Quick start

Quick start options:

Terminal Commands

  1. Download and Install NodeJs LTS version from NodeJs Official Page.
  2. Navigate to the root ./ directory of the product and run yarn install or npm install to install our local dependencies.

Documentation

The documentation for the Material Kit is hosted at our website.

What's included

Within the download you'll find the following directories and files:

vue-material-kit-2-pro
    ├── public
    ├── src
    │   ├── assets
    │   │   ├── css
    │   │   ├── fonts
    │   │   ├── img
    │   │   ├── js
    │   │   └── scss
    │   ├── components
    │   │   ├── MaterialAlert.vue
    │   │   ├── MaterialAvatar.vue
    │   │   ├── MaterialBadge.vue
    │   │   ├── MaterialButton.vue
    │   │   ├── MaterialCheckbox.vue
    │   │   ├── MaterialInput.vue
    │   │   ├── MaterialPagination.vue
    │   │   ├── MaterialPaginationItem.vue
    │   │   ├── MaterialProgress.vue
    │   │   ├── MaterialSnackbar.vue
    │   │   ├── MaterialSocialButton.vue
    │   │   ├── MaterialSwitch.vue
    │   │   └── MaterialTextArea
    │   ├── examples
    │   │   ├── cards
    │   │   ├── footers
    │   │   ├── navbars
    │   │   ├── tables
    │   │   ├── Breadcrumbs.vue
    │   │   └── Header.vue
    │   ├── layouts
    │   │   ├── sections
    │   │   │    ├── attention-catchers
    │   │   │    ├── components
    │   │   │    ├── elements
    │   │   │    ├── input-areas
    │   │   │    ├── navigation
    │   │   └──  └── page-sections
    │   ├── router
    │   ├── stores
    │   ├── views
    │   │   ├── Apps
    │   │   ├── Authentication
    │   │   ├── Blogs
    │   │   ├── Company
    │   │   ├── Extra
    │   │   ├── LandingPages
    │   │   ├── Presentation
    │   │   └── Support
    │   ├── App.vue
    │   ├── main.js
    │   └── material-kit.js
    ├── .eslintrc.json
    ├── .gitignore
    ├── CHANGELOG.md
    ├── ISSUE_TEMPLATE.md
    ├── index.html
    ├── package.json
    ├── README.md
    └── vite.config.js

Browser Support

At present, we officially aim to support the last two versions of the following browsers:

Resources

Reporting Issues

We use GitHub Issues as the official bug tracker for the Vue Material Kit 2 PRO. Here are some advices for our users that want to report an issue:

  1. Make sure that you are using the latest version of the Vue Material Kit 2 PRO. Check the CHANGELOG from your dashboard on our website.
  2. Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed.
  3. Some issues may be browser specific, so specifying in what browser you encountered the issue might help.

Technical Support or Questions

If you have questions or need help integrating the product please contact us instead of opening an issue.

Licensing

Useful Links

Social Media

Twitter: https://twitter.com/CreativeTim

Facebook: https://www.facebook.com/CreativeTim

Dribbble: https://dribbble.com/creativetim

Google+: https://plus.google.com/+CreativetimPage

Instagram: https://instagram.com/creativetimofficial

ct-vue-material-kit-pro's People

Contributors

dragosct avatar marqbeniamin avatar sajadevo avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

ct-vue-material-kit-pro's Issues

dropdown list behind modal

Hi,

I use a dropdown list on modal form. But it appears behind modal form.
I have to add z-index: 9999 !important; in .md-menu-content to workaround it. Is there any better way to make it work? Is this a bug?

Applying Creative Tim CSS to Vue Material

Hi there,

Is there a way that I can npm install vue-material and then just use the CSS from the package I downloaded from Creative Tim?

Where would I find the CSS that overrides the default Vue Material?

Am I understanding this correctly.

PS: I don't like the idea of having to copy all the dependencies from the example vue-cli project I bought into my nuxt project. Maybe just the CSS.

Thanks,

[Bug] About Us - "Let's Talk" Button Zooms Page on Keyboard Input but Doesn't "Unzoom" when click on Done for entry.

Version

v1.2.2

Reproduction link

https://demos.creative-tim.com/vue-material-kit-pro/#/

Operating System

iOS

Device

iPhone

Browser & Version

Chrome and Firefox

Steps to reproduce

  1. Browse to link above
  2. Select 3 bars in upper right
  3. Chose Examples - About Us (then close menu )
  4. Scroll to Bottom and click on "Your Name"
    4b. Notice that the page zooms in some.
  5. Type in something and the select Done

What is expected?

Expected that once we click Done the page returns to normal zoom level.

What is actually happening?

When we hit done, the page does not return to normal zoom level. We need to pinch the screen to get the website to go to normal zoom mode.


Solution

Additional comments

This is also happening on the web page I created using Vue Material Kit. I was able to reproduce it online.

Having problems installing the template with npm into my application

Prerequisites

Please answer the following questions for yourself before submitting an issue.

  • I am running the latest version
  • I checked the documentation and found no answer
  • I checked to make sure that this issue has not already been filed
  • I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

I was expecting to be able to install the template via npm into my project.

Current Behavior

npm install the template from a file, but it is not working

I am having trouble setting up the template in my Vue app. I installed it via npm into my Vue app, but I cannot find a way to make it work. After the installation, the build process showed me a depedency error because vue-material was not installed. I installed it and the vue-material started working partially, I could not make it work completely. For example, the buttons did not show the background colore correctly. However, there is no sign of having the Pro version active. Only the Vue Material one.

The documentation is not clear enough for me to understand what is missing. I really need help with this. Thanks

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

  1. vue create myapp
  2. npm install localfolder-containing-template -save
  3. npm run serve
    ---- I start having dependency error at built time. Vue-Material is missing.
  4. npm install vue-material -save
  5. npm run serve
    ---- now it compiled but not all css appear to be working. I tested the the following:
    Default
    Ripple Off
    Primary
    Accent
    Disabled

Context

Please provide any relevant information about your setup. This is important in case the issue is not reproducible except for under certain conditions.

  • Device: macbook pro
  • Operating System: osx
  • Browser and Version: chrome Version 71.0.3578.98

Failure Logs

[email protected] serve /Users/jrisaza/desarrollo/vuejs-projects/napp
vue-cli-service serve

INFO Starting development server...
98% af Failed to compile with 3 errors9:29:37 PM

These dependencies were not found:

  • vue-material in ./src/main.js
  • vue-material/dist/theme/default.css in ./src/main.js
  • vue-material/dist/vue-material.min.css in ./src/main.js

To install them, you can run: npm install --save vue-material vue-material/dist/theme/default.css vue-material/dist/vue-material.min.css


thanks

[Bug] Examples - About Us Drop Down Doesn't Close in Chrome or Firefox on iPhone

Version

v1.2.2

Reproduction link

https://demos.creative-tim.com/vue-material-kit-pro/#/

Operating System

iOS

Device

Apple iPhone

Browser & Version

Firefox and Chrome

Steps to reproduce

  1. Browse to above link
  2. Click on 3 bars in upper right
  3. Select Examples then About Us

What is expected?

We browse to About Us Page and the drop down closes.

What is actually happening?

We browse to About Us Page but the drop down stays open.


Solution

Additional comments

This is also happening when I run Vue Material Kit Pro on my pc and browse to http://10.0.0.201:8082/ from my phone. This same behavior happens when I use firefox and go into inspect mode and toggle the device toolbar.

Failed to decode downloaded font

I'm running the default Vue project and I'm getting the following error on Chrome console:
Failed to decode downloaded font: https://fonts.gstatic.com/stats/Material+Icons/normal/400

All I did was unzip, npm install, npm run dev

[Bug] npm run serve fails

Version

1.3.0

Reproduction link

https://www.google.com

Operating System

Win

Device

Laptop

Browser & Version

n/a

Steps to reproduce

npm install

npm run serve

What is expected?

Server starts

What is actually happening?

ERROR Failed to compile with 5 errors 10:31:15

These relative modules were not found:

  • ./presentation/Cards.vue in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Presentation.vue?vue&type=script&lang=js&
  • ./presentation/Components.vue in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Presentation.vue?vue&type=script&lang=js&
  • ./presentation/Content.vue in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Presentation.vue?vue&type=script&lang=js&
  • ./presentation/Introduction.vue in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Presentation.vue?vue&type=script&lang=js&
  • ./presentation/Sections.vue in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Presentation.vue?vue&type=script&lang=js&

Solution

Additional comments

how to import into node_modules / use components from library

Prerequisites

Please answer the following questions for yourself before submitting an issue.

  • I am running the latest version
  • I checked the documentation and found no answer
  • I checked to make sure that this issue has not already been filed
  • I'm reporting the issue to the correct repository (for multi-repository projects)

With other ui libraries i do an npm -i <ui-library-name> is there a way to make your components into a npm package? Is there any way to put the source code in node_modules and reference single components with import statements?

If not, I'm finding your kit very difficult to work with. This was not explained (that this is a boilerplate template, not a component framework like bootstrap-vue, veutify, etc) up-front in the description with purchase.

Not working on Internet Explorer

Prerequisites

Please answer the following questions for yourself before submitting an issue.

  • I am running the latest version
  • I checked the documentation and found no answer
  • I checked to make sure that this issue has not already been filed
  • I'm reporting the issue to the correct repository (for multi-repository projects)

On Internet Explorer the page doesn't show. Console doesn't throw any errors. Just a blank page.
You can try it here: www.tcmpoints.com

Menu does not close on mobile

Prerequisites

Please answer the following questions for yourself before submitting an issue.

  • [X ] I am running the latest version
  • [X ] I checked the documentation and found no answer
  • [X ] I checked to make sure that this issue has not already been filed
  • [X ] I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

The expected behavior is the same as browsing from desktop: click on a menu item, and it will automatically collapse after target is loaded

Current Behavior

Menu stays open even after target page has loaded

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

  1. Open https://demos.creative-tim.com/vue-material-kit-pro/?_ga=2.110734983.30255889.1554120104-1780603151.1553967052#/
  2. Click Menu/Sections/Teams
  3. Teams page will be shown but menu will still open

Context

Please provide any relevant information about your setup. This is important in case the issue is not reproducible except for under certain conditions.

  • Device: iPhone X/8/7
  • Operating System: iOS
  • Browser and Version: Safari/Chrome latest

[Bug] Chips not underlined as inputs

Version

Latest

Reproduction link

Did not found it in your documentation but here are the chips im talking about with the expected behavior:
https://vuematerial.io/components/chips

Operating System

Windows

Device

Computer

Browser & Version

Chome

Steps to reproduce

Using this from Vue Material:
<md-chips v-model="fruits" md-placeholder="Add fruit..."></md-chips>

There is no underlining to tell the user he can type here like all other inputs. The underline is there in https://vuematerial.io/components/chips but not when I use it on your kit.

What is expected?

To have an underlining that change color when focused like all inputs.

What is actually happening?

no underline. User will not know he needs to fill this field.


Solution

Additional comments

[Bug] npm install issue

Version

1.3.0

Reproduction link

https://github.com/Chaksack/quickteller.git

Operating System

macos

Device

macbook

Browser & Version

chrome

Steps to reproduce

npm install

What is expected?

node module files would be installed

What is actually happening?

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/eslint
npm ERR! dev eslint@"7.25.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer eslint@">= 1.6.0 < 7.0.0" from @vue/[email protected]
npm ERR! node_modules/@vue/cli-plugin-eslint
npm ERR! dev @vue/cli-plugin-eslint@"4.5.12" 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.
npm ERR!
npm ERR! See /Users/mac/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/mac/.npm/_logs/2021-10-09T12_01_44_605Z-debug.log


Solution

Additional comments

Rotating Card on Microsoft Edge

Prerequisites

Please answer the following questions for yourself before submitting an issue.

  • I am running the latest version
  • I checked the documentation and found no answer
  • I checked to make sure that this issue has not already been filed
  • I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

Rotating cards shouldn't show the action button before "mouse over" and shouldn't be grey.

Current Behavior

Rotating cards have two sides, front and back. Back is shown when "mouse over". Currently, the first time I open the page the cards are grey. If I "mouse over" they show the back, but when I move the mouse away, it still shows the action button from the back side, with the text in backwards. AFAIK this only happens on Microsoft Edge.
You can test it here: www.tcmpoints.com

Links to screenshots on OneDrive:
https://1drv.ms/u/s!AnlvHDhqbdln1BbhWo4lZz573GJN
https://1drv.ms/u/s!AnlvHDhqbdln1BVxaiObkTnghObs

src folder is missing in repository

Hi,
It looks like the src folder with the example files did not get uploaded to the repository. Looking forward to seeing this demo of the pro ui kit!

thanks,

  • Rich

@rmasonh18 this issue was automatically closed because it did not follow the bellow rules:

@rmasonh18 this issue was automatically closed because it did not follow the bellow rules:

IMPORTANT: Please use the following link to create a new issue:

https://www.creative-tim.com/new-issue/vue-material-kit-pro

**If your issue was not created using the app above, it will be closed immediately.**



Love Creative Tim? Do you need Angular, React, Vuejs or HTML? You can visit:
👉  https://www.creative-tim.com/bundles
👉  https://www.creative-tim.com


Originally posted by @github-actions[bot] in #25 (comment)

Modal Appearing Under Parent Elements

Expected Behavior

When opening a modal from within tab content it should appear on top of the rest of the tab content.

Current Behavior

https://share.vidyard.com/watch/Y8juifVN2TBNEfxHUjnbWw?

Modal is created but the Tab Icons and other div elements from within the tab content are appearing "on top" of the modal

Context

Standard NodeJS development environment. I haven't added any additional CSS to the project that I feel could be interfering (I know you will probably shake your head reading that though lol) The modal works correctly and does not interfere with any other page elements if I take it out of the tab content section.

  • Device: Mobile & Desktop
  • Operating System: Ubuntu
  • Browser and Version: Chrome Version 73.0.3683.75 (Official Build) (64-bit)

Signup input v-model binding

Hi,

In Signup.vue, you bind the input to array nameAttr, but the value isn't updated.
Can you please show me how to use the binding properly to get the value?

Thanks,
Ben

npm run dev issue - relative modules not found

https://www.creative-tim.com/new-issue/vue-material-kit-pro

Version 1.4.0
OS : Linux
Node : v14.18.2
Npm : 6.14.15

step to do,

  1. npm install (no issue, everyting fine)
    2. npm run dev
    return error

INFO Starting development server...
63% building 562/629 modules 67 active ...al/src/assets/img/examples/suit-1.jpgDeprecation Warning: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div(1.2, 0.2)

More info and automated migrator: https://sass-lang.com/d/slash-div

314 │ @return max($bgLum, $fgLum) / min($bgLum, $fgLum);

node_modules/vue-material/dist/theme/color-contrast.scss 314:11  md-calculate-contrast()
node_modules/vue-material/dist/theme/color-contrast.scss 329:19  md-pick-contrast()
node_modules/vue-material/dist/theme/functions.scss 68:21        md-theme()
node_modules/vue-material/dist/theme/mixins.scss 161:11          md-theme-property()
node_modules/vue-material/dist/base/theme.scss 5:7               @content
node_modules/vue-material/dist/theme/mixins.scss 120:9           md-theme-component-relative()
node_modules/vue-material/dist/base/theme.scss 3:5               md-base-theme()
node_modules/vue-material/dist/theme/mixins.scss 57:3            md-register-theme()
src/assets/scss/material-kit/_colors.scss 3:1                    @import
src/assets/scss/material-kit/_variables.scss 3:9                 @import
src/assets/scss/material-kit.scss 18:9                           root stylesheet

Deprecation Warning: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div(0.2, 0.2)

More info and automated migrator: https://sass-lang.com/d/slash-div

314 │ @return max($bgLum, $fgLum) / min($bgLum, $fgLum);

node_modules/vue-material/dist/theme/color-contrast.scss 314:11  md-calculate-contrast()
node_modules/vue-material/dist/theme/color-contrast.scss 331:18  md-pick-contrast()
node_modules/vue-material/dist/theme/functions.scss 68:21        md-theme()
node_modules/vue-material/dist/theme/mixins.scss 161:11          md-theme-property()
node_modules/vue-material/dist/base/theme.scss 5:7               @content
node_modules/vue-material/dist/theme/mixins.scss 120:9           md-theme-component-relative()
node_modules/vue-material/dist/base/theme.scss 3:5               md-base-theme()
node_modules/vue-material/dist/theme/mixins.scss 57:3            md-register-theme()
src/assets/scss/material-kit/_colors.scss 3:1                    @import
src/assets/scss/material-kit/_variables.scss 3:9                 @import
src/assets/scss/material-kit.scss 18:9                           root stylesheet

Deprecation Warning: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div(1.2, 1.1559733532)

More info and automated migrator: https://sass-lang.com/d/slash-div

314 │ @return max($bgLum, $fgLum) / min($bgLum, $fgLum);

node_modules/vue-material/dist/theme/color-contrast.scss 314:11  md-calculate-contrast()
node_modules/vue-material/dist/theme/color-contrast.scss 329:19  md-pick-contrast()
node_modules/vue-material/dist/theme/functions.scss 68:21        md-theme()
node_modules/vue-material/dist/theme/mixins.scss 161:11          md-theme-property()
node_modules/vue-material/dist/base/theme.scss 30:7              @content
node_modules/vue-material/dist/theme/mixins.scss 94:9            md-theme-component()
node_modules/vue-material/dist/base/theme.scss 28:5              md-base-theme()
node_modules/vue-material/dist/theme/mixins.scss 57:3            md-register-theme()
src/assets/scss/material-kit/_colors.scss 3:1                    @import
src/assets/scss/material-kit/_variables.scss 3:9                 @import
src/assets/scss/material-kit.scss 18:9                           root stylesheet

Deprecation Warning: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div(1.1559733532, 0.2)

More info and automated migrator: https://sass-lang.com/d/slash-div

314 │ @return max($bgLum, $fgLum) / min($bgLum, $fgLum);

node_modules/vue-material/dist/theme/color-contrast.scss 314:11  md-calculate-contrast()
node_modules/vue-material/dist/theme/color-contrast.scss 331:18  md-pick-contrast()
node_modules/vue-material/dist/theme/functions.scss 68:21        md-theme()
node_modules/vue-material/dist/theme/mixins.scss 161:11          md-theme-property()
node_modules/vue-material/dist/base/theme.scss 30:7              @content
node_modules/vue-material/dist/theme/mixins.scss 94:9            md-theme-component()
node_modules/vue-material/dist/base/theme.scss 28:5              md-base-theme()
node_modules/vue-material/dist/theme/mixins.scss 57:3            md-register-theme()
src/assets/scss/material-kit/_colors.scss 3:1                    @import
src/assets/scss/material-kit/_variables.scss 3:9                 @import
src/assets/scss/material-kit.scss 18:9                           root stylesheet

Deprecation Warning: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div(1.2, 0.479037829)

More info and automated migrator: https://sass-lang.com/d/slash-div

314 │ @return max($bgLum, $fgLum) / min($bgLum, $fgLum);

node_modules/vue-material/dist/theme/color-contrast.scss 314:11  md-calculate-contrast()
node_modules/vue-material/dist/theme/color-contrast.scss 329:19  md-pick-contrast()
node_modules/vue-material/dist/theme/functions.scss 68:21        md-theme()
node_modules/vue-material/dist/theme/mixins.scss 161:11          md-theme-property()
node_modules/vue-material/dist/base/theme.scss 5:7               @content
node_modules/vue-material/dist/theme/mixins.scss 120:9           md-theme-component-relative()
node_modules/vue-material/dist/base/theme.scss 3:5               md-base-theme()
node_modules/vue-material/dist/theme/mixins.scss 57:3            md-register-theme()
src/assets/scss/material-kit/_colors.scss 7:1                    @import
src/assets/scss/material-kit/_variables.scss 3:9                 @import
src/assets/scss/material-kit.scss 18:9                           root stylesheet

68% building 740/757 modules 17 active ...les/core-js/modules/es.error.cause.jsWarning: 8 repetitive deprecation warnings omitted.

98% after emitting CopyPlugin

ERROR Failed to compile with 5 errors 10:56:55 AM

These relative modules were not found:

  • ./presentation/Cards.vue in ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Presentation.vue?vue&type=script&lang=js&
  • ./presentation/Components.vue in ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Presentation.vue?vue&type=script&lang=js&
  • ./presentation/Content.vue in ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Presentation.vue?vue&type=script&lang=js&
  • ./presentation/Introduction.vue in ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Presentation.vue?vue&type=script&lang=js&
  • ./presentation/Sections.vue in ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Presentation.vue?vue&type=script&lang=js&
  • and then stuck on that thing,

Best practices to start a new project

Prerequisites

Please answer the following questions for yourself before submitting an issue.

  • I am running the latest version
  • I checked the documentation and found no answer
  • I checked to make sure that this issue has not already been filed
  • I'm reporting the issue to the correct repository (for multi-repository projects)

When I first downloaded your code I unzipped everything, opened the project on VSCode and started creating my pages.
But right from the beginning I had to change a few things on your files.
And I just came to realize that it will cause me problems in the future when I need to update your files.
So, I'd like to know the best practices, the best way to start a project in a way that when I have to update your files, I get the up-to-date code without overwriting the files I had to change.
I need to understand which files I can change and which I can not. And how should I deal with the changes I need without touching the core files.

Thank you.

[Bug] Dependencies error

Version

1.3.0

Reproduction link

https://github.com/zettsu/repro-material-kit-pro-1.3.0

Operating System

Mac Os 11.5.1

Device

Mac

Browser & Version

Chrome 92.0.4515.131

Steps to reproduce

  1. Browse to folder with downloaded files
  2. run npm install command
  3. run npm run dev

What is expected?

Starting serve files on localhost

What is actually happening?

These relative modules were not found:

./presentation/Cards.vue in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Presentation.vue?vue&type=script&lang=js&
./presentation/Components.vue in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Presentation.vue?vue&type=script&lang=js&
./presentation/Content.vue in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Presentation.vue?vue&type=script&lang=js&
./presentation/Introduction.vue in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Presentation.vue?vue&type=script&lang=js&
./presentation/Sections.vue in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Presentation.vue?vue&type=script&lang=js&


Solution

Additional comments

Node js version 14.17.5

[Bug] Problem using @ URL alias

Version

2.0.0

Reproduction link

http://localhost:3000/

Operating System

Windows 11

Device

PC

Browser & Version

latest Chrome and Firefox Developer Edition (it works on MS Edge for some reason)

Steps to reproduce

  1. Open a fresh copy of the project files (without any changes)
  2. NPM install (node version v18.14.0)
  3. NPM run dev
  4. Open http://localhost:3000/

What is expected?

To be able to see and use the website.

What is actually happening?

When I open http://localhost:3000/ on Firefox or Chrome, I see only white screen.

When I open my Developer console, I am seeing the following warnings (no warnings in my CMD):

Loading failed for the module with source “http://localhost:3000/src/assets/img/stat.png?import”. localhost:3000:38:1
Loading failed for the module with source “http://localhost:3000/src/assets/img/modals.jpg?import”. localhost:3000:38:1
Loading failed for the module with source “http://localhost:3000/src/assets/img/dropdowns.jpg?import”. localhost:3000:38:1
Loading failed for the module with source “http://localhost:3000/src/assets/img/pricing.png?import”. localhost:3000:38:1
Loading failed for the module with source “http://localhost:3000/src/assets/img/features.png?import”. localhost:3000:38:1
Loading failed for the module with source “http://localhost:3000/src/assets/img/blog-posts.png?import”. localhost:3000:38:1
Loading failed for the module with source “http://localhost:3000/src/assets/img/testimonials.png?import”. localhost:3000:38:1
Loading failed for the module with source “http://localhost:3000/src/assets/img/team.png?import”. localhost:3000:38:1
Loading failed for the module with source “http://localhost:3000/src/assets/img/content.png?import”. localhost:3000:38:1
Loading failed for the module with source “http://localhost:3000/src/assets/img/pagination.png?import”. localhost:3000:38:1
Loading failed for the module with source “http://localhost:3000/src/assets/img/alerts.jpg?import”. localhost:3000:38:1
Loading failed for the module with source “http://localhost:3000/src/assets/img/popovers.jpg?import”.

Solution

I think it is something related to the URL alias parsing in vite.config.js, but I was not able to find a solution.

Additional comments

[Bug] Bad capitailization of some files

Version

1.3.0

Reproduction link

.

Operating System

Linux

Device

Laptop

Browser & Version

chrome Versión 96.0.4664.45

Steps to reproduce

Trying to do yarn build /dev or whatever it always return:

  • ./presentation/Cards.vue in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Presentation.vue?vue&type=script&lang=js&
  • ./presentation/Components.vue in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Presentation.vue?vue&type=script&lang=js&
  • ./presentation/Introduction.vue in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Presentation.vue?vue&type=script&lang=js&

What is expected?

a correct build of the app

What is actually happening?

Several files under the /src/views/presentation folder have not the right capitalization in their names:
introduction.vue should be Introduction.vue
components.vue should be Components.vue
and so on


Solution

Check the right name files

Additional comments

Test your code in a a OS sensitive to capitalization in name files. Windows ignores it, but other systems like Linux take it into account

Install several dependencies errors

Hi guys, im facing an issue trying to use Material Kit Pro

Setup

  • Mac Os BigSur
  • Node 14.17.5

After run npm install all seems to be OK
When npm run dev run i got several issues

`These relative modules were not found:

  • ./presentation/Cards.vue in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Presentation.vue?vue&type=script&lang=js&
  • ./presentation/Components.vue in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Presentation.vue?vue&type=script&lang=js&
  • ./presentation/Content.vue in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Presentation.vue?vue&type=script&lang=js&
  • ./presentation/Introduction.vue in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Presentation.vue?vue&type=script&lang=js&
  • ./presentation/Sections.vue in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Presentation.vue?vue&type=script&lang=js&`

Can you help me with this?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.