vue-styled-components
vue-styled-components copied to clipboard
FOUC solution based on radicalpi's implementation
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:
import { StyleSheet, ServerSideRenderMixin } from 'vue-styled-components';
StyleSheet.serverRendered = true;
export default {
mixins: [ServerSideRenderMixin],
}
This pull request is meant to address the issue in #52 forgot to mention
I've fixed the merge conflict