Deal with vuejs latency

Hey guys,

My Problem:

I am new to Vuejs, so I started by creating a Modal-Component like @JeffreyWay does in Vue 2.0 step by step - named slots video. Everything works fine, but there is a small issue. When I define a default slot and paste my main content between my modal-tags and reload the page I can catch a small glimpse on the modal text. After milliseconds it is gone.

What I found:

After a bit of research I found the following in the vue-documentation - Extracting Component Css:

When using Single-File Components, the CSS inside components are injected dynamically as tags via JavaScript. This has a small runtime cost, and if you are using server-side rendering it will cause a “flash of unstyled content”. Extracting the CSS across all components into the same file and avoid these issues, and also result in better CSS minification and caching.

I tried to use the suggested approach and created a webpack.config.js file with this content:

// webpack.config.js
var ExtractTextPlugin = require("extract-text-webpack-plugin")

module.exports = {
  // other options...
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue',
        options: {
          loaders: {
            css: ExtractTextPlugin.extract({
              loader: 'css-loader',
              fallbackLoader: 'vue-style-loader' // <- this is a dep of vue-loader, so no need to explicitly install if using npm3
            })
          }
        }
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("style.css")
  ]
}

Since laravel-elixir reads all webpack.config.js files, I thought it might work this way. However it did not.

Would appreciate if someone could help :).

EDIT

I replaced the default slot with a named slot, now my modal content does not display anymore on the site. However I still do not know how to extract the Component CSS...