Photo by Christopher Robin Ebbinghaus on Unsplash

5 mins Clean up your nuxt.config.js configurations for readability

3 min readMar 25, 2021

If your configs requires multiple lines or is taking up too much room you have to find an alternative way to clean up your config files. Or are is your configurations file too big to manage now?

TLTR; :: Put your long strings and description, objects, etc in a separate JS module to later be imported into nuxt.config.js

In this example I will use vue-meta configuration module as an example.

Solution #1 — Partial abstraction

Before

//nuxt.config.jsmodule.exports = {
//...
    
    head: {
    title: 'MY TITLE',
    titleTemplate: '%s | MY TITLE',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      {
        name: 'description',
        content: `meta data
            meta data
            meta data
            meta data
            meta data
            meta data
            meta data
            meta data`
      },
      {
        name: 'keywords',
        content: `meta data
            meta data
            meta data
            meta data
            meta data
            meta data
            meta data
            meta data`
      }
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
    script: [
      //...
    ]
  },
    
//...
}

After

//assets/js/meta-data.jsmodule.exports = {
  content: `😋 `,
  keywords: `keyword1,
    keyword2,
    keyword3
  `
}

//nuxt.config.js
const metaDataConfig = require('./assets/js/meta-data')
module.exports = {
//...
    
    head: {
    title: 'MY TITLE',
    titleTemplate: '%s | MY TITLE',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      {
        name: 'description',
        content: metaDataConfig.content
      },
      {
        name: 'keywords',
        content: metaDataConfig.keywords
      }
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
    script: [
      //...
    ]
  },
    
//...
}

Solution #2 — Absolute Abstraction

Put your entire config options into another file. Import the entire configuration as is.

// ./configs/meta-data-config.js
module.exports = {title: 'MY TITLE',
    titleTemplate: '%s | MY TITLE',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      {
        name: 'description',
        content: `😋 `,
      },
      {
        name: 'keywords',
        content: `keyword1,
          keyword2,
          keyword3`
      }
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
    script: [
      //...
    ]
}

//nuxt.config.js
const metaDataConfig = require('./configs/meta-data-config.js')
module.exports = {
//...
    
    head: metaDataConfig,
    
//...
}

Sum Up

Partial abstration — does not remove the entire configuration from nuxt.config.js but purely moves just enough to make the config file less unpleasant to read. This leaves the main configuration settings inside the file to be visible.
Absolute abstraction — removes the entire configuration from nuxt.config.js and relies on you to make the correct connection between the main configuration file to the abstracted module.
Partial or Absolute abstraction of your configuration is up to what works best for you. It’s best practice to do it when your config file is unreadable. You may use both of these techniques on different modules and plugins. There is no right answer.

Hope you found this article to be helpful!

Let me know if I need to add more clarifications! Cheers! 🍺

Reference:

tags: #vue.js #vuejs #nuxtjs #javascript #typescript #programming #development