I've been working with Ionic and Vue2 for a while and I always have hard time adding ion-input tags to my code, because v-model does not work properly and I have to do all sorts of workarounds. Same is with ion-checkbox and ion-text-area. I was wondering if any of you know a way to fix this so that v-model works or do I have to just wait for Ionic team to fix this?
Related
we are trying to use Dexie with Vue. We are loading some table data into the Vue component and we would like to sort it by clicking on the column. We are having problems with changing sort order in livequery. We found a solution for an Angular (https://dexie.org/docs/Tutorial/React#6-pass-some-query-params) but we can't find the same for Vue. Can you please send some light into this case?
Thank you.
I'm on "nuxt": "2.15.4", "#nuxtjs/vuetify": "1.12.1" and "sass": "1.32.13" and have a navbar component added to my default layout that uses v-navigation-drawer and at first moment of page load there is a flicker and every thing (drawer) splashed on screen and after that css is loaded.
I have read nuxt-css-issue this and kinda understand that it's because of nuxt and vuetify behaviour . so is there any way to solve this?? It's really ugly when you load the app !!
oh btw I use nuxt universal ssr and for vuetify treeShake is true
So, you either wait for the CSS to come with the JS (better performance-wise, but may have some small flickering) or load all the CSS globally at the beginning, then the JS (less good in terms of speed, but no flicker). Do I understand the issue well?
Not sure if there is a real solution to this issue besides maybe display-hiding the component until he is loaded with a #hook:mounted hook and a v-show who is showing the component when done. More info here: https://stackoverflow.com/a/67535239/8816585
Did you found out something on Vuetify's github issues?
Not sure if there is something available yet, feel free to maybe post a new issue.
PS: there is maybe some shenanigan move here, to preload some CSS once we have reached a specific page or some hook. Not sure how would this be doable but knowing the JS ecosystem, this kind of hack may be feasable.
I would like to use Vuetify 3 (alpha) with Ionic Vue. couldn't find any useful reference. could some one please help me on this?
I have two SPA on vue, on same deployment area:
Uses Vuetify (www.someserver.com/portal_1/)
Uses Bootstrap-vue (www.someserver.com/portal_2/)
Now I need to make some portal area with components from both SPA. Is there any methodology to deal with it?
I try to create app with vuetify and bootsrtap-vue, but stuck with many sass errors...
I have struggled with the same issue regarding Vuetify styles. I needed to have a second Vue app embedded inside my Vuetify app but the Vuetify styles kept leaking inside the child Vue app, and the global styling coming from child app also broke Vuetify defaults.
I have done a long research and concluded that the options are:
-Rewrite the child app using BEM approach (Still Vuetify would leak with selectors like p, head, body etc.)
-Disable Vuetify's CSS reset file, remove globals and disable theming via hacky approaches.
-Use an iFrame container or web components approach on the second app to isolate it from the other.
Messing with Vuetify library didn't sound too great, because it will be too chaotic to deal with problems later on. We decided to completely isolate two Vue instances via an iFrame in the end, and I'd recommend the same thing if you REALLY need to use both bootstrap-vue and Vuetify, because they both have global CSS selector modifiers and stuff that will just create a huge mess.
I had my team do further research on iframes and how to consistently pass data between an iframe and parent app, here are the two options that you may consider:
vuex-iframe-sync (a lightweight option but I couldn't get it to work properly)
https://github.com/L-Chris/vuex-iframe-sync
Zoid (a library maintained by payPal, very solid approach but tricky to set up with Vue)
https://github.com/krakenjs/zoid
Further info on how to set up zoid with Vue:
https://github.com/krakenjs/zoid/issues/296
PostRobot (Haven't tried this one but also a solid option, probably much easier than zoid)
https://github.com/krakenjs/post-robot
Good luck, and please let me know if you find any other approach that works!
I'm working on a project maked with Laravel + vuejs and vuetify, everything is fine from the beginning, but after updating vuetify for using some new elements, i found that many elements are crashed because either is deprecated or changed.
I have to change my code too, but as the project gets big, it becomes difficult.
The question : what is the right solution based on your experiences with vuetify?
thank you in advance