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
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'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 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 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.
For a project where Vue is dropped in, is using style or similar available to components?
Vue.component('vue-sup', {
template: '<div>Sup</div>',
style: '* { color: blue; }'
})
I tried adding the styles inside the template like:
<div>
<style>
.here{}
</style>
<div>Sup</div>
</div>
which didn't work because the template parser detected a tag with side effects
Vue's implementation of scoped css is entirely a feature of vue-loader, and thus only works with compilation. Scoped css momentarily made a debut into Html 5 but saw almost no adoption and was dropped entirely as far as I know. There is the anticipation that "Shadow DOM" may be supported broadly and could be use to add scoped css, but adoption is not there yet either.
So at this point you can add unique classes or ids obviously to a parent container and scope your css that way, but is understandably not what you are asking for nor is it always practical.
The best alternative is a pollyfill. There are several that are available. Here is one by Sam Thorogood and another by Thomas Park but if you do a quick search you will likely discover more.
I came across the same problem and I'm able to insert styling inside Vue template
by creating a component that will dynamically insert a <style> tag on the DOM. This might be impractical like #skribe said but it allows me to have separate CSS from JS without using .vue extension.
You can take a look at this