vue-styled-components + Nuxt js

[AlexeyShaykov]

Hi, what the problem with vue-styled-components + Nuxt js https://github.com/nuxt/nuxt.js/issues/3479 how to fix this promblem?

Thanks.

[clarkdo]

The issue should be that we need to learn if or how vue-styled-components support SSR 😄

Because when you're using Nuxt, the first page is rendered in server side, but didn't inejct the style into generated html.

[itsmichaeldiego]

@AlexeyShaykov +1

[dylanmcgowan]

+2 any update here? styled-components seems to be the most elegant (and browser compatible) solution for making dynamic styles.. I'd really love to use this in my nuxt project, but in it's current state you have to wrap the styled-component in a <no-ssr> tag defeating the purpose of nuxt in the first place

[Jmeyering]

What needs to be done to get this working. I'm willing to submit a PR if pointed in the right direction

[liqueflies]

When I worked on it nuxt was in alpha version and I never thought about that. If someone of you have good knowledge of nuxt just hit me up. :)

[yannvr]

Not used Nuxt or vue-styled-components yet but faced a similar issue integrating Styled components on the server with NextJS. The idea is rather simple: on the server, all CSS generated by styled components need to be collected and injected in the document header in a style tag <style>[...all-styled-components.css]</style>. It looks like it would be in head method of layout/default.vue.

It would then be a 4 steps process in layout/default.vue:

// Import styled components ServerStyleSheet
import { ServerStyleSheet } from 'vue-styled-components'

export default {
   head ({req, res, renderPage}) {
    if(!process.server) return {}
    
    // Step 1: Create an instance of ServerStyleSheet
    const sheet = new ServerStyleSheet()

    // Step 2: Retrieve styles from components in the page
    const page = renderPage((App) => (props) =>
      sheet.collectStyles(<App {...props} />),
    );

    // Step 3: Extract the styles as <style> tags
    const styleTags = sheet.getStyleElement()

    // Step 4: Pass styleTags as a prop to rehydrate all styled components CSS
    return { ...page, styleTags }
}

Nuxt requirements:

• Expose a renderPage method from the renderer so that vue-styled-components can gather all of its stylings (@clarkdo).

This requires vue-styled-components to provide APIs to:

1. Retrieve the styled components collection when the page is rendered on the server sheet.collectStyles(<App {...props} />)
2. Create a style tag that, once injected in the app header of the default layout, will rehydrate all styled components on the server (then no more FOUC!)

As an example (styled-components), models for those are on: https://github.com/styled-components/styled-components/tree/master/src/models.

Note: I think SSR styled-components is an essential feature for framework adoption. That ranks near the top of my list.

[mrksbnch]

I think this issue title should probably be renamed as vue-styled-components should work on the server side in general, no matter if it's via Nuxt or some other method – currently vue-styled components is not working for server-side rendering at all.

Also, since I'm not familiar with the source code myself, can anybody say if an approach such as the one mentioned by yannvr is an option (seems like this is the method react is using, so can probably also be used for Vue)?

[liqueflies]

Hello people, when this version of SC was implemented Nuxt was not so popular (kind of alpha version) and I had no experience with SSR in general with Vue.

It would be very cool have this feature, I know. As I explained in the other issues when they ask for new feature, is very difficult to me to implement alone, as I am the only one maintainer.

I just ask also to you for a help to do that, I am focusing to bug fixing and updates, merging new PR's to let also the community make the difference.

I am here for anything, if someone want to help me to do that, I'll be very grateful <3

[yannvr]

I've had a go at implementing it and found out that styled components SSR was supported for React only so the feature we really need is vue-styled-component SSR (like @mrksbnch said). Then the Nuxt part would mostly be a boilerplate. @liqueflies: a new (open) feature request?

[mergims]

Has anyone done this?

[Trapdafifou]

Did someone managed to make nuxt and vue-styled-component work together ?

[itsmichaeldiego]

@Trapdafifou The flash is still happening though

[Jmeyering]

@liqueflies any chance #112 could be merged in for SSR?

[liqueflies]

@Jmeyering sorry for late reply but now I want to try update this part (maybe with help of you all).

If you see #112 i gave it a try with no luck, also the opener of the PR is not convinced about that.

I have understand where the problem is, I will try to check if I can do something with it.

[IntusFacultas]

Hi all, I've created a pull request that at least temporarily patches the problem in a non-painful way.

[Sliver02]

+3 any update on the issue? @IntusFacultas your PR seems to be pending still

[IntusFacultas]

Yeah I've heard nothing in response unfortunately.