FOUC solution based on radicalpi's implementation #133
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Hi there, this expands on the idea implemented by @radicalpi in #112 by fixing the double injection issue where the server side rendered CSS gets loaded as well as the style tags that are thrown into the during runtime. I've also refactored the logic they wrote for setting up the server side rendering into a mixin that can be used.
I've tested this with a fairly simple Nuxt project which I've uploaded to a repository here, and I seem to have managed to fix the double injection issue they mentioned.
Here is a screenshot of the element inspector, you'll notice there's only one vue-styled-components style tag
. The other style tags below it are Nuxt specific style tags.
The way I foresee this being used can be seen in pages/index.vue, but I'll share the code here for convenience: