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.
Related
I've searched a lot so apologies if this has been covered elsewhere already.
I'm using Swiper.js to implement some sliders on a site. I'm importing the JS and CSS from Swiper using the CDN links they have on their site.
Swiper comes with a lot of CSS and I'd really like to override most of it.
Is there a "Skeleton" package of their CSS available or a good way to reset most of their styling so I can apply my own?
Any help or pointers much appreciated.
THanks.
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 a problem with the Masonry plugin causing to only function when the viewport is being changed, meaning the masonry boxes were invisible until you would resize the browser window. After that the boxes are not olny visible but also Masonry works as expected.
I resolved this problem by using regular CSS again for styling, and not LESS CSS anymore as I had intended.
But what would I be able to do to use both? (It doesn't seem like it's a simple 'reorder how the scripts are being loaded' kind of thing)
Funnily when I use jsFiddle and implement LESS CSS there, there is no problem. Maybe somebody can tell me what jsFiddle does to fix the issue?
https://jsfiddle.net/rcygo5fy/
code
"Solution": Since a solution would be a hassle with the code and compiling the CSS on every load is very heavy, especially client-side, the best solution is to leave LESS completely out of the end result and only use it for development but a LESS-to-CSS-rendered file for actual usage. With CSS the Masonry timing problem goes away.
As the title implies, I need solid SEO and thus I need to have all the HTML loaded on my site on initial load. However, because the backend is written in PHP, and because it would be more work to write my Vue components with the server in mind, I don't want to use server-side rendering (SSR).
That leaves me with the option to send HTML over the wire, the "old school" way. What I am thinking of doing is writing each page's HTML like normal, but make one of the root html elements a Vue element in order to "upgrade" it. So the initial load downloads the finalized HTML, with all the data (tables, lists, etc already populated), but then after all the scripts are loaded, javascript can take over to make things easier and give a better UI experience. This poses a few questions, however:
Am I limited to a single component, the root? It'd be nice to still have many sub-components that would each have their own state. Perhaps inline templates can be used somehow?
Vue templates have their own templating system, like the mustache braces for displaying variables {{ myVar }}. Will I not be able to use them? The one way I can think of is to create a Vue template (that can be loaded from an external script) that is identical to the part of the HTML that it "takes over". The downside is that I'd have to maintain that component both in the original HTML and in the vue template.
Are there any good examples of what I'm trying to accomplish here?
Edit: I want to clarify that I'm aware I can put in various components here and there throughout the page. This still poses the question of how to make those components already start out rendered. Better yet would be to turn the whole page into Vue, much like an SPA.
I need solid SEO and thus I need to have all the HTML loaded on my site on initial load.
This is not entirely true. Google (80% of search traffic) easily parses SPAs now, so SSR purely for SEO isn't required anymore.
But to answer your question in general, you should check out Laracast's Vue.js series. They go in-depth on how to use PHP with Vue.js (including templating and variables).
I'd ask what it is you want to achieve with Javascript/Vue.js in your page. If everything is already rendered in PHP, does Vue provide a simple UX enhancement or takes over most of the page's heavy lifting (navigation, etc.)? If you have no reactive data and want Vue to simply be a controller for rendered components, then knock yourself out, although it might be approaching an 'overkill' scenario.
Have you looked into Prerender SPA Plugin ( https://github.com/chrisvfritz/prerender-spa-plugin )?
It is offered in the Vue documentation as a viable alternative to server side rendering ( https://v2.vuejs.org/v2/guide/ssr.html#SSR-vs-Prerendering )
Recently I've developed a multi-page application using Vue, here is how i tried to solve the SEO (Maybe this can help you ):
Htmls of header and footer (and other main common components) are packed to the page.html(eg: home.html, search.html).
Script and style are of header and footer imported in page.js(eg: home.js, search.js).
Add div.seo-zone to page.html's div#app, which includes the main SEO data(using some h1,h2,p,div and so on), and add
.seo-zone {
display: none;
}
in your css.
4. Make sure your app's root component's el is '#app'(each page's main content can be a Vue app).
Develop your app as usual.
After Vue rendered, the div.seo-zone will be replaced with your Vue components (although it can not be seen)
I am trying to research about vue2 and wondering if there is any way that can make it easy to track if elements are visible on viewport or not so that we can do something like slide-in boxes when we scroll down the page. Any npm package or whatsoever that can be suggested? Thanks.
Currently using Vue-observe-visibility (https://github.com/Akryum/vue-observe-visibility) and have not stumbled on any issues yet.
The only thing to consider is that this only triggers when the element enters/exits the page by user scroll, not when it enters/exists because of DOM changes. Looks like it shouldn't be an issue for your use case, based on what you told about it.
Certainly check it out, it's easy to use!
vue-waypoint could be an option.
GitHub
NPM