marc-leopold/app/nuxt.config.js

const pkg = require('./package')

module.exports = {
  mode: 'universal',

  env: {
    urlInternal: process.env.URL_INTERNAL,
    urlExternal: process.env.URL_EXTERNAL,
    portApp: process.env.PORT_APP,
    portServer: process.env.PORT_SERVER,
  },

  server: {
    port: process.env.portApp,
    host: process.env.urlInternal,
  },

  serverMiddleware: [
    '~/api/contact',
  ],
  /*
  ** Headers of the page
  */
  head: {
    title: pkg.name,
    titleTemplate: 'Marc Leopold | %s',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },

      { hid: 'description', name: 'description', content: 'Photographer, Marc Leopold has images in numerous collections and publications. Here is a glimpse of his work, an insight into his philosophy and motivations.' },

      { property: 'og:image', content: 'https://marcleopold.isnet.uk/img/open-graph/marc-leopold-ss.png'},
      { property: 'og:image:width', content: '1200'},
      { property: 'og:image:height', content: '600'},
      { property: 'og:image:type', content: 'image/png' },
      { property: 'og:title', content: 'Marc Leopold Photography' },
      { property: 'og:url', content: 'https://marcleopold.isnet.uk' },
      { property: 'og:site_name', content: 'Marc Leopold Photography' },
      { property: 'og:type', content: 'website'},
      { property: 'og:description', content: 'Marc Leopold is a Chicago born photographer whose images have appeared in many collections and publications. His website is a showcase of his outstanding work and an insight into his philosophy and motivations.' },
      { name: 'twitter:card', content: 'summary' },
      { name: 'twitter:title', content: 'Marc Leopold Photography' },
      { name: 'twitter:creator', content: '@studiovxweb' },
    ],
    link: [
      { rel: 'icon', type: 'image/png', sizes: '16x16', href: '/favicon-16x16.png' },
      { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/favicon-32x32.png' },
      { rel: 'icon', type: 'image/png', sizes: '96x96', href: '/favicon-96x96.png' },
      { rel: 'stylesheet',
        href: 'https://fonts.googleapis.com/css?family=' +
              'Montserrat:400,600|' +
              'Raleway:400,600|' +
              'Satisfy'
      },
    ]
  },

  /*
  ** Customize the progress-bar color
  */
  loading: {
    color: '#fff',
    height: '1px',
  },

  /*
  ** Global CSS
  */
  css: [
    '@/assets/scss/style.scss'
  ],

  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
    { src: '~/plugins/Vuelidate' }
  ],

  /*
  ** Nuxt.js modules
  */
  modules: [
    // Doc: https://github.com/nuxt-community/axios-module#usage
    '@nuxtjs/axios',
    // Doc: https://buefy.github.io/#/documentation
    'nuxt-buefy',
    // [
      // 'nuxt-sass-resources-loader',
      // [
      //   '@/assets/scss/_globals.scss'
      // ]
    // ],
    '@nuxtjs/style-resources',
    '@nuxtjs/proxy',
  ],

  styleResources: {
    scss: './assets/scss/_globals.scss',
  },

  /*
  ** Axios module configuration
  */
  axios: {
    // See https://github.com/nuxt-community/axios-module#options
    proxy: true,
    baseURL: 'http://' + process.env.urlExternal + ':' + process.env.portApp,
    debug: false,
  },

  proxy: {
    '/api/v1/': 'http://' + process.env.urlExternal + ':' + process.env.portServer
  },

  /*
  ** Build configuration
  */
  build: {
    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {
      // vue-svg-loader
      const svgRule = config.module.rules.find(rule => rule.test.test('.svg'))
      svgRule.test = /\.(png|jpe?g|gif|webp)$/
      config.module.rules.push({
        test: /\.svg$/,
        loader: 'vue-svg-loader',
      })

      // Run ESLint on save
      if (ctx.isDev && ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  }
}