Building a Nuxt CLI using NPM in Advanced

Hi CelSius, — that’s how i call my pal 😆

After building the Nuxt-CLI using NPM, now we are going to create more code.

Yes, we are going to add the basic content inside our generated files.

Repository Preparation

I’m using the existing Github for this Nuxt CLI project :

https://github.com/sherlyfebrianti96/Nuxt-CLI

Just go to the existing Nuxt-CLI folder in your local computer, or you can clone it again to your local repository.

git clone https://github.com/sherlyfebrianti96/Nuxt-CLI.git

Refactoring the schematic-item and available-file-extensions

Based on the existing code in https://github.com/sherlyfebrianti96/Nuxt-CLI, i’m moving the schematic-item.js to lib/general folder to make the structure more clean.

Create a new file lib/general/available-file-extensions.js and move the variable availableFileExtensions inside lib/execute-schematic.js .

const schematicItem = require('./schematic-item');

module.exports = [
{name: '.en-US.json', schematic: [schematicItem.component, schematicItem.page]},
{name: '.id-ID.json', schematic: [schematicItem.component, schematicItem.page]},
{name: '.spec.js', schematic: [schematicItem.component, schematicItem.page]},
{name: '.vue', schematic: [schematicItem.component, schematicItem.page, schematicItem.layout, schematicItem.store]}
];

Create the Content Generator

Create the lib/generate-file-content.js as the content-generator’s container.

const schematicItem = require('./general/schematic-item');

run = (schematic, folderName, itemName) => {
let content = '';
switch(true) {
case (schematic === schematicItem.component) :
// generate file content for component
break;
case (schematic === schematicItem.layout) :
// generate file content for layout
break;
case (schematic === schematicItem.page) :
// generate file content for page
break;
case (schematic === schematicItem.store) :
// generate file content for store
break;
default:
// do nothing when schematic is random
break;
}

return content;
};

module.exports = {
run
};

And then call it in lib/execute-schematic.js.

...const generateFileContent = require('./generate-file-content');...generateFileStructure = (schematic, fileExtenstions, folderName, itemName) => {
fileExtenstions.forEach(fileExtension => {
...
const content = generateFileContent.run(schematic, folderName, itemName);
fs.writeFile(file, content, function(err) {});
});
}

generateItem = (schematic, folderName, itemName) => {
...
generateFileStructure(schematic, fileExtensions, folderName, itemName);
}

...

Create the Content Generator for Layout

Create a new lib/generate-content-layout.js.

function camelize(text) {
return pascalCase(text).substr(0, 1).toLowerCase() + text.substr(1);
}

function pascalCase(text) {
text = text.replace(/[-_\s.\/]+(.)?/g, (_, c) => c ? c.toUpperCase() : '');
return text.substr(0, 1).toUpperCase() + text.substr(1);
}

run = (schematic, folderName, itemName) => {
const content = [];

content.push('<template>');
content.push(' <div>');
content.push(` ${schematic} content.`);
content.push(' <Nuxt />');
content.push(' </div>');
content.push('</template>\n');

content.push('<script lang="ts">');
content.push('export default {');
content.push(` name: \'Layout${pascalCase(itemName)}\',`);
content.push('}');
content.push('</script>\n');

content.push('<style lang="scss" scoped>');
content.push('/* Styles for this component */');
content.push('</style>\n');

content.push('');

return content.join('\n');
};

module.exports = {
run
};

Import and use the lib/generate-content-layout.js into your lib/generate-file-content.js.

...
const generateContentLayout = require('./generate-content-layout');

run = (schematic, folderName, itemName) => {
...
switch(true) {
...
case (schematic === schematicItem.layout) :
// generate file content for layout
content = generateContentLayout.run(schematic, folderName, itemName);
break;
...
}

...
};

...

Move the camelCase and PascalCase as a separate library

Create a new file lib/general/pascal-case.js and move the function here.

module.exports = (text) => {
text = text.replace(/[-_\s.\/]+(.)?/g, (_, c) => c ? c.toUpperCase() : '');
return text.substr(0, 1).toUpperCase() + text.substr(1);
}

Create a new file lib/general/camel-case.js and move the function here.

const pascalCase = require('./pascal-case');

module.exports = (text) => {
return pascalCase(text).substr(0, 1).toLowerCase() + text.substr(1);
}

Remove the camelCase and pascalCase function in lib/generate-content-layout.js and replace it with the lib usage.

const pascalCase = require('./general/pascal-case');

Create the Content Generator for Component/Page/Store

Create a new file under lib folder.

And then we create the rest of the file based on our preference.

To see what is the changes in this project, you can see the commit on this repository for more details about the content I have created.

Publish to NPM Package

After all has been finished and finalized, we need to update the version and publish to the NPM Package.

Summary

If you don’t like the long explanation, here is the checklist you have to do :

  • Repository Preparation
  • Refactoring the schematic-item and available-file-extensions
  • Create the Content Generator
  • Create the Content Generator for Layout
  • Move the camelCase and PascalCase as a separate library
  • Create the Content Generator for Component/Page/Store
  • Publish to NPM Package

Now, you are good to go. Cheers!

--

--

--

A passionate developer who loves design

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

VideoChat in under 30: A Rails/React Tutorial

React Query — Overview

Linting Your React+Typescript Project with ESLint and Prettier!

Using Sharp in Node.js to Output, Resize and Crop Images

How to Send and Receive SMS Messages With Node.js and Azure Functions

Responsive Styled Components in 3 Minutes (and 18 lines of code)

Building a Nuxt CLI using NPM

Learn Javascript: Introduction

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
Sherly Febrianti

Sherly Febrianti

A passionate developer who loves design

More from Medium

KYC Solutions — User-friendly API, Dashboard by Argos KYC

Customizing Strapi — v4

How to register a .ETH domain using ENS

Using NPM Packages