Comments (18)
@peppeg85 try to follow this branch: https://github.com/MrJmpl3/vuetify-material-dashboard/tree/modified-version
The update is not only change stylus per sass, this update need others changes
from vuetify-material-dashboard.
I just tried to do this myself with the vue UI.
I could get the site building and presenting the home dashboard, but I had circular references in the console output which I couldn't figure out.
[Vue warn]: Unknown custom element: <v-list> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <CoreDrawer> at src/components/core/Drawer.vue
It seems to be a common issue regarding referencing components, but in vuetify 2.0, referencing and importing components has changed some how.
Hopefully someone with vue experience could help but for now we'll be sticking with vuetify 1.5.13
from vuetify-material-dashboard.
I just tried to do this myself with the vue UI.
I could get the site building and presenting the home dashboard, but I had circular references in the console output which I couldn't figure out.[Vue warn]: Unknown custom element: <v-list> - did you register the component correctly? For recursive components, make sure to provide the "name" option. found in ---> <CoreDrawer> at src/components/core/Drawer.vue
It seems to be a common issue regarding referencing components, but in vuetify 2.0, referencing and importing components has changed some how.
Hopefully someone with vue experience could help but for now we'll be sticking with vuetify 1.5.13
The way that you load Vuetify has changed, so you will need to update /src/plugins/vuetify.js
and /src/main.js
.
for /src/plugins/vuetify.js
change it to this:
Vue.use(Vuetify)
export default new Vuetify({
icons: {
iconfont: 'mdi',
},
theme: {
themes: { theme }
}
})
for /src/main.js
change it to this:
import vuetify from './plugins/vuetify'
//...
new Vue({
i18n,
vuetify,
router,
store,
render: h => h(App)
}).$mount('#app')
There are a few places where the activator slot for a <v-menu>
and <v-tooltip>
is used. You will need to use the new syntax. For example in /src/components/core/Filter.vue
you will need to wrap the <v-btn>
that has the slot="activator"
property in a template like this:
<template #activator="{ on }">
<v-btn
v-on="on"
class="elevation-0"
color="grey"
dark
fab
fixed
style="top: 96px;"
top
>
<v-icon>mdi-settings</v-icon>
</v-btn>
</template>
This was the only unintuitive step for updating to 2.0 that I encountered (so far). The rest is a simple search and replace for updated component names that can easily be pinpointed by looking at your javascript console errors.
One more thing, make sure you install sass, not node-sass.
npm uninstall node-sass
npm install sass
from vuetify-material-dashboard.
I think it is @AndrewLamYW , just upgraded an app to the latest release, and except for a few adjustments needed, it worked like a charm 🎉
from vuetify-material-dashboard.
This issue is open because the template need apply the Creative Tim styles .. like the version Pro
from vuetify-material-dashboard.
I can explain what helped me but it was a complex dependency issue and I doubt it will be exactly the same fix for you.
First I setup a vanilla setup with no extra components to assert that this repo on it's v2.0.0 branch DOES support the normal v-data-table
and it does.
So then I had to examine the dependency differences between this working setup, and mine, which were numerous.
After lots of trial and error I reduced the differences down to use of vuex (state management), and also use of Typescript and the packages commonly used with that and vue:
- "vuex-class": "^0.3.2”
- "vue-class-component": "^6.0.0",
- "vue-property-decorator": "^8.4.0",
In simpler solutions I was getting these kinds of errors trying v-data-table in a vue file with lang="ts" or lang="js":
Trying Typescript: [Vue warn]: Error in nextTick: "TypeError: Cannot read property 'key' of undefined"
Trying Javascript: [Vue warn]: Error in nextTick: "TypeError: Cannot create property 'isRootInsert' on string '1'"
So this is a bit of a hint because it indicates both ts and js having an issue, but not caused by the vue file using v-data-table itself, but elsewhere in my solution.
So I started converting my whole solution back to JS to reduce differences further and saw that my App.vue was also lang="ts" and many others.
I had some .vue files in ts but not using vue component decorators properly or consistently.
So I just started guessing that it's a component loading bug which is only being presented elsewhere in the solution and it was.
When I added empty component decorators to all the .vue files using typescript like this:
@Component({
components: { },
})
Then suddenly the v-data-table began loading as advertised.
So unfortunately it was a mix of dependency juggling and other stuff, and perhaps a bug in the vue-class-component
or vue-property-decorator
packages, I have no idea.
I suggest you follow the same troubleshooting steps I did. Checkout this repo at it's v.2.0.0 branch and add a vue component with the v-data-table working.
Then add your npm packages one by one, to see when the v-data-table starts failing to load.
It takes a long time. Good luck.
from vuetify-material-dashboard.
I can explain what helped me but it was a complex dependency issue and I doubt it will be exactly the same fix for you.
First I setup a vanilla setup with no extra components to assert that this repo on it's v2.0.0 branch DOES support the normalv-data-table
and it does.
So then I had to examine the dependency differences between this working setup, and mine, which were numerous.
After lots of trial and error I reduced the differences down to use of vuex (state management), and also use of Typescript and the packages commonly used with that and vue:
- "vuex-class": "^0.3.2”
- "vue-class-component": "^6.0.0",
- "vue-property-decorator": "^8.4.0",
In simpler solutions I was getting these kinds of errors trying v-data-table in a vue file with lang="ts" or lang="js":
Trying Typescript:[Vue warn]: Error in nextTick: "TypeError: Cannot read property 'key' of undefined"
Trying Javascript:[Vue warn]: Error in nextTick: "TypeError: Cannot create property 'isRootInsert' on string '1'"
So this is a bit of a hint because it indicates both ts and js having an issue, but not caused by the vue file using v-data-table itself, but elsewhere in my solution.
So I started converting my whole solution back to JS to reduce differences further and saw that my App.vue was also lang="ts" and many others.
I had some .vue files in ts but not using vue component decorators properly or consistently.
So I just started guessing that it's a component loading bug which is only being presented elsewhere in the solution and it was.
When I added empty component decorators to all the .vue files using typescript like this:@Component({ components: { }, })
Then suddenly the v-data-table began loading as advertised.
So unfortunately it was a mix of dependency juggling and other stuff, and perhaps a bug in the
vue-class-component
orvue-property-decorator
packages, I have no idea.I suggest you follow the same troubleshooting steps I did. Checkout this repo at it's v.2.0.0 branch and add a vue component with the v-data-table working.
Then add your npm packages one by one, to see when the v-data-table starts failing to load.
It takes a long time. Good luck.
Thank you for your reply! Actually it was something simillar (or problably same issue), I had in another file
export default class ComponentX extends Vue { }
So, not body. It was really hard to find what was the problem, I recreate my project adding pieces of code until I get the error and then I found the file with the problem. So, if someone else has this problem try to find unconsistencies in files.
from vuetify-material-dashboard.
The 2.0.0 Release notes show all changes/renames
Like how v-list-tile
is v-list-item
v-list et al
Many components have been renamed
v-list-tile → v-list-item
v-list-tile-action → v-list-item-action
v-list-tile-avatar → v-list-item-avatar
v-list-tile-content → v-list-item-content
v-list-tile-title → v-list-item-title
v-list-tile-sub-title → v-list-item-subtitle
The avatar prop has been removed
The activator example by @koenrad is excellent, thanks so much!
You have to apply it in Filter.vue and Toolbar.vue.
Data Tables have changed.
EG: Templates for the item rows which were written like this:
<template slot="items" slot-scope="{ item }">
Are now done like this:
<template v-slot:body="{ items }">
<tbody>
<tr v-for="item in items" :key="item.id">
from vuetify-material-dashboard.
One of the most confusing parts I dealt with was regarding the much simplified v-data-table
which should be able to work without a header and body template.
Eg: in the TableList.vue I should be able to just have:
<v-data-table
:headers="headers"
:items="items"
:items-per-page="5"
hide-default-footer
class="elevation-1"
/>
But when I try this I get the error:
[Vue warn]: Error in nextTick: "TypeError: Cannot create property 'isRootInsert' on string 'Dakota Rice'"
If anyone has any ideas why, I'd really appreciate it.
from vuetify-material-dashboard.
Is this issue solved yet? Because I see the vuetify version has already updated to v2 in release v2.0.0
from vuetify-material-dashboard.
I made a pull request to upgrade to Vuetify v2: #42
You can see and comment about this.
from vuetify-material-dashboard.
Hi, @MrJmpl3 ! It's already exist the v2 in a branch with the v2.0.0, but the style is not applied 100% and we must fix this.
Regards,
Dragos
from vuetify-material-dashboard.
Hi, @MrJmpl3 ! It's already exist the v2 in a branch with the v2.0.0, but the style is not applied 100% and we must fix this.
Regards,
Dragos
@dragosct10 I made the pull request in v2 branch , and apply the style same the Pro version (but without pro features, for logic reasons).
from vuetify-material-dashboard.
hello i'm trying to migrate to vuetify 2, i followed this discussion changing the main.js and the app.js file following the instructions and uninstalled node-sass and istalled sass, i have this error:
Module build failed (from ./node_modules/stylus-loader/index.js):
Error: C:\Users\Giu.Giancola\WebstormProjects\statistichevuetify2\node_modules\vuetify\src\styles\main.sass:3:9
1| // Modeled after ITCSS https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/
2|
3| @import './tools/_index'
--------------^
inside the file default.styl i commented
@import '~vuetify/src/stylus/main.styl'
and added
@import '~vuetify/src/styles/main.sass'
@import '~vuetify/src/styles/styles.sass'
is this wrong?
from vuetify-material-dashboard.
ok, thank you, the better solution is clone it and port all the job i've done over it.
sorry, but on the old template, i had the folder
src/theme/default.styl
that imports
@import '~vuetify/src/stylus/main.styl'
now to import these styles how can i do with this new template?
edit:
i'm trying to convert the styl file to scss but i have stylus parsing error
from vuetify-material-dashboard.
Hi,
Any plan to merge the other branch?
from vuetify-material-dashboard.
One of the most confusing parts I dealt with was regarding the much simplified
v-data-table
which should be able to work without a header and body template.
Eg: in the TableList.vue I should be able to just have:<v-data-table :headers="headers" :items="items" :items-per-page="5" hide-default-footer class="elevation-1" />
But when I try this I get the error:
[Vue warn]: Error in nextTick: "TypeError: Cannot create property 'isRootInsert' on string 'Dakota Rice'"
If anyone has any ideas why, I'd really appreciate it.
Hey I'm having the exact same issue. Have you found the answer yet? Thanks!
from vuetify-material-dashboard.
One of the most confusing parts I dealt with was regarding the much simplified
v-data-table
which should be able to work without a header and body template.
Eg: in the TableList.vue I should be able to just have:<v-data-table :headers="headers" :items="items" :items-per-page="5" hide-default-footer class="elevation-1" />
But when I try this I get the error:
[Vue warn]: Error in nextTick: "TypeError: Cannot create property 'isRootInsert' on string 'Dakota Rice'"
If anyone has any ideas why, I'd really appreciate it.Hey I'm having the exact same issue. Have you found the answer yet? Thanks!
Same issue, someone?
from vuetify-material-dashboard.
Related Issues (20)
- downloaded free version, can't compile HOT 4
- upgrade to vuetify 2
- Documentation doesn't work
- sign-in and sign-up page HOT 5
- [Bug] v-alert doesn't fill v-snackbar width if not enough content
- how to unactivate eslint ? HOT 1
- Update of Vuetify version bricking Vuetify Material Dashboard
- multilevel menu HOT 2
- Upcoming VMD rebuild HOT 5
- Non-existent MDI icon
- [Bug] Anybody here? npm install can't compile
- [Bug] Package does not work with typescript enabled in vue-cli
- AppBar and footer not showing correctly
- [Bug] Error: No loader specified
- Settings.vue giving console err when I changed colors
- Documentation not available
- does not compile HOT 3
- [Bug] test-design
- Cannot be compiled and run
- Fails to load files missing from repo
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vuetify-material-dashboard.