I'm using nuxt(universal mode) with vuetify with very few components that are actually being used.
I also add a few css rules of my self.
I tried to configure treeshaking with extractCSS, I think it works for the js part, but I'm getting a 350KB css file.
(I think) as a result I'm also having FOUC since it takes time to load all that css.
any way around it?
Is there another css framework that will work better with nuxt ssr?
Thanks.
Related
The Problem
So I'm working on moving a Laravel project from Mix to Vite. Overall, it's been fairly straightforward, but there's been one issue. A lot of my Javascript is built into Blade files and relies on jQuery. jQuery cannot be accessed in <script> tags unless they have type="module" (this has its problems, see below).
What I've Tried
Modifying the script tags that require jQuery with type="module". This works for most cases, except any HTML elements that use functions in these script tags as event handlers break. There are ways around this, but it would require some code changes.
Load two copies of jQuery, one for Vite and one for outside Vite. This works, but feels sloppy and increases load times.
What I Want
It'd be great if Vite could be told to expose its copy of jQuery to the other non-module script tags. There might be an easy way to do this, but I'm not seeing it.
Thanks in advance!
You can find meaning of code busting at https://www.keycdn.com/support/what-is-cache-busting
The main point is that when new version is deployed, uses should use new feature with avoiding cache feature.
My app is deployed with Universal SSR and using scss.
I checked deployed files and css codes was included at html so css is not related to cache busting.
Also, I checked js file and whenever the js file is builed, the filename seems changed with some random string. I think it support cache busting on js file.
My conclusion is that nuxt support cache busting. Am I right? If then, Can you give proper reference on nuxt website or webpack configuration codes on github??
Thank you!
I worked all day yesterday to finish a google cloud function to power an appointment maker vue component. The last step is actually UI using the returned object. I was planning on using the vuetify date/time pickers with allowed dates and times.
After spending much of today trying to add vuetify to an existing project to only use those to components, it is causing style errors with some classes(margin, etc) that are coming from main.sass.
I thought of adding a prefix to tailwind, but I don't have the time or inclination to go back to all of my components and files to add the prefix to all of my tailwind classes.
Is there something I can do to scope the vuetify classes/css so as not to cause problems outside of the two components I am trying to use?
Can I add the vuetify css after my tailwind is compiled and assembled so the tailwind classes win take precedent?
I don't have code to show as it is fairly straight forward. I thought the google calendar API would be the hardest part of this component, but it is proving to be the easier.
Tailwind allows you to prefix the generated classes in the configuration file. See https://tailwindcss.com/docs/configuration
I know this is too late to answer but I'm writing this for other people like me who came up with this problem.
In order to add Vuetify to an existing project which is using Tailwind CSS without CSS class conflicting, You just need to activate treeShake in Vuetify options.
For example in a Nuxt project, add the below snippet in nuxt.config.js:
export default {
// Other Configs
vuetify: {
treeShake: true
},
}
I am using in my Nativescript Angular app the nativescript-google-maps-sdk plugin which works great.
My issue is that I want to use cached images to display in a custom InfoWindow. For this purpose I am using the nativescript-web-image-cache plugin app-wide. When I use the regular <WebImage> tag in the infoWindow it complains that it is not a registered component:
Module 'ui/web-image' not found for element 'WebImage'
Everywhere else in the app it works just fine. In this issue is it suggested that:
that InfoWindowTemplate content is parsed as Vanilla NativeScript XML, not as Angular XML thus it is not able to find custom Angular Component you created
So the question is how can I still use this plugin? Is there a way I can somehow register the <WebImage> component so it will work in the custom InfoWindow?
Just to make sure there is not another issue, I added the nativescript-web-image-cache plugin to the plain NativesScript nativescript-google-maps-sdk demo project and then the <WebImage> tag works just fine.
Any pointers are highly appreciated!
Anything registered in Angular is not available in Core the same way; so if you have to create a core template; you must also pass in the xmlns:blah="ns-blah" as part of the core template, so that it is registered properly in that core template. The angular registerElement does not do anything for Core. Now you can easily do <IC:WebImage xmlns:IC="nativescript-web-image-cache" ...> and then it is valid in the template. However, I would recommend you put the xmlns:IC on the topmost element you can; as it makes reading the code a lot simpler. But in cases you don't have a parent wrapping element around the item, this is valid code to register it on the same element using it.
NS-Core templates are different than NS-Angular templates; if you attempt to use things that work in Angular like <IC:WebImage [param]="value" (param)="value"/> both the [param] and (param) will totally break template parsing in core. NS-Core's parser is like HTML, nothing is supposed to surround the param and the value should be in quotes. The value can have {{ boundvalue }} to bind a dynamic value into the template.
Normally when passing a NS-Core template into whatever function you need; you want to pass in just the minimal parts; you rarely need to use things like <Page>, <Frame> or any other top level elements. In fact this can cause problems. You normally need just the piece of the layout you are going to have it view. So in this case <StackLayout xmlns:IC=...><IC:WebImage...></StackLayout>
Finally when troubleshooting using Core features in Angular; I highly recommend you put fixed Width/Height and Background colors on each element. This can sometimes show you what is failing.
As InfoWindowTemplate content is parsed as Vanilla NativeScript XML, you could add xmlns:IC="nativescript-web-image-cache" to the root / parent element of your component. Also use <IC:WebImage> instead of WebImage.
Wonder if anyone has had this issue.
I've integrated Bootstrap nicely into a Magento theme I'm building, all good.
That is, until I try using the accordian functions. There seems to be an issue with the code finding the Prototype Libs Methods instead of jQuery's. I've tried the usual fixes, $ - jQuery and no conflict but it only works when I disable the prototype lib - which obviously is not good.
Anyone out there come across this and can advise me on a work round? At the moment I'm resigned to using Scriptaculous for the accordian.
I suspect this is occurring due to the transitional conflict in prototype which is used in Magento front-end and admin areas.
Please see: Twitter Bootstrap Transition Conflict prototypejs
You can try this library: https://github.com/jwestbrook/bootstrap-prototype and see if it resolves your issue you are having with your accordian.
Using jQuery in Magento can be sometimes tricky. I normally make something like:
jquery-ui-1.8.9.noconflict.min.js
and put jQuery.noConflict() right at the end of the file.
Also make sure that jQuery is loaded after Prototype & there is only 1 version of jQuery included on any page.
I normally like to use jQuery instead of $ all the time but I guess anonymous functions should work too:
(function($) { /* use $ here */ })(jQuery);
Instead of bootstrap.js or bootstrap.min.js use below js files to get the solution.
jquery.js
prettify.js
bootstrap-transition.js
bootstrap-alert.js
bootstrap-modal.js
bootstrap-dropdown.js
bootstrap-scrollspy.js
bootstrap-tab.js
bootstrap-tooltip.js
bootstrap-popover.js
bootstrap-button.js
bootstrap-collapse.js
bootstrap-carousel.js
bootstrap-typeahead.js
application.js more if required.