Skip to main content

Configuration

The nuxt.config.js file contains your Nuxt.js custom configuration. This file can not be renamed.

By default, Nuxt.js is configured to cover most use cases. This default configuration can be overwritten by modifying the nuxt.config.js file. The PhotoScope template comes with its own settings, and you may want to change these settings. Some information, such as the meta information of the page, is in this nuxt.config.js file.

Default configuration​

import siteConfig from './siteConfig.js'

export default {
  mode: 'spa',
  // mode: 'universal',
  target: 'static',
  modern: false,
  /*
   ** Headers of the page
   */
  head: {
    title: '',
    titleTemplate: `%s - ${siteConfig.site.name}`,
    meta: [
      { charset: 'utf-8' },
      {
        name: 'viewport',
        content: 'width=device-width, initial-scale=1, shrink-to-fit=no'
      },
      {
        hid: 'description',
        name: 'description',
        content: siteConfig.site.description || ''
      }
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
  },
  ...

Headers of the page​

This option lets you define all default meta tags for your application like favicon, title, description etc.

/*
** Headers of the page
 */
head: {
  title: '',
  titleTemplate: `%s - ${siteConfig.site.name}`,
  meta: [
    { charset: 'utf-8' },
    {
      name: 'viewport',
      content: 'width=device-width, initial-scale=1, shrink-to-fit=no'
    },
    {
      hid: 'description',
      name: 'description',
      content: siteConfig.site.description || ''
    }
  ],
  link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
},

Loading​

This option lets you customize the loading component that Nuxt.js uses by default.

/*
** Customize the progress-bar color
 */
loading: { color: '#448AFF' }

CSS​

This option lets you define the CSS files, modules, and libraries you want to include globally (on every page).

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

Plugins​

This option lets you define JavaScript plugins that should be run before instantiating the root Vue.js application.

/*
 ** Plugins to load before mounting the App
 */
plugins: [
  { src: 'plugins/vue-closable.js', mode: 'client' },
  { src: 'plugins/vue-animejs.js', mode: 'client' },
  { src: 'plugins/vue-unicons.js', mode: 'client' }
],

Build modules​

Some modules are only required during development and build time. Using buildModules helps to make production startup faster and also significantly decreasing node_modules size for production deployments. Please refer to each module docs to see if it is recommended to use modules or buildModules.

/*
** Nuxt.js dev-modules
 */
buildModules: [
  // Doc: https://github.com/nuxt-community/eslint-module
  '@nuxtjs/eslint-module',
  [
    'nuxt-social-meta',
    {
      url: siteConfig.site.url,
      title: siteConfig.site.name,
      description: siteConfig.site.description,
      // img: 'Link to image in static folder',
      locale: siteConfig.site.locale,
      twitter: '@themebiotic',
      twitter_card: 'summary_large_image',
      themeColor: '#FFFFFF'
    }
  ]
],

Modules​

Modules are Nuxt.js extensions which can extend it's core functionality and add endless integrations. See Extensions for more details

/*
** Nuxt.js modules
 */
modules: [
  // Doc: https://bootstrap-vue.js.org
  'bootstrap-vue/nuxt',
  // Doc: https://axios.nuxtjs.org/usage
  '@nuxtjs/axios',
  '@nuxtjs/pwa',
  '@nuxtjs/style-resources',
  'nuxt-webfontloader',
  'nuxt-responsive-loader'
],

Generate​

Dynamic routes are ignored by the generate command when using Nuxt. You need to manually add your dynamic pages to the generate method as below. Thus, when you run the generate command, your dynamic pages will be created. See Static Generated Deployment

generate: {
  routes() {
    // dynamic routes
    return [
      '404',
      '/blog/blog-post',
      '/collections/animals',
      '/collections/landscape',
      '/collections/architecture',
      '/collections/arts_culture',
      '/collections/people'
    ].map((item) => {
      return item
    })
  }
},

Build​

This option lets you configure various settings for the build step, including loaders, filenames, the webpack config and transpilation.

/*
** Build configuration
 */
build: {
  // analyze: true,
  runtimeChunk: 'single',
  splitChunks: {
    name: true,
    chunks: 'all',
    maxInitialRequests: Infinity,
    minSize: 0,
    cacheGroups: {
      vendor: {
        test: /[\\/]node_modules[\\/]/,
        name(module) {
          const packageName = module.context.match(
            /[\\/]node_modules[\\/](.*?)([\\/]|$)/
          )[1]
          return `npm.${packageName.replace('@', '')}`
        }
      }
    }
  },
  terser: {
    extractComments: {
      filename: 'LICENSES'
    },
    terserOptions: {
      compress: {
        drop_console: true
      }
    }
  },
  /*
  ** You can extend webpack config here
   */
  extend(config, ctx) {}
}

Site Configuration​

The siteConfig.js file contains information about your website and contains important details to be used during this build phase. You need to update this information according to your own website.

export default {
  site: {
    name: 'PhotoScope',
    slug: 'photoscope',
    lang: 'en',
    locale: 'en_US',
    name_html: 'Photo<strong>Scope</strong>',
    slogan: '',
    author: 'Themebiotic',
    description:
      'High performance vue nuxt static website exclusively for Photographers, Designer and Creative Agencies.',
    url: 'https://photoscope.themebiotic.com/',
    copyright: 'Copyright © 2010-2020 Photoscope by Themebiotic'
  }
}