Marat's Notes

We using Nuxt in coffeekzn.ru - interesting library for Server Side Rendering .

Let’s start a new app from Nuxt template:

vue init nuxt-community/starter-template <project-name>

Great, let’s look at the nuxt.config.js file:

const nodeExternals = require('webpack-node-externals')
const { resolve } = require('path')

module.exports = {
  srcDir: resolve('./src'),
  /*
  ** Headers of the page
  */
  head: {
    title: 'COFFEEKZN',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'SMARTAPPS project' }
    ],
    bodyAttrs: {
      class: 'search'
    },
    link: [
      { rel: 'icon', type: 'image/png', href: '/favicon-16x16.png' },
      { rel: 'stylesheet', type: 'text/css', href: 'http://fonts.googleapis.com/css?family=Montserrat:400,300,700' },
      { rel: 'stylesheet', href: 'http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css' }
    ],
    script: [
      { src: '/js/jquery.js' }, 
      { src: '/js/popper.js' },
      { src: '/js/moment.min.js' },
      { src: '/js/bootstrap.min.js' },
      { src: '/js/bootstrap-datetimepicker.min.js' },
      { src: '/js/bootstrap-switch.min.js' },
      { src: '/js/paper-kit.js' }
    ],
  },
  /*
  ** Global CSS
  */
  css: ['~assets/css/main.css', '~assets/css/bootstrap.min.css', '~assets/css/nucleo-icons.css', '~assets/css/paper-kit.css'],
  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#3B8070' },
  /*
  ** Build configuration
  */
  build: {
    vendor: ['vue2-google-maps'],

    /*
    ** Run ESLINT on save
    */
    extend (config, ctx) {
      if (ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      } else {
        config.externals = [ nodeExternals({
          whitelist: ['vue2-google-maps']
        })]
      }
    }
  },
  modules: [
    ['@nuxtjs/yandex-metrika',
      {
        id: 'XXX',
        webvisor: true
      }],
    ['@nuxtjs/google-analytics', 
      {
        id: 'XXX'
      }]
  ],  
  /*
  ** Plugins
  */
  plugins: [
    '~plugins/maps'
  ]
}

It’s a template and skeleton for our application, so we added some header tags here like CSS and JS, Google maps plugin and GA and YM counters.

Let’s start our app, and open http://localhost:3000 in web browser.

npm run dev

One of the interesting thing - we can generate static pages for each route with command, it works superfast:

npm run generate

Production

To run your app on production server, you should use two commands:

# builds app into dist subdirectory under the hidden .nuxt directory
npm run build

# and nuxt start to start the app
nuxt start

Enjoy your app.

VueJS + NuxtJS + SSR

Production