Make this component better for SSR

I’m using SSR to prerender a page into a static HTML file (Vuepress)

Our FontAwesomeIcon can be prerendered, but not so perfect.

At the first glance when opening the page, it looks like this:

After the scripting, it display well:

The first glance is really annoying, so currently, I hacked our component to avoid being prerendered:

import FontAwesomeIcon from '@fortawesome/vue-fontawesome'
Vue.component('FontAwesomeIcon', {
    functional: true,
    props: FontAwesomeIcon.props,
    render (h, context) {
      if (context.parent._isMounted) {
        return h(FontAwesomeIcon, context)
      } else {
        context.parent.$once('hook:mounted', () => {
          context.parent.$forceUpdate()
        })
      }
    }
  })

---

The cause of this issue is that the <style> is injected by js script, so only after scripting will it display well. (Could not be extracted by ExtractTextPlugin)

If we can put the styles into our component’s <style> section, like some other vue components, then it could be extracted correctly.

[robmadole]

@dariuszlorek we know how to fix it. Just haven’t done the work yet 😉

[dariuszlorek]

That’s still unresolved. @robmadole think about some way to fix it.