Photo by Christopher Robin Ebbinghaus on Unsplash

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

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

In this example I will use 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 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 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

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store