Nuxt Project Config File (SVG Sprite, i18n, vuelidate)

nuxt.config.js

const pkg = require('./package');
const SpriteLoaderPlugin = require('svg-sprite-loader/plugin');

module.exports = {
  mode: 'spa',

  /*
  ** Headers of the page
  */
  head: {
    title: pkg.name,
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: pkg.description }
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
  },

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

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

  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
    '~/plugins/i18n.js',
    '~/plugins/vuelidate.js',
  ],

  /*
  ** Nuxt.js modules
  */
  modules: [
    // Doc: https://github.com/nuxt-community/axios-module#usage
    '@nuxtjs/axios'
  ],
  /*
  ** Axios module configuration
  */
  axios: {
    // See https://github.com/nuxt-community/axios-module#options
  },

  router: {
    middleware: 'i18n'
  },

  generate: {
    routes: [
      '/',
    ]
  },

  /*
  ** Build configuration
  */
  build: {
    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {
      // Run ESLint on save
      if (ctx.isDev && ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })

        /**
         * Initialise SVG Sprites
         */

        // Excludes /assets/svg from url-loader
        const svgRule = config.module.rules.find(rule => rule.test.test('.svg'));
        svgRule.test = /\.(png|jpe?g|gif|webp)$/;
        
        // Once url-loader doesn't deal anymore
        // with svg files we can make svg-sprite-loader
        // and svgo-loader to deal with them.
        config.module.rules.push({
          test: /\.svg$/,
          use: [
            {
              loader: 'svg-sprite-loader',
              options: {
                extract: true,
                spriteFilename: 'icons.svg'
              }
            },
            {
              loader: 'svgo-loader',
              options: {
                plugins: [
                  { removeViewbox: false }
                ]
              }
            }
          ],
        })
        
        // Uncomment this line to show all the loaders used by Webpack.
        // config.module.rules.map(rule => console.log('>>>>>>>>>>>>', rule));
      }
    },
    plugins: [
      new SpriteLoaderPlugin(),
    ],
    styleResources: {
      // See https://github.com/yenshih/style-resources-loader#options
      scss: [
        './assets/styles/01-utils/_mixins.scss',
        './assets/styles/01-utils/_media-queries.scss',
      ],
    },
  }
}