@anthinkingcoder/vue-cli-plugin-ssr

@akryum/vue-cli-plugin-ssr

Simple Server-Side-Rendering plugin for Vue CLI (Work-in-Progress)

Sponsors

Silver

⭐ Features:

• Automatic conversion of your project to SSR
• Integrated express server
• Vuex store
• Async routes
• vue-cli-plugin-apollo support
• Custom middlewares

🚀 Roadmap:

• Automatic conversion of vuex modules to state () {}
• Integration with CLI UI

Usage

vue add @akryum/ssr
yarn run ssr:serve

To run the app in production:

yarn run ssr:build
yarn run ssr:start

Configuration

Here are the optional settings available in your vue.config.js file:

const path = require('path')

module.exports = {
  pluginOptions: {
    ssr: {
      // Listening port for `serve` command
      port: null,
      // Listening host for `serve` command
      host: null,
      // Entry for each target
      entry: target => `./src/entry-${target}`,
      // Default title
      defaultTitle: 'My app',
      // Path to favicon
      favicon: './public/favicon.ico',
      // Skip some requests from being server-side rendered
      skipRequests: req => req.originalUrl === '/graphql',
      // See https://ssr.vuejs.org/guide/build-config.html#externals-caveats
      nodeExternalsWhitelist: [/\.css$/, /\?vue&type=style/],
      // Function to connect custom middlewares
      extendServer: app => {
        const cookieParser = require('cookie-parser')
        app.use(cookieParser())
      },
      // Paths
      distPath: path.resolve(__dirname, './dist'),
      templatePath: path.resolve(__dirname, './dist/index.html'),
      serviceWorkerPath: path.resolve(__dirname, './dist/service-worker.js'),
    }
  }
}