How to use skeleton screen in vue project

<template>
  <div class="skeleton-home">
    <div>Loading...</div>
  </div>
</template>
 
<style>
.skeleton-home {
  width: 100vw;
  height: 100vh;
  background-color: #eaeaea;
}
</style>

<template>
  <div id="app">
    <!-- Root component-->
    <home style="display:none" id="homeSkeleton"></home>
  </div>
</template>
<script>
import home from './home.skeleton.vue'
export default{
  components:
    home
  }
}
</script>
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
*{
  padding: 0;
  margin: 0;
}
</style>

//Entry fileimport Vue from 'vue'
import App from './App.vue'
let skeleton = new Vue({
  render(h) {
    return h(App)
  }
})
export default skeleton

'use strict';
 
/* */
 
var isJS = function (file) { return /\.js(\?[^.]+)?$/.test(file); };
 
var ref = require('chalk');
var red = ref.red;
var yellow = ref.yellow;
 
var prefix = "[vue-server-renderer-webpack-plugin]";
var warn = exports.warn = function (msg) { return console.error(red((prefix + " " + msg + "\n"))); };
var tip = exports.tip = function (msg) { return console.log(yellow((prefix + " " + msg + "\n"))); };
 
var validate = function (compiler) {
  if (compiler.options.target !== 'node') {
    warn('webpack config `target` should be "node".');
  }
 
  if (compiler.options.output && compiler.options.output.libraryTarget !== 'commonjs2') {
    warn('webpack config `output.libraryTarget` should be "commonjs2".');
  }
 
  if (!compiler.options.externals) {
    tip(
      'It is recommended to externalize dependencies in the server build for ' +
      'Better build performance.'
    );
  }
};
 
var VueSSRServerPlugin = function VueSSRServerPlugin (options) {
  if ( options === void 0 ) options = {};
 
  this.options = Object.assign({
    filename: 'vue-ssr-server-bundle.json'
  }, options);
};
 
VueSSRServerPlugin.prototype.apply = function apply (compiler) {
    var this$1 = this;
 
  validate(compiler);
 
  compiler.plugin('emit', function (compilation, cb) {
    var stats = compilation.getStats().toJson();
    var entryName = Object.keys(stats.entrypoints)[0];
    var entryAssets = stats.entrypoints[entryName].assets.filter(isJS);
 
    if (entryAssets.length > 1) {
      throw new Error(
        "Server-side bundle should have one single entry file. " +
        "Avoid using CommonsChunkPlugin in the server config."
      )
    }
 
    var entry = entryAssets[0];
    if (!entry || typeof entry !== 'string') {
      throw new Error(
        ("Entry \"" + entryName + "\" not found. Did you specify the correct entry option?")
      )
    }
 
    var bundle = {
      entry: entry,
      files: {},
      maps: {}
    };
 
    stats.assets.forEach(function (asset) {
      if (asset.name.match(/\.js$/)) {
        bundle.files[asset.name] = compilation.assets[asset.name].source();
      } else if (asset.name.match(/\.js\.map$/)) {
        bundle.maps[asset.name.replace(/\.map$/, '')] = JSON.parse(compilation.assets[asset.name].source());
      }
      // do not emit anything else for server
      delete compilation.assets[asset.name];
    });
 
    var json = JSON.stringify(bundle, null, 2);
    var filename = this$1.options.filename;
 
    compilation.assets[filename] = {
      source: function () { return json; },
      size: function () { return json.length; }
    };
 
    cb();
  });
};
 
module.exports = VueSSRServerPlugin;

'use strict'
 
const path = require('path')
const nodeExternals = require('webpack-node-externals')
const VueSSRServerPlugin = require('../skeleton/plugin/server-plugin')
 
module.exports = {
  // This allows webpack to handle dynamic imports in a Node-appropriate fashion.
  // And also when compiling Vue components,
  // Tell `vue-loader` to deliver server-oriented code.
  target: 'node',
 
  // Provide source map support for bundle renderer devtool: 'source-map',
 
  // Point entry to the application's server entry file entry: path.resolve(__dirname, '../skeleton/skeleton-entry.js'),
 
  output: {
    path: path.resolve(__dirname, '../skeleton'), // Directory of generated files publicPath: '/skeleton/',
    filename: '[name].js',
    libraryTarget: 'commonjs2' // This tells the server bundle to use Node-style exports
  },
 
  module: {
    rules:
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options:
          compilerOptions: {
            preserveWhitespace:false
          }
        }
      },
      {
        test: /\.css$/,
        use: ['vue-style-loader', 'css-loader']
      }
    ]
  },
 
  performance:
    hints: false
  },
 
  // https://webpack.js.org/configuration/externals/#function
  // https://github.com/liady/webpack-node-externals
  // Externalize application dependency modules. Can make server builds faster,
  // and generate a smaller bundle file.
  externals: nodeExternals({
    // Do not externalize the dependencies that webpack needs to process.
    // You can add more file types here. For example, *.vue raw files are not processed,
    // You should also whitelist dependent modules that modify `global` (such as polyfills) allowlist: /\.css$/
  }),
 
  // This is a plugin that builds the entire output of the server // into a single JSON file.
  // If filename is not configured, the default file name is `vue-ssr-server-bundle.json`
  plugins: [
    new VueSSRServerPlugin({
      filename: 'skeleton.json'
    })
  ]
}

  "scripts": {
    "create-skeleton": "webpack --progress --config build/webpack.skeleton.conf.js",
    "fill-skeleton": "node ./skeleton/skeleton.js"
  }

npm run create-skeleton

// Fill the generated skeleton.json content into the template file const fs = require('fs')
const { resolve } = require('path')
const createBundleRenderer = require('vue-server-renderer').createBundleRenderer
 
// Read skeleton.json and write content using skeleton/index.html as template const renderer = createBundleRenderer(resolve(__dirname, '../skeleton/skeleton.json'), {
  template: fs.readFileSync(resolve(__dirname, '../skeleton/index.html'), 'utf-8')
})
// Write the content of the previous template into the template file 'index.html' in the root directory
renderer.renderToString({}, (err, html) => {
  if (err) {
    return console.log(err)
  }
  console.log('render complete!')
  fs.writeFileSync('index.html', html, 'utf-8')
})

"fill-skeleton": "node ./skeleton/skeleton.js"