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.
Related
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 had install my project vuetify with this reference : https://vuetifyjs.com/en/
My project has been 100% complete. Now I want to implement SSR for Search Engine Optimization (SEO)
I search on google and I find there exist 3 option to implement SSR to vuetify project
https://ssr.vuejs.org/
https://github.com/vuetifyjs/webpack-ssr
https://nuxtjs.org/
If I using option 2 or option 3, it seems I must to change my template. Maybe I should rewrite my code on the template. Because my template using vuetify template. I don't know if I choose option 1. Whether it also has to change my template or not. I must to try it first
What I want to ask is if in my position I have completed the 100% vuetify project, which is the best choice I should choose for SSR implementation?
Do I have to rewrite my code or is there another way to implement it?
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.
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