I originally had Vuetify working perfectly in my app but somewhere along the way the styles of components broke and I'm not sure how to fix it.
For example, here is my Vuetify table:
Reality:
Expected:
As far as I can tell everything is setup correctly, I will say, I started using SCSS inside the modules but I don't think that is the problem.
The functionality of Vuetify is working like sorting and things like that but just the styles are broken it appears.
Related
Long story short, I'm having some serious trouble getting themes to work in general - even for the "HelloWorld" base app that comes preinstalled with Vuetify. For some reason Vue/Vuetify do not apply any colors to anything unless I use the "color=" tag and even when I use "color=" it only uses the color I specify an not any shades or highlights of that color. When I change the theme from "light" to "dark" or vice versa nothing happens (again, I'm having the same issue with the "HelloWorld" app). I feel like I've gone through all the documentation for themes a hundred times and am looking for anyone to point me in the right direction. I should add that for one reason or another the theme IS working on a random v-list-group in the nav drawer but not to the items above or below the group. I'm using Vue 2 and Vuetify 2.
Things I've Tried
Making a new theme using the theme generator on the Vuetify website and inserting it into the ./src/plugins/vuetify.js file as instructed by the documentation.
Attempted inserting the theme at the bottom of ./src/App.vue between the <script> </script> elements. This worked for someone else but didn't do it for me.
Completely uninstalled and reinstalled Vue-CLI using the command line.
Completely deleted and recreated my project.
Remaking my project using Vue 3 and Vuetify 3. This does work but Vuetify 3 does not yet have the components I need for my project.
Will there be any future inconvenience/ compatibility errors if I just use Vuetify on only select components, and leave the others as is (made with vanilla html/js/css)?
I recently installed Vuetify on an existing project, and I'm not sure whether to recode the whole thing so I can integrate Vuetify into the whole project or just use it only on the components I will be making from now on.
There will be no inconvenience or any issues later on. You can use however much of Vuetify you wish for however much of your project you like.
The only downside I can think of is the visible difference between your own components and Vuetify components which will be apparent in the finished product. I would personally replace the old components with Vuetify in this case.
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 am new in vue and vuetify and I read all the documentations in the internet but I still don't know how to inject CSS from vuetify CSS. I have researched some possible solutions, tried to implement what I searched but I realized that the solutions I have found was for Vue 3.9 and below. I am currently using vue 4.0.5 and vue cli 4.0.5. I badly need a solution to this because I am already spending hours looking for workarounds.
I had the same experience in my latest project. Vuetify has some quirks in it that make CSS styling a little different. In general, using <style scoped> will not cause any changes with Vuetify, but using the global scoping <style> will. For some properties, you'll only notice changes if you use the !important tag.
You'll need to make sure you're wrapping everything and using loaders properly to get your CSS working as you intend. Details regarding that are here in detail:
Vuetify - CSS not working (taking effect) inside component
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